Question 196600 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why does Sentry ignore some errors in my React app?

I’m using Sentry to catch errors in my React app. I’ve come to realize that errors with 502 and 504 HTTP codes are ignored by Sentry. While trying to debug it, I’ve realized that some React errors are ignored too. I don’t know why and I’d like to override this behavior.

Here’s how errors are handled in my ErrorBoundary :

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

Here’s my init function :

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

And here’s an example of log inside this function :

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

This error is not captured by Sentry while it should be in my mind.

Tags:

2

Answers


  1. 0

    I can advise you to check your _error.js file for any exclusions. For instance, you may not be logging 404 errors.

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

  //...
};

    You may also want to check your init method. Sentry has ‘ignoreErrors’ option.

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

    Last but not least, check for whitelistUrls. E.x.

    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 http://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.

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

    Login or Signup to reply.
  2. 0

    Sentry should be capturing all errors but has server-side filters for some react errors in place that can be quite noisy but don’t provide any real value, for example, hydration errors.

    To make sure that the SDK is ready to capture your errors your should first check whether Sentry.init() is called before any other code in your app. Additionaly, you can turn on the debug option for logs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search