How to Get Started with Sentry Error Tracking
Table of Contents
Introduction
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 may become slower, so you'll add some caching to make requests faster and track the speed of your pages so you know if you have improved or not.
Now, this blog will show how to get started using Sentry.io with JavaScript in a web application. Sentry.io supports the following features:
-
Open-source error tracking system supporting PHP, Node.js, Python, Ruby, C#, Java, Go, React, Angular, Vue, and JavaScript.
-
The pricing starts as free with limited features and can be upgraded to a paid version with more.
Go to Sentry.io to Register
First, go to Sentry.io to create an account and follow the instructions to
prepare the JavaScript SDK. The application used in this sample was using
Node.js in the backend. The frontend has a TypeScript file called
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 that includes the Sentry.io code, you should start seeing some data in your Sentry.io account. You can modify the environment setting as shown above to separate data by different environments.
Conclusion
That's all you need to get started with Sentry.io. There are many more settings you can configure, but this is the minimal setup required to get started with error tracking and performance monitoring.