反应.js在哨兵中记录所有 GraphQL 查询

Question

我有一个React应用程序，我用一个ErrorBoundary包围了它，它会向哨兵发送错误，它工作正常。我也想将所有 GraphQL 查询错误记录到 Sentry 中，但现在我的问题是对于我所有的 GraphQL 查询，我有一个 catch 块，我在其中为失败的查询调度一个操作。 当我删除捕获块时，错误会记录到 Sentry 中，但我无法触发失败的查询操作。

我现在的解决方案是将Sentry.captureException()放入 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/client/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
});