How Sentry works
To make use of Sentry in your React purposes, you first embrace the Sentry library in your software listing, then initialize the framework early within the app’s lifecycle. Sentry will then collect data and report it again to the Sentry service, the place you’ll be able to view it in your application dashboard. Sentry gives varied methods to slice and cube the data right into a kind that’s most helpful to you. It additionally routinely teams related errors, making it easy to acknowledge high-priority issues.
Step one is to create an account with Sentry. The developer tier offers you ongoing free entry.
Now, your undertaking will seem as a card within the tasks pane, as proven in Determine 1. For those who click on the undertaking title, Sentry will take you to the undertaking particulars web page. You now have a spot to trace points together with your app, which we’ll develop subsequent.
Create a React app
npx create-react-app sentry-js. You’ll be able to take a look at that the whole lot is operating correctly by typing
npm run begin. The UI will likely be seen at localhost:3000.
Subsequent, incorporate the Sentry SDK. Notice that you could hit CTRL-C if the app remains to be operating in dev mode or put it within the background. We’ll add two packages by way of NPM:
npm i @sentry/browser @sentry/tracing.
Your undertaking has a singular ID that’s related to a singular URL, known as the DSN (information supply title). That is the place your error experiences go. Yow will discover your undertaking’s URL by opening its particulars pane and clicking the Set up Directions hyperlink (the one subsequent to what seems to be like a pleasant imperial droid). The code snippet within the center is the one we wish to incorporate in our undertaking.
Now, we wish to add the API to the code early within the software’s loading, so open
/src/index.js and put the snippet in there. It will likely be one thing like what’s proven in Itemizing 1.
Itemizing 1. Add the Sentry SDK to index.js
import React from 'react'; import ReactDOM from 'react-dom/consumer'; 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(doc.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();
Now let’s create an error. Open
/src/App.js and add the button ingredient, as proven in Itemizing 2.
Itemizing 2. Add an error button to /src/App.js
<button onClick=() => throw new Error('FooBar Error');>Make one other Error</button> <a className="App-link" href="https://reactjs.org" goal="_blank" rel="noopener noreferrer">
When clicked, this button will throw an error. Reload the dev app and click on it. Sentry will routinely report on it with none express instrumentation.
Return to the Sentry dashboard and click on the Points hyperlink on the left-hand navigation bar. You’ll see a display much like Determine 2.
Discover that the error is proven right here with some particulars, together with the place the error was known as from (in my case, onClick(home/matthewcarltyson/sentry-js/sentry-js/src/App)) and the error message FooBar Error. Sentry is already capturing helpful data.
For those who click on the button repeatedly, you’ll discover that the error depend doesn’t rise. Sentry acknowledges related occasions, such for example of an error occurring, and teams them collectively as a single difficulty.
Efficiency monitoring with Sentry
You’ll be able to see transactions by clicking on Efficiency in Sentry’s navigation menu.
Transactions work in tandem with error monitoring, offering a method to not solely monitor for errors but in addition determine efficiency points. A easy instance can be figuring out gradual API fetch requests in your software, versus exceptions that had been thrown.
You’ll see some panes charting transaction metrics. On the backside of the display, is a desk with transactions, together with
/ transaction. That’s the results of hitting the foundation of the appliance. For those who click on on the slash, you’ll open the transaction particulars, and Sentry offers you metrics on the varied property that had been loaded by this web page, like how lengthy it took to load the favicon.
Set and filter by atmosphere
Sentry routinely assigns points and transactions to the manufacturing atmosphere if you happen to don’t inform it what atmosphere the experiences are coming from. You’ll be able to see this within the Points desk, the place the header dropdown All Env exhibits Manufacturing when clicked.
You’ll be able to set the atmosphere explicitly by including an
atmosphere discipline within the Sentry initialization (
/src/index.js on this case). An instance can be:
atmosphere: improvement. As soon as transactions have arrived with that in place, you’ll be able to kind and filter by the atmosphere.
In your builds, you’ll be able to set the
atmosphere discipline to have the suitable worth by way of atmosphere worth with a software like
The configuration display will now be populated with the discharge ID. Earlier than we are able to do the rest, we’ll want a Git commit for Sentry to connect to. So,
init a brand new repo with the steps present in Itemizing 3 (word that Git should be put in):
Itemizing 3. Init native repo
git init git add . git commit -m “preliminary”
We are able to now comply with steps much like these supplied within the Sentry Releases display, as proven in Itemizing 4.
Itemizing 4. Create a launch
We are able to use releases to trace errors and efficiency as a part of your launch cycles. You’ll be able to monitor what launch a difficulty was launched in, comply with regressions, and so forth. You may as well immediately affiliate releases to commits in a repository like GitHub.
Now we have simply scratched the floor of what we are able to do with Sentry. It may be used for integrating with difficulty monitoring techniques, assigning points to folks and groups, monitoring points, and incorporating fine-grained efficiency metrics.
Each undertaking of adequate dimension and complexity deserves error and efficiency monitoring. It’s not laborious to see why Sentry is a frontrunner on this house, because it makes it simple to handle the information generated and acquire visibility into it. Sentry’s subtle but low-effort integration makes it easy so as to add to a undertaking. You have seen that right here with our instance primarily based on React.
Copyright © 2022 IDG Communications, Inc.