0

我正在学习 React/Apollo，当我引入错误时，我的 Chrome 控制台中出现了典型的红色异常。但是，对于 Apollo，它并没有告诉我错误在我的代码中从哪里开始，就像在 React 或其他框架中一样。当使用在多个组件中触发查询的钩子时，查找问题根源的速度非常慢。

您是否使用任何技巧来调试您的 Apollo 代码，或者您能以某种方式改进错误反馈？

这是我看到的：

ApolloError.ts:46 Uncaught (in promise) Error: GraphQL error: User is not authenticated
    at new ApolloError (ApolloError.ts:46)
    at QueryManager.ts:1241
    at Object.next (Observable.js:322)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at observables.ts:12
    at Set.forEach (<anonymous>)
    at Object.next (observables.ts:12)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at httpLink.ts:142
4

2 回答 2

0

这些错误实际上是当您运行ApolloClient.query()并且有未捕获的错误时。

这就是我为处理它所做的。（但理想情况下，您会使用 useQuery）

const apiClient = new ApolloClient({
  ... // Your ApolloClient options
});

const originalQuery = apiClient.query;
apiClient.query = (...args) => {
  // Get the original stack trace instead to figure out where our uncaught error is
  const stackTrace = new Error().stack;
  return originalQuery(...args).catch(e => {
    e.stack = stackTrace;
    throw e;
  });
};

这样，当我获得堆栈跟踪时，它实际上就是我使用这个特定 Query() 的地方

于 2021-12-05T00:20:59.760 回答
0

首先，我想解决您在问题中看到的具体错误。

User is not authenticated会向我表明这在客户端（很可能）不是问题，并且您正在尝试进行需要身份验证的查询。您未通过身份验证的原因可能与客户端有关，但任何前端框架都几乎不可能告诉您问题出在哪里。

就调试 apollo 客户端问题的一般技术而言？好吧，当使用@apollo/react-hooks 时，你会从钩子直接返回的值中得到关于错误的反馈。例如，使用 useQuery 挂钩：


const Employee = () => {
    const { data, loading, error } = useQuery(LOAD_EMPLOYEE_DATA_QUERY);

    if (error) {
        console.error(error);

        throw error;
    }

   // ...
}

如果在客户端或服务器上出现问题，您将在error对象中获得有关该问题的反馈。这使得调试变得相当简单。

有时，事情并不那么简单。当出现 apollo 客户端问题时，我通常会关注的下一个地方是 Apollo 开发工具。它将向您显示进行了哪些查询及其结果。

最后，如果这不起作用，那么我将开始通过网络选项卡挖掘 XHR 请求到/(insert your graphql endpoint here). 如果有红色，那么您应该查看服务器的控制台输出。

希望这会有所帮助！

于 2020-04-25T01:32:12.343 回答