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

Question

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

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

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

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));
            });
    };
}

Answer 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
});

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

React.js Log all GraphQL queries in Sentry

sentry

reactjs

graphql

react-error-boundary