How to send all HTTP request errors to the Sentry in a Reactjs app in 2023?

Question

I've developed a [email protected] app, and I want to log every HTTP request error in Sentry. I read the Sentry documentation and used the captureException function of Sentry in the all catch block of my HTTP requests.

     .
     .
     .
try {
        await Api.retryConfirmationEmail(response); // This is a HTTP request
    } catch (err) {
        Sentry.captureException(err);
    }
    .
    .
    .

And this is the Sentry configuration:

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

const init = () => {
    Sentry.init({
        dsn: *******,
        integrations: [new Integrations.BrowserTracing()],
        tracesSampleRate: 1.0,
    });
};

And I invoked the init function in the root JSX file:

.
.
.
if(process.env.NODE_ENV === 'production') {
    logger.init();
};
.
.
.

And it works, but it doesn't cover all HTTP request errors.

Why is the HTTP request error doesn't log in to Sentry?

Answer 1

try call init on Sentry direct

like this

Sentry.init({
  dsn: *******,
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

or make sure you call your init() function