i have created a project in sentry on react but configuring it on gatsby is it a correct way to do?

I am using sentry to track crashing report and I have setup my project on top of react but I am configuring it by Gatsby and I have added the plugin in correct way in gatsby.js file but on creating issue in any one of the component it is not reflecting on sentry issue and I am not able to find the reason of this problem. Please help me out

I am putting error-boundary.js file inside my component folder and here is the code of that


    import React from 'react';
    import { ErrorBoundary } from '@sentry/react';
    import { Link } from 'gatsby';
    
    const FallBack = ({ error, resetError }) => (
        <div role="alert">
            <p>Something went wrong:</p>
            <pre>{error.message}</pre>
            <Link to="/" onClick={resetError}>
                <a>Try again</a>
            </Link>
        </div>
    );
    
    const ErrorBoundaryContainer = ({ children }) => {
        return <ErrorBoundary fallback={FallBack}>{children}</ErrorBoundary>;
    };
    
    export default ErrorBoundaryContainer;

and then I am importing it in gatsby-browser.js file


        import React from 'react'
        import ErrorBoundaryContainer from './src/components/error-boundary'
    
        export const wrapPageElement = ({ element }) => (
          <ErrorBoundaryContainer>
        {element}
          </ErrorBoundaryContainer>
    )

and then I am creating a case in one of my component to throw error for testing,

 

    const [toggle, toggleError] = React.useState(false);
      if (toggle) {
            console.error('console error');
            throw new Error('I crashed!');
        }
    <button type="button" onClick={() => toggleError(true)}>
                        Break the world
                    </button>

Solution

There are a few things to comment here:

wrapPageElement is a shared API between gatsby-browser.js and gatsby-ssr.js so if you use it, you must place the same snippet in both files
I'm assuming you used @sentry/gatsby as a dependency, as the docs suggests
The component that is throwing the error should contain a useEffect, otherwise, it will never throw the error. It's a React mistake, not Gatsby.
```
     const [toggle, toggleError] = React.useState(false);

     React.useEffect(()=>{
       if (toggle) {
          console.error('console error');
          throw new Error('I crashed!');
       }
     }, [toggle])

  <button type="button" onClick={() => toggleError(!toggle)}>Break the world </button>
```
Note: if it's a toggle, it should change to the opposite value, isn't it? Tweak it as you wish of course

The useEffect hook with a toggle dependencies ([toggle]) will be fired each change the toggle value changes. In your snippet, because initially is set to false (React.useState(false)) your error was never thrown. It's like saying "Ok, when my deps value (toggle in this case) changes, fire what I have inside".