React.js 在 Sentry 中记录所有 GraphQL 查询答案

【问题标题】：React.js Log all GraphQL queries in SentryReact.js 在 Sentry 中记录所有 GraphQL 查询
【发布时间】：2020-02-14 03:05:55
【问题描述】：

我有一个 React 应用程序，我用 ErrorBoundary 包围了它，它会向 Sentry 发送错误并且它工作正常。我也想将我所有的 GraphQL 查询错误记录到 Sentry 中，但我现在的问题是我的所有 GraphQL 查询，我有一个 catch 块，我在其中为失败的查询调度一个操作。当我删除 catch 块时，错误会记录到 Sentry 中，但我无法触发失败的查询操作。

我现在的解决方案是将Sentry.captureException() 放入非常重复的 GraphQL 查询的每个 catch 块中。

有没有办法让ErrorBoundary 仍然捕获 GraphQL 错误，即使查询有自己的 catch 块？

function getEmployee() {
    return function(dispatch) {
        dispatch(requestEmployeeInformation());

        GraphqlClient.query({ query: EmployeeQuery, fetchPolicy: 'network-only' })
            .then((response) => {
                dispatch(receiveEmployeeInformation(response.data));
            })
            .catch((error) => {
                /* temporary solution. This sends error to sentry but is very repetitive because
                   it has to be added to every single action with a graphql query 
                 */
                Sentry.captureException(error)

                //dispatch this action if the query failed
                dispatch(failGetEmployee(error));
            });
    };
}

【问题讨论】：

标签： reactjs graphql sentry react-error-boundary

【解决方案1】：

您总是可以在 catch 块内再次抛出错误。但是，处理此问题的最佳方法是使用Error Link。这将允许您记录 GraphQL 错误（作为响应的一部分返回的错误）以及网络错误（失败的请求、无效的查询等）。

import { onError } from '@apollo/link-error'

const link = onError(({ graphQLErrors, networkError, response }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      Sentry.captureMessage(message)
    )
  if (networkError) {
      Sentry.captureException(networkError)
  }

  // Optionally, set response.errors to null to ignore the captured errors
  // at the component level. Omit this if you still want component-specific handling
  response.errors = null
});

【讨论】：