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

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