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

You can always throw the error again inside the catch block. However, the best way to handle this is by using Error Link. This will allow you to log both GraphQL errors (errors returned as part of the response) as well as network errors (failed requests, invalid queries, etc.).

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