CODEWITHSUNDEEP
javascriptreactjssentry
Canovice
Canovice

Reputation: 10441

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

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?

Upvotes: 33

Views: 24105

Answers (8)

martinedwards
martinedwards

Reputation: 5825

Feel like I'm missing something with all of the answers.

Sentry only works when either:

  1. SENTRY_AUTH_TOKEN environment variable is present with a valid token or
  2. the .sentryclirc file is present with a valid token

So if you don't have those locally, nothing will be sent to Sentry

Upvotes: 0

Hellen Fiallos
Hellen Fiallos

Reputation: 99

https://ngrok.com/ is a good solution in case localhost filter can't be changed.

Upvotes: -1

KeshavDulal
KeshavDulal

Reputation: 4164

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.

Inbound Data Filter Option in Sentry

Upvotes: 37

AymanMaher
AymanMaher

Reputation: 11

  • I don't recommend you put your dsn in the code i would suggest you set it to an env variable for example REACT_APP_SENTRY_DSN

  • wherever you supply your env variable you can put your dsn there

  • if you supply the env variables through netlify for example the REACT_APP_ENV for staging be 'staging' for production 'production' then

let shouldSendToSentry = 
  ['staging','production'].includes(process.env.REACT_APP_ENV)

2 ways from here

  • wrap your sentry config in an if condition for example:
if(shouldSendToSentry ){
  sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN
  })
}
  • the other way is by
beforeSend: (event) => {
    if (!shouldSendToSentry) {
      return null;
    }
return event;

which in this case it will ignore all issues coming from any other environments

resources:

Upvotes: 1

Isaac Overacker
Isaac Overacker

Reputation: 1535

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

Upvotes: 40

weiliang
weiliang

Reputation: 823

In Create-React-App

// index.js
if (process.env.NODE_ENV === 'production') {
  Sentry.init({...});
}

Upvotes: 1

Peet
Peet

Reputation: 766

The easiest way I could get it working was to set the beforeSend method in Sentry.init to return null if the location is localhost.

Sentry.init({
  dsn:
    'your dsn here',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0

  beforeSend: (event) => {
    if (window.location.hostname === 'localhost') {
      return null;
    }
    return event;
  },
});

Upvotes: 15

farvilain
farvilain

Reputation: 2562

Write a function to know you're on dev using location or with some dev-env or with process.env or .env file... nevermind

function onDev() {
  return window.location.href.startsWith('http://localhost');
}

then create a Wrapper like

function SentryNoDev({ErrorBoundaryFallback, children}) {
   return onDev()
   ? children
   : <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback}>{children}</Sentry.ErrorBoundary>
   ;
}

Upvotes: 1

Related Questions