如何让Apollo客户端告诉我错误发生在代码的哪里？

Question

我正在学习React/Apollo，当我引入bug时，我会在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

Answer 1

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

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

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（）的位置。

Answer 2

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

< code > User is not authenticated 将向我表明这不是客户端的问题(很可能),您正在尝试进行需要身份验证的查询。您没有通过身份验证的原因可能与客户端有关，但是任何前端框架都不可能告诉您问题出在哪里。

至于调试阿波罗客户端问题的一般技术？好吧，当使用@apollo/反应钩子时，你会从钩子直接返回的值中得到有关错误的反馈。例如，使用查询钩子：

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

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

        throw error;
    }

   // ...
}

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

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

最后，如果这不起作用，那么我将开始在网络选项卡中挖掘XHR请求到/（在此处插入您的graph qlendpoint）。如果有红色，那么您应该查看服务器的控制台输出。

希望这有帮助！