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

Question

我有一个[[React]应用程序，其中已包含一个将错误发送到Sentry的ErrorBoundary，并且工作正常。我也想将所有GraphQL查询错误都记录到Sentry中，但是我现在的问题是所有GraphQL查询，我有一个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));
            });
    };
}

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