Client side error catching using Sentry.io

 When going live with an application we very often come up with the question how reliable it really works on the clients machines. The most important thing for the operators of the application is to monitor crashes and errors caused by the application.

We can catch Server side errors easily with Logging and monitoring tools available these day but how about any issue rising in Client side due to client side scripting i.e JS or due to browser's incompatibility. 

All these issues are to be caught up to analyze and hence comes Sentry. 

In the past, I have used Raygun.io for the same purpose but Sentry is more robust and popular. 

“Every developer writes tons of bugs. And many of those bugs get shipped to production. That’s unavoidable. But thanks to Sentry, you can find and fix those bugs before your customers even notice a problem. When things go to hell, we’ll help you fight the fires.” 

-- Sentry’s website.

I am working on an angular application on Front end side and here is the code to install Sentry package :

npm install --save @sentry/angular @sentry/tracing

Use the following plumbing code in the main.ts file to initialize Sentry:

Sentry.init({
  dsn: "https://...." ,
  environment: environment.production ? 'prod' : 'dev',
  integrations: [
    // Registers and configures the Tracing integration,
    // which automatically instruments your application to monitor its
    // performance, including custom Angular routing instrumentation
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "https://yourserver.io/api"],
      routingInstrumentation: Sentry.routingInstrumentation,

    }),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
}

Relevant readings:

Angular + Sentry: Application Monitoring with Releases & Source Maps | by Leonardo Giroto | Loft | Medium