ITKarma picture

Today, I'm going to walk you through real-time error tracking in a React app. A frontend application is not typically used for bug tracking. Some companies often postpone error tracking, returning to it after documentation, tests, and more. However, if you can change your product for the better, then just do it!


1. Why do you need Sentry?


I assume that you are interested in tracking errors during production


Do you think this is not enough?


Okay, let's look at the details.


Top Reasons to Use Sentry for Developers:


  • Allows you to get rid of risks when deploying code with errors
  • QA help with code testing
  • Get quick problem notifications
  • Ability to quickly fix errors
  • Getting convenient display of errors in the admin panel
  • Sort errors by user/browser segments

The main reasons for the CEO/Lead of the project


  • Saving money (Sentry can be installed on your servers)
  • Getting user feedback
  • Understanding what is wrong with your project in real time
  • Understanding the number of problems people experience with your application
  • Help finding places your developers have made a mistake

I think that developers would be interested in this article in the first place. You can also use this list of reasons to convince your bosses to integrate Sentry.


Be careful with the last item on the list for business.


Are you already interested?


ITKarma picture


What is Sentry?


Sentry is an open source bug tracking application that helps developers track, fix crashes in real time. Keep in mind, too, that an app can improve efficiency and improve user experience. Sentry supports JavaScript, Node, Python, PHP, Ruby, Java and other programming languages.


ITKarma picture


2. Login and create a project


  • Open your Sentry account. You may need to sign in. (I draw attention to the fact that Sentry can be installed on your servers)
  • The next step is to create a project
  • Select your language from the list. (We're going to select React. Click Create Project)

ITKarma picture


Customize your application. A basic example of how to integrate Sentry into a container, you can see below:


import * as Sentry from '@sentry/browser';//Sentry.init({//dsn: "<https://63bbb258ca4346139ee533576e17ac46@sentry.io/1432138>"//});//should have been called before using it here//ideally before even rendering your react app class ExampleBoundary extends Component { constructor(props) { super(props); this.state={ error: null }; } componentDidCatch(error, errorInfo) { this.setState({ error }); Sentry.withScope(scope => { Object.keys(errorInfo).forEach(key => { scope.setExtra(key, errorInfo[key]); }); Sentry.captureException(error); }); } render() { if (this.state.error) {//render fallback UI return ( <a onClick={() => Sentry.showReportDialog()}>Report feedback</a> ); } else {//when there's not an error, render children untouched return this.props.children; } } } 

Sentry has a useful Wizard to help you understand what you should do next. You can follow these steps. I want to show you how to create the first error handler. Great, we've created a project! Let's move on to the next step


3. React and Sentry Integration


You must install the npm package in your project.


npm i @sentry/browser 

Initialize Sentry in your container:


Sentry.init({//dsn: #dsnUrl, }); 

DSN is in Projects - > Settings - > Client Keys You can find client keys in the search bar.


ITKarma picture


componentDidCatch(error, errorInfo) { Sentry.withScope(scope => { Object.keys(errorInfo).forEach(key => { scope.setExtra(key, errorInfo[key]); }); Sentry.captureException(error); }); } 

4. First error tracking


For example, I used a simple music application with the Deezer API. You can see this here . We need to create a mistake.One way is to access the "undefined" property


We need to create a button that calls console.log with user.email . After this action, we should receive the error message: Uncaught TypeError (cannot read property from undefined CDMY0CDMY) due to the absence of the user object. You can also use the Javascript exception .


<button type="button" onClick={() => console.log(user.email)}> Test Error button </button> 

The entire container looks like this:


import React, { Component } from "react"; import { connect } from "react-redux"; import { Input, List, Skeleton, Avatar } from "antd"; import * as Sentry from "@sentry/browser"; import getList from "../store/actions/getList"; const Search=Input.Search; const mapState=state => ({ list: state.root.list, loading: state.root.loading }); const mapDispatch={ getList }; class Container extends Component { constructor(props) { super(props); Sentry.init({ dsn: "https://fc0edcf6927a4397855797a033f04085@sentry.io/1417586", }); } componentDidCatch(error, errorInfo) { Sentry.withScope(scope => { Object.keys(errorInfo).forEach(key => { scope.setExtra(key, errorInfo[key]); }); Sentry.captureException(error); }); } render() { const { list, loading, getList }=this.props; const user=undefined; return ( <div className="App"> <button type="button" onClick={() => console.log(user.email)} > test error1 </button> <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div> <h1>Music Finder</h1> <br/> <Search onSearch={value => getList(value)} enterButton/> {loading && <Skeleton avatar title={false} loading={true} active/>} {!loading && ( <List itemLayout="horizontal" dataSource={list} locale={{ emptyText: <div/> }} renderItem={item => ( <List.Item> <List.Item.Meta avatar={<Avatar src={item.artist.picture}/>} title={item.title} description={item.artist.name}/> </List.Item> )}/> )} </div> ); } } export default connect( mapState, mapDispatch )(Container); 

After integrating this button, you should test it in a browser.


ITKarma picture


We have the first error


ITKarma picture


Whoo-hoo!


ITKarma picture


If you click on a header error, you will see a stack trace.


ITKarma picture


Messages look bad. Of course, we saw error messages without understanding where this code is. By default, this is the original map in ReactJS because they are not configured.


I would also like to provide instructions on setting up the source map, but that would make this article a lot longer than I planned.


You can explore this topic here . If you are interested in this article, Dmitry Nozhenko will publish the second part on source map integration. So, click more likes and subscribe to Dmitry Nozhenko , so as not to miss the second part.


5. Use Sentry with the endpoint API


Okay. We looked at the javascript exception in the previous paragraphs. However, what will we do with XHR errors?


Sentry also has custom error handling. I used it to track api errors.


Sentry.captureException(err) 

You can customize the error name, level, add data, unique user data using your application, email, etc.


superagent .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`) .set("X-RapidAPI-Key", #id_key) .end((err, response) => { if (err) { Sentry.configureScope( scope => scope .setUser({"email": "john.doe@example.com"}) .setLevel("Error") ); return Sentry.captureException(err); } if (response) { return dispatch(setList(response.body.data)); } }); 

I would like to use a generic function for the catch API.


import * as Sentry from "@sentry/browser"; export const apiCatch=(error, getState) => { const store=getState(); const storeStringify=JSON.stringify(store); const { root: { user: { email } } }=store; Sentry.configureScope( scope => scope .setLevel("Error") .setUser({ email }) .setExtra("store", storeStringify) );//Sentry.showReportDialog(); - If you want get users feedback on error return Sentry.captureException(error); }; 

Import this function into the api call.


export default query => (dispatch, getState) => { superagent .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`) .set("X-RapidAPI-Key", #id_key) .end((error, response) => { if (error) { return apiCatch(error, getState) } if (response) { return dispatch(setList(response.body.data)); } }); }; 

Let's check the methods:


  • setLevel allows you to insert a level error into the sentry dashboard. It has properties - ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info,‘ debug ’,‘ critical ’).
  • setUser helps to save any user data (id, email address, payment plan, etc.).
  • setExtra allows you to specify any data that you need, such as a store.

If you want to get user feedback about the error, you should use the showReportDialog function.


Sentry.showReportDialog(); 

Output:


Today we described one way to integrate Sentry into a React application.


→ Telegram chat by Sentry

.

Source