javascript - 为什么 Sentry 会忽略我的 React 应用程序中的一些错误？

Question

我正在使用 Sentry 来捕获 React 应用程序中的错误。我逐渐意识到 Sentry 会忽略 502 和 504 HTTP 代码的错误。在尝试调试它时，我意识到一些 React 错误也被忽略了。我不知道为什么，我想重写此行为。

这是我的初始化函数:

Sentry.init({
  dsn: "<mydsn>",
  integrations: [
    new Integrations.BrowserTracing(),
    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
    new HttpClientIntegration({
      failedRequestStatusCodes: [502, 504],
    }) as unknown as Integration,
  ],

  tracesSampleRate: 1.0,

  enabled: true,
  release: process.env.REACT_APP_BUILD_TAG,
});

以下是我的 ErrorBoundary 中处理错误的方式:

  componentDidCatch(error: unknown, _errorInfo: unknown): void {
    // eslint-disable-next-line no-console
    console.log("TESTING. error : ", error, " , error info : ", _errorInfo);
    Sentry.captureException(error);
  }

这是此函数内的日志示例:

Error: Objects are not valid as a React child(...)

这个错误没有被 Sentry 捕获，但在我看来，它应该捕获。

编辑: 我可能没有在本地正确配置 Sentry，因为在尝试调试时出现 Cors 错误，甚至我的 captureMessage() 也无法到达 Sentry。

Answer 1

我可以建议您检查 _error.js 文件中是否有任何排除项。例如，您可能不会记录 404 错误。

MyError.getInitialProps = async (context) => {
  const errorInitialProps = await NextErrorComponent.getInitialProps(context);
  
  const { res, err, asPath } = context;

  errorInitialProps.hasGetInitialPropsRun = true;

  // Returning early because we don't want to log 404 errors to Sentry.
  if (res?.statusCode === 404) {
    return errorInitialProps;
  }

  //...
};

您可能还想检查您的 init 方法。 Sentry 有“ignoreErrors”选项。

Sentry.init({
  dsn: SENTRY_DSN ,
  release: SENTRY_RELEASE,
  tracesSampleRate: SENTRY_SAMPLING_RATE,
  // check for any exclusions
  ignoreErrors: [/The user is not authenticated/]
});

最后但并非最不重要的一点是，检查白名单网址。例如

Raven.config('your-dsn', {
    whitelistUrls: [
        'www.example.com/static/js', // your code
        'ajax.googleapis.com'        // code served from Google CDN
    ]
}).install();

This example configuration ensures that only errors that originate from scripts served from www.example.com/static/js and ajax.googleapis.com are reported to the Sentry server. This small configuration change is the easiest, most impactful change you can make to reduce errors.

来源:https://blog.sentry.io/tips-for-reducing-javascript-error-noise/