Error tracking with JavaScript, React, and Sentry

Tracking down errors in a manageable way is one of the most daunting tasks for developers. In the past, error tracking had to be rebuilt for each application, often resulting in extra lines of code throughout the business logic. Sentry is an error tracking framework that provides a framework, backend, and visualization console to do a lot of the heavy lifting for you. It also provides everything needed for easy integration into your JavaScript codebase.

Sentry recently announced new optimizations for front-end JavaScript bundles that reduce package size by about 29%. Ben Vinegar, Sentry’s vice president of emerging technologies, said the company has his two goals for this optimization. Shake and switch from JavaScript ES5 to ES6. “

Now is a great time to explore how to use Sentry in your JavaScript apps. If you already use Sentry, now is the time to update your bundle.

This demo uses React to see how Sentry works in a front-end JavaScript application.

How Sentry works

To use Sentry in your React application, first include the Sentry library in your application directory, then initialize the framework early in your app’s lifecycle. Sentry then collects and reports the information to the Sentry service, which can be viewed in the Application Dashboard. Sentry offers a variety of ways to slice and dice information into the most useful form. It also automatically groups similar errors so you can easily recognize high-priority issues.

Setting up your sentry

The first step is to create an account with Sentry. At the developer level, access is free on an ongoing basis.

After logging into your account, create a project. The main navigation is in the menu on the left side of the screen.click projectafter that create project It’s in the upper left corner. Select JavaScript as the technology, give the project a name, and create the project.

The project now appears as a card in the project pane, as shown in Figure 1. Clicking on the project name will take Sentry to the project details page. Now you have a place to track app issues. This will be developed next.

IDGMore

Create a React app

Let’s bootstrap a JavaScript React application at the command line by typing: npx create-react-app sentry-js. You can test that everything is running properly by typing npm run startThe UI is displayed at localhost:3000.

Next, include the Sentry SDK. Note that you need to press CTRL-C if the app is still running in development mode or if you want to put the app in the background. Add two packages via NPM. npm i @sentry/browser @sentry/tracing.

A project has a unique ID associated with a unique URL called a DSN (data source name). This is where error reports are sent. To find the project URL, open the project details pane and click Installation instructions Link (next to what looks like a friendly Imperial droid).

Now I want to add an API to my code early in the application load, so open it. /src/index.js Put the snippet there. It should look something like the one shown in Listing 1.

Listing 1. Adding the Sentry SDK to index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

Sentry.init({
  dsn: "https://<YOUR-DSN-HERE>",
  integrations: [new BrowserTracing()],

  tracesSampleRate: 1.0
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Now let’s create an error.Open /src/App.js Add a button element as shown in Listing 2.

Listing 2. Adding an error button to /src/App.js

<button onClick={() => {throw new Error('FooBar Error');}}>Make another Error</button>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">

Clicking this button throws an error. Reload the development app and click. Sentry reports automatically without explicit instrumentation.

Return to your Sentry dashboard and select problem Links in the left navigation bar. A screen similar to Figure 2 will appear.

IDGMore

Notice that the error is displayed here along with some details such as where it was called from (in my case onClick(home/matthewcarltyson/sentry-js/sentry-js/src/App)) and the error message. be careful. FooBar errorSentry has already collected useful information.

If you click the button repeatedly, you will notice that the error count does not increase. Sentry recognizes similar events, such as an instance of an error occurring, and groups them together as a single issue.

Performance monitoring with Sentry

Click to view transaction history performance Sentry’s navigation menu.

Transactions work in conjunction with error monitoring to provide a way to identify performance problems as well as monitor errors. A simple example is identifying slow API fetch requests in your application for thrown exceptions.

Several panes appear that graph transaction metrics. At the bottom of the screen is a table containing transactions. / transactionIt’s the result of hitting the root of the application. Click the slash to open the transaction details. Sentry provides metrics on various assets loaded by this page, such as how long it took to load the favicon.

Setting and filtering by environment

If you don’t specify an environment to send reports from, Sentry automatically assigns issues and transactions to the production environment. this is, problem table, header dropdown All environments show manufacturing when clicked.

You can explicitly set the environment by adding environment Sentry initialization fields (/src/index.js in this case). For example: environment: developmentAs transactions arrive, they can be sorted and filtered by environment.

In the build environment Fields with appropriate values ​​via environment values ​​using tools like dotenv.

release

Sentry also allows you to view and organize your data through releases.click release Click the link in the navigation menu to get started.in the all projects In the dropdown, select the previously created project. This will open a dialog for creating a release.click <あなたのトークンはここをクリック> Link to select Create a new integrationA dialog will appear asking for a name for the new integration. This is the association between a deployment and a project.In my case I can accept the default javascript-1 release integration.

The release ID is displayed on the configuration screen. Before we do anything else, we need a Git commit to attach the Sentry to. yes, init A new repository containing the steps shown in Listing 3 (note that Git must be installed).

Listing 3. Initializing the local repository

git init
git add .
git commit -m “initial”

Now you can follow steps similar to those provided in the Sentry release screen, as shown in Listing 4.

Listing 4. Create a release

# Installs the sentry command line tool:
curl -sL https://sentry.io/get-cli/ | SENTRY_CLI_VERSION="2.2.0" bash
# Sets env variables
SENTRY_AUTH_TOKEN=
VERSION=`sentry-cli releases propose-version`
# use the tool to create a release
sentry-cli releases new "$VERSION" --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

# Associate the git commit
sentry-cli releases set-commits "$VERSION" --auto --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

#
sentry-cli releases finalize "$VERSION" --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

Now go back to the Sentry console and type release date On the left you will see the newly created release.you can see it’s placed correctly javascript-1 projectClick on the release itself to see metrics and details about it.

You can use releases to track errors and performance as part of your release cycle. You can track the release in which the issue was introduced, or track the regression. You can also associate releases directly with commits in repositories such as GitHub.

Conclusion

You’ve only scratched the surface of what Sentry can do. It can be used to integrate with issue tracking systems, assign issues to people and teams, track issues, and incorporate granular performance metrics.

All projects of sufficient size and complexity deserve error and performance tracking. With the ease of managing and visualizing the data generated, it’s not hard to see why Sentry is the leader in this space. Sentry’s sleek and easy integration makes it easy to add to your project. We’ve seen it in examples based on React.