Tracking Errors In React App With Sentry

Today, I’m going to tell you about a real-time errors tracking in React application. The frontend app usually doesn’t use error tracking. Some companies often postpone error tracking, coming back to it after documentation, tests, and other things. However, if you can change your product for the better, Just do it! 📄 Plan: Why do you need Sentry? Sign In and create a project Integrate Sentry in app First error tracking Use Sentry with API Endpoint Sentry**?** 1. Why do you need I assume you are interested in real litem error tracking in production Do you think that’s not enough? 😄 Okay, let’s look at the details. The main reasons for developers: Getting rid of risks to deploy code with bugs Helping QA with testing code Getting a quick notification about troubles Allowing a fast turnaround with bug fixes Receiving a convenient display errors in admin panel Sorting the errors by user / browser segments The main reasons for CEO / Lead Project Saving money Getting user’s feedback Understanding what is wrong with your project in real time Understanding the number of issues people are having with your app Finding where your developers have messed up 😄 I think developers would be interested in this article primarily. You also can use this list of reasons to convince the superiors to integrate Sentry. 💡 😄 Be careful with the last item in list for business. Are you interested already? What is Sentry? Sentry is Open-source error tracking that helps developers to monitor, fix crashes in real time. Don’t forget about boosting the efficiency, improving user experience. Sentry has support for JavaScript, Node, Python, PHP, Ruby, Java and other programming languages. 👨💻 Let’s get started 2. Sign in and Create a project Open your Sentry Account. You might need to sign in. Go here Next step create a project Choose your language from the list(We’re going to pick React. Click “Create Project”) Configure your application. The base example How to integrate Sentry in a container, you can see below: https://medium.com/media/9d57367e39b11fbcc0357236b09d357b/href Sentry has a useful wizard that helps you understand what you should do next. You can follow these steps. I want to show you how to create the first error handler. Well done, we’ve created a project! Go to the next step. Sentry integration 3. First of all, we should install npm package in your project. npm i @sentry/browser Initialize Sentry in your container: Sentry.init({ // dsn: #dsnUrl, }); DSN property has in Projects -> Settings -> Client Keys. Or you can find Client Keys in search input. https://medium.com/media/c99a647cbf4605826b2649cc1dbe8e15/href 4. First error tracking I used a simple music app with API Deezer in a hurry, just for example. You can see it . We need to create an error. One way is to refer to a property of ‘undefined’ here We should create a button that calls with . After this action, we have to get an error message: due to the lack of user object. You also can use console.log user.email “Uncaught TypeError (Cannot read property ‘email’ of undefined)” javascript throw exception. https://medium.com/media/39831a220831a104d0c862101ecbf6db/href The entire container looks like this: https://medium.com/media/d2029f099d56796c00db6cc1267eec3e/href After integrating this button, you should test it in a browser. We have our first issue 😄 Whoo-hoo! 🎉 🎉 🎉 If you click title error, you’ll see a stack trace. The Messages look bad. Of course, we have seen error messages, not understanding where this code is. It’s about a source map by default in ReactJS because they aren’t configured. I would like to provide instructions for source map configuration as well, but it would make this article much longer than I originally intended. You could explore this topic . If you are interested in this article, click more claps and I’ll post second part about the integration of source map. So, click more likes and follow me in order not to miss the second part. 👏❤️ here Use Sentry with API Endpoint 5. Okay. We covered javascript exception in previous points. However, what are we going to do with XHR errors?Sentry also has custom error handling. I used it for tracking api errors. Sentry.captureException(err) You can customize error name, level, add data, unique user data with your app, email, etc. https://medium.com/media/c0ccf493677cb6f55225d72712349f00/href I’d like to use a common function for api catch. https://medium.com/media/6340eaf3d8f6f19429d7a0738b70c251/href Import this function to api call. https://medium.com/media/48c89fe6e4dd568f2e5d6fdb45e66f0b/href Let’s check the methods out: allows to insert level error in sentry dashboard. It has properties — (‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info, ‘debug’, ‘critical’). setLevel helps to save any user data (id, email, payment plan and etc). setUser allows to set any data that you need, for example, the store. setExtra If you want to get user feedbacks about error, you should use function showReportDialog. Sentry.showReportDialog(); Conclusion: Today we’ve described at one of the ways to integrate sentry in react app. Your Expectations after integrating sentry. In reality Of course, it is a joke =)I hope your projects will be clear without any errors. Good luck with your project. 👇 You also should read next article: 👇 “5 Ways to animate a React app in 2019” ❤️ Thanks for Reading Have fun, keep learning, and always keep coding. Follow me on & . Medium Linkedin 👏 Like, Share, Leave your comment If you have any questions or feedback, let me know in the comments below 👇