Log to console with Sentry

Sentry is great for logging errors in your production front-end application. In development, however, seeing logs in the console provides a much better debugging experience.

You can rely on console.log you can’t easily turn it off depending on the log level enabled in your application. You also now have two separate logging streams to manage.

That’s why you should use Sentry to log to the console as well.

Simple add a beforeSend method as below:

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  integrations: [new BrowserTracing()],
  beforeSend: (event, hint) => {
    if (process.env.NODE_ENV !== "production") {
      // eslint-disable-next-line no-console
      console.error(hint.originalException || hint.syntheticException);
    }
    return event;
  },
  tracesSampleRate: 1.0,
});

You'll now see all logs in your console as well as on Sentry.