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

Question

I've developed a react@16.14.0 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?

Have you ever invoked `init()` somewhere in your script? It seems like you have the Sentry init within this function. — node_modules, Jan 26 '23 at 15:36

score 0 · Answer 1 · answered Jan 27 '23 at 19:54

0

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

answered Jan 27 '23 at 19:54

Saeed Mahmoud

36
1
7

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

1 Answers1