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

标签： reactjsgraphqlsentryreact-error-boundary

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