React / Sentry for Error Reporting - How to not send errors from dev / localhost

Question

We're using Sentry in our React project by adding the following to our main index.js and App.js files:

index.js

// Import Stuff
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
... import other important react stuff...

// https://sentry.io/onboarding/cbb-analytics/get-started/ (not my real dsn)
Sentry.init({
    dsn: 'https://[email protected]/3293942',
    integrations: [
        new Integrations.BrowserTracing()
    ],
    tracesSampleRate: 1.0
});

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root'));

App.js

import * as Sentry from '@sentry/react';
... other imports for app.js ...

// And Create The App
function App() {
    // check logged in...
    // check global state...
    // fetch some global data...

    return (
        <GlobalContext.Provider value={globalStateObj}>
            <AppNavbar />
            <LoginModal />
            <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback}>
                <Switch>
                    <Route exact path='/' render={(props) => <HomePage {...props} />}
                    <Route exact path='/about-us' component={AboutUs} />
                    <Route exact path='/reports' component={Reports} />
                    <Route component={NoMatch} />
                </Switch>
            </Sentry.ErrorBoundary>

            <AppFooter />
        </GlobalContext.Provider>
    );
}

export default App;

We could certainly be more granular with our Error Boundaries, but as it stands, wrapping the whole switch, which contains 99% of the code in our app, is getting the job done for us. Whenever a user runs into any issue on the website, we're getting that as an issue in Sentry.

However, we would prefer it if Issues weren't created in Sentry if the error comes from dev / localhost... We break stuff / get errors all the time in dev when writing new code, and sending these as issues to Sentry just clutters Sentry and makes it a bit harder to keep track of those important errors that happen in production.

Can we use our process.env.NODE_ENV to determine dev vs prod, and use this somewhere in index.js or in App.js to prevent issues from being sent for localhost? Or perhaps sentry has a way to explicitly ignore issues from an ip, like localhost:3000?

Answer 1

2023-July Answer

Try looking for Inbound Filter inside Project Settings in Sentry.

It has an option to filter-out localhost.

This doesn't count against quotas as well.

Answer 2

Set enabled in the Sentry config to false when not in production.

Sentry.init({
    dsn: 'your-dsn',
    integrations: [
        new Integrations.BrowserTracing()
    ],
    tracesSampleRate: 1.0, // Should not use 1.0 in production
    enabled: process.env.NODE_ENV !== 'development',
});

Side note: Sentry discourages setting tracesSampleRate to 1.0 in production