Call captureException inside componentDidCatch does not send data (React integration)

[rodolfo3]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
I just setup raven:

    <script src="https://cdn.ravenjs.com/3.24.2/raven.js" crossorigin="anonymous"></script>
    <script>
      Raven.config('{{{ SENTRY_CLIENT_DSN }}}', {release: '{{{APP_CURRENT_VERSION}}}'}).install();
    </script>

My component (using ES6 transpiled using babel):

import React from 'react';

const InvalidComponent = () => ({});  // render will fail, should not return an object

class ErrorTesting extends React.Component {
  state = {
    forceError: false,
    error: false,
  }

  throwError = () => {
    if (this.state.forceError) {
      return <InvalidComponent />;
    }

    return null;
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error: true });
    if (typeof Raven !== 'undefined') {
      Raven.captureException(
        error,
        {
          extra: {
            info: errorInfo,
            logger: 'react.componentDidCatch',
            props: this.props,
          },
          logger: 'react.componentDidCatch',
          tags: {
            componentName: (this.constructor.displayName || this.constructor.name || 'Component'),
          },
        }
      );
    }
  }

  render() {
    if (this.state.error) return 'ooooops';
    return (
      <div>
        { this.throwError() }
        <button onClick={() => this.setState({ forceError: true })}>
          Do not click me!
        </button>
      </div>
    );
  }
}

export default ErrorTesting;

What is the expected behavior?

The request to sentry is made using default data, not passed into captureException.

It is calling captureException twice: first the default from raven, and again inside componentDidCatch.
It only works removing .install() from the setup, but it stops to capture exceptions outside this react component. Also, the documentation indicates to include it.

Testing on Firefox Developer Edition (60.0b15 (64-bit) and Google Chrome Beta (66.0.3359.117).

[kamilogorek]

@rodolfo3 it's caused by the React that's bubbling the event to global handler in Development Mode only, but not in production. Please read the explanation here: #1249 (comment)

I'll leave this issue open to remember that I have to mention this in the docs.

[kamilogorek]

Whoops.

[mlecoq]

@kamilogorek I did not find this issue mentioned in the documentation, has it been added ? I think it can be useful 😁 (for us at least ... )

[kamilogorek]

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

Fixed it – getsentry/sentry-docs#840

Thanks!