ReferenceError: Sentry is not defined

[rodrigogiraudo]

I Followed the documentation and can't manage to use this. I have in gatsby-config.js in plugins:[]

{
      resolve: 'gatsby-plugin-sentry',
      options: {
        dsn: MYURL,
        // Optional settings, see https://docs.sentry.io/clients/node/config/#optional-settings
        environment: 'staging',
        enabled: (() => ["production", "stage"].indexOf(process.env.NODE_ENV) !== -1)(),
        debug: true
        attachStacktrace: true,
      }
    },

I created the component ErrorBoundary as:

import React from 'react';

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

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

  render() {
    return this.props.children;
  }
}

and in my rootWrapper.js I added to the nesting:

export default ({ element }) => {
  return (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <ErrorBoundary>
            <App element={element} />
          </ErrorBoundary>
        </Provider>
      </ThemeProvider>
    </StylesProvider>
  );
};

And when triggering an error I get:

ReferenceError: Sentry is not defined
ErrorBoundary.componentDidCatch
src/components/ErrorBoundary/index.js:11

[runebakjacobsen]

I think you are missing an import in your ErrorBoundary component. Try adding import Sentry from "gatsby-plugin-sentry"

[mmgolden]

I added this and it works import * as Sentry from '@sentry/browser';