Sentry-javascript: Event not captured in ReactComponent.componentDidCatch (production)

Created on 8 Jul 2019 · 6Comments · Source: getsentry/sentry-javascript

☝️ SOLVED! It was an issue with React Error Boundaries. More information here.

[x] Review the documentation:
/
[x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
[x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
~~Provide a link to the affected event from your Sentry account~~

Package + Version

[x] @sentry/browser

Version:

5.5.0

Description

Hi, I'm new to Sentry and try to setting it up in my project. The project is a React SPA, built with webpack, hosted on AWS S3 (behind CloudFront).

When configuring Sentry and running the app with webpack-dev-server (from localhost:8080), everything's fine, I receive events on my Sentry accounts from errors I get.
Sentry is configured like this:

    Sentry.init({
        dsn: SENTRY_DSN,
        environment: APP_ENV,
        release: RELEASE_NAME,
    });

Where APP_ENV is the context of build (can be dev, staging or production), and RELEASE_NAME is a concatenation of the project name, context and version number (like [email protected].

As I said, I receive issues for event in dev environment.

But when I deploy my code on staging, I don't receive any event anymore.

I've verified the constants and they are correctly set.

Maybe I missing a point or something in the configuration, but at this point, I didn't find anything relevant in the documentation.

The only things that are different between the two envs:

the hostname (dev on localhost:8080, staging on a fully-qualified domain, with https)
the sentry config (environment & release)
the webpack building process (staging produce "production" code, with minification and chunking)

Thanks,

Needs Triage

Source

leny

Most helpful comment

Nevermind, I figured it out: I'm using componentDidCatch (Error Boundaries) in my react code.
And, in production, it stop the bubbling of the error, which isn't sent to Sentry.

For anyone who will get the same problem, I've simply sent the error manually to Sentry:

componentDidCatch(error, info) {
        if (NODE_ENV !== "development") {
            Sentry.withScope(scope => {
                scope.setExtra("componentStack", info);
                Sentry.captureException(error);
            });
        }
}

leny on 9 Jul 2019

👍2

All 6 comments

Quick update: I even try to recreate a whole new sentry project, just changing the DSN in the code, and have the same problem.

leny on 9 Jul 2019

Another update: I setup debug mode in sentry, here's a screenshot of my console when an error happened (error triggered from a React component):
Screen Shot on 2019-07-09 at 10-59-58

leny on 9 Jul 2019

Nevermind, I figured it out: I'm using componentDidCatch (Error Boundaries) in my react code.
And, in production, it stop the bubbling of the error, which isn't sent to Sentry.

For anyone who will get the same problem, I've simply sent the error manually to Sentry:

componentDidCatch(error, info) {
        if (NODE_ENV !== "development") {
            Sentry.withScope(scope => {
                scope.setExtra("componentStack", info);
                Sentry.captureException(error);
            });
        }
}

leny on 9 Jul 2019

👍2

@leny we have a note about it in our docs :)

https://docs.sentry.io/platforms/javascript/react/#error-boundaries