React.js Записывать все запросы GraphQL в Sentry

Question

У меня есть приложение React, которое я окружилErrorBoundaryкоторый отправляет ошибки в Sentry и работает нормально. Я хотел бы также регистрировать все мои ошибки запросов GraphQL в Sentry, но теперь моя проблема связана со всеми моими запросами GraphQL, у меня есть блок catch, в котором я отправляю действие для неудавшегося запроса. Когда я удаляю блоки перехвата, ошибки регистрируются в Sentry, но я не могу запустить действие с ошибочным запросом.

Мое решение сейчас - поставить Sentry.captureException() в каждый блок catch запроса GraphQL, который очень часто повторяется.

Есть ли способ разрешить 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. Однако лучший способ справиться с этим - использовать ссылку на ошибку. Это позволит вам регистрировать как ошибки 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
});