How to Getting Started with Sentry Error Tracking

This blog shows how to get started with Sentry.io for tracking JavaScript errors and performance. 

Often once you ship your website, you'll continue to add content and features, which means you'll need to call more APIs to get more data, then your site will become slower, so you'll add some Cache to make the request faster and tracking the speed of your page so you'll know if you have improved or not. 

Now, this blog will try to show how to get started to use Sentry.io with JavaScript at Web Application, however, Sentry.io supports the following features.

• Open-source error tracking system support PHP, Node.js, Python, Ruby, C#, Java, Go, React, Angular, Vue, JavaScript.
• The pricing can start as free with limited features and can upgrade to the paid version with more.

Go to Sentry.io to register

First, go to Sentry.io to create an account, follow the instruction to prepare the JavaScript SDK. The application used in this sample was using Node.js in the backend, the frontend has a typescript file global.ts, and we want to add Sentry.io to the UI's JavaScript code. 

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
    dsn: "{THIS CODE WILL PROVIDE BY SENTRY.IO}",
    integrations: [new Integrations.BrowserTracing()],
    environment: 'local', // default is 'Production'
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
  });

Run the Page

Once you run the page which has the Sentry.io code, you should start seeing some data at the sentry.io account. You can modify the environment as above to set to different environments of the data. 

That's all

Pretty much that's all to get started for setting up the environment for the Sentry.io, there're lots to setting you can do but this is minimal change you need to get started.