Track JavaScript errors using Sentry

Create Sentry project

Login to Sentry and go to Projects > Create project and choose the JavaScript project type.

Install SDK

npm i @sentry/browser @sentry/tracing

Or if using Rails:

./bin/importmap pin @sentry/browser @sentry/tracing

Configure Sentry

import * as Sentry from '@sentry/browser'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  dsn: '<your-dsn>',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.2
})

To get the client key / DSN, navigate to Projects > [Project], click the cog icon on the top right and then Client Keys (DSN).

Verify setup

Include some code that’ll throw an error. For example:

// Sentry.init code from above

setTimeout(() => {
 blaaaah() 
}, 3000);

Go to your Sentry project’s issues page and you should see the error reported.

Configure Allowed Domains

Go to [Project] > General Settings > Client Security and set Allowed Domains.

Troubleshoot

• Throwing errors from your browser devtools won’t work.
• It seems like errors won’t be captured if they’re caused from the main thread of the script where Sentry is initialized (hence the use of setTimeout above). Not sure about though. Need to investigate.

Sources

• JavaScript SDK installation – Sentry docs
• JavaScript SDK configuration – Sentry docs