javascript - ¿Por qué Sentry ignora algunos errores en mi aplicación React?

Estoy usando Sentry para capturar errores en mi aplicación React. He llegado a darme cuenta de que los errores con códigos HTTP 502 y 504 son ignorados por Sentry. Mientras intentaba depurarlo, me di cuenta de que algunos errores de React también son ignorados. No sé por qué y me gustaría sobrescribir este comportamiento.

Aquí está mi función init:

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

Aquí se explica cómo se manejan los errores en mi ErrorBoundary:

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

Y aquí hay un ejemplo de registro dentro de esta función:

Error: Los objetos no son válidos como un hijo de React(...)

Este error no es capturado por Sentry mientras que, en mi opinión, debería serlo.

Editar: Puede que no haya configurado Sentry correctamente localmente ya que tengo un error de CORS al intentar depurar e incluso mi captureMessage() no llega a Sentry.

Respuesta #1

Sentry debería capturar todos los errores, pero tiene filtros del lado del servidor para algunos errores de React que pueden ser bastante ruidosos pero no aportan ningún valor real, por ejemplo, errores de hidratación.

Para asegurarse de que el SDK esté listo para capturar tus errores, primero debes verificar si Sentry.init() se llama antes que cualquier otro código en tu aplicación. Además, puedes activar la opción debug para los registros.

Respuesta #2

Puedo aconsejarte que revises tu archivo _error.js en busca de cualquier exclusión. Por ejemplo, es posible que no estés registrando los errores 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;
  }

  //...
};

También puede que quiera revisar su método init. Sentry tiene la opción 'ignoreErrors'.

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

Por último, pero no menos importante, verifica los whitelistUrls. Ej.

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

Esta configuración de ejemplo asegura que solo los errores que se originan en los scripts servidos desde www.example.com/static/js y ajax.googleapis.com sean reportados al servidor de Sentry. Este pequeño cambio de configuración es el cambio más fácil y de mayor impacto que puedes hacer para reducir errores.

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