duplicate react error

[markstory]

From @nightnei on October 4, 2018 15:47

I use componentDidCatch to send error, like in the new documentation. But I receive 2 errors: one is from componentDidCatch and another is sent from somewhere another place. Can I disable autosend errors?

componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.configureScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
      });
      Sentry.captureException(error);
}

Copied from original issue: getsentry/sentry#10021

[markstory]

From @benvinegar on October 4, 2018 18:23

Hey @nightnei – this is a client library issue, so you should open this on getsentry/sentry-javascript.

I think it'd be helpful if you could share the trace. Given that they're grouping separately, yes, it seems it's being caught elsewhere (maybe bubbling all the way up to onerror).

cc @kamilogorek

[markstory]

From @kamilogorek on October 4, 2018 18:33

@nightnei do you use development mode by any chance?

https://docs.sentry.io/clients/javascript/integrations/react/

One important thing to note about the behavior of error boundaries in development mode is that React will rethrow errors they catch. This will result in errors being reported twice to Sentry with the above setup, but this won’t occur in your production build.

[htulipe]

Looks like this important piece of information is no longer in the documentation https://docs.sentry.io/platforms/javascript/react/

[kamilogorek]

@htulipe whoops, it was there in the old docs – https://docs.sentry.io/clients/javascript/integrations/react/#expanded-usage 😅

Fixed it – getsentry/sentry-docs#840

Thanks!

[htulipe]

Thanks @kamilogorek :D

[crobinson42]

I'm running a production bundle and still getting dups? @markstory

[kamilogorek]

@crobinson42 can you provide links to few of those events?

[crobinson42]

Sure, here's a few links @kamilogorek

https://sentry.io/share/issue/b78b864eddd34b46ab7defc95b3e3f7a/
https://sentry.io/share/issue/3670dede464a40368e448cba6f88128c/

https://sentry.io/share/issue/cc62f56d4ff54cfda99008783316ffd4/
https://sentry.io/share/issue/20d9da1379954618abc092ef3903ebb8/
https://sentry.io/share/issue/db3745e2c6d04cdd8c503e555129e535/

[kamilogorek]

Nothing seems strange. Are you able to reproduce it somehow? It looks like the original error is propagated upwards your components tree.

[crobinson42]

The only thing I notice that isn't identical in each error is the minified filename where the error originated. If you use webpack and bundle splitting, the cache-busting will cause different file names of the minified output chunks. So, how could we get Sentry to group errors together based on the sourcemap's filename and not assume that it's a new error because the minified filename is different?

[kamilogorek]

So, how could we get Sentry to group errors together based on the sourcemap's filename and not assume that it's a new error because the minified filename is different?

@crobinson42 you can utilize server-side fingerprinting:

https://docs.sentry.io/data-management/event-grouping/grouping-enhancements/
https://docs.sentry.io/data-management/event-grouping/server-side-fingerprinting/

It's under "GROUPING SETTINGS" inside your project settings.

Yours would be something like this:

path:**/httpAdapter.js message:"Cannot read property 'status' of undefined" -> adapter-status-error

[crobinson42]

@kamilogorek yikes.. bundle splitting is like ~72 files and there's multiple builds a day going out so there are dozens and dozens of bundle chunk files causing duplicate errors until they get resolved individually. There's gotta be a better way - ie: Sentry groups these files by the source map filename (the original filename)?...

[kamilogorek]

I used the original filename there :) (httpAdapter.js is already resolved one)