sentry - Sentry 能否在浏览器中捕获网络错误(XHR 或获取)？

Question

我目前正在将 Sentry 集成到 Angular 网络应用程序中。我成功地将 Sentry 中的 console.log/warn/error 和异常报告为“问题”。

但是，当对我的服务器的请求失败时(HTTP 4XX 或 5XX)，Sentry 完全忽略此错误并且不发送它。

我已经为 tracingOrigins 尝试了所有可能的值。

Sentry.init({
    dsn: '******',
    integrations: [
        new CaptureConsole(),
        new Integrations.BrowserTracing({
            tracingOrigins: ['localhost', 'http://localhost:4646/api']
        })
    ],
    tracesSampleRate: 1.0,
    debug: true
});

我能做什么？

Answer 1

您可以使用此处未处理的拒绝事件:https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event

当您的 promise 失败并出错但未被捕获时，此事件将触发。这里可以添加Sentry.captureException。

然而，您拥有 CaptureConsole 这一事实意味着您可能会将所有控制台错误作为 Sentry 事件发送，并且应该发送未捕获的 4xx 和 5xx。我假设您正在捕获并处理这些？

处理这些问题的一种方法是在处理响应对象时在 fetch/xhr 库中添加 Sentry.captureException。

如果只记录每个 Uncaught Error 更容易，您可以修补 Promise 对象:

window.Promise = class extends Promise {
  catch(func, ...args) {
    let loggingFunc = (error = {}, ...args) => {
      console.warn('Promise caught', error);
      Sentry.breadcrumb('Promise caught', error.message, Sentry.Severity.Error);
      return func(error, ...args);
    };
    return super.catch(loggingFunc, ...args);
  }
};