The Sentry service allows you to remotely monitor bugs in front-end applications written in JavaScript .


ITKarma picture


Trying to fix problems in JavaScript front-end applications can be a daunting task, as they arise in the user's browser, which, often, you do not have access to. However, Sentry makes it possible to remotely monitor bugs.


Here you can download the solutions discussed in this article.


What you need


If you want to use these examples, you will need:


  • Node.js : A feature-rich development tool that is not part of the application. We downloaded the latest LTS version (8.12.0)
  • Sentry : Either an account in the Sentry service (you can record up to 10 thousand bugs per month for free) or an installed local Sentry - https://github.com/getsentry/onpremise

Install on your server


There are 2 ways to install Sentry On-Premise on your server


  1. Build rpm and install them - https://habr.com/en/post/500632/


  2. Use the official installer:


    Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git./install.sh 


Standard use


To start, add a new Sentry project for the application from the service’s website. After choosing the right language, you will receive the relevant documentation. In our case, we chose JavaScript .


The first example is standard JavaScript . There are two buttons: “Hello” (Hello) and “Error” .


After you click on the “Hello” button, the screen will reboot, and the try block will detect and catch the bug. After the bug is “caught”, the error report is manually sent to the Sentry service.


The Error button allows you to simply detect a bug.


vanilla/index.html


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vanilla</title> </head> <body> <button id="hello">Hello</button> <button id="error">Error</button> <div id="output"></div> <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script> <script> (function () { 'use strict'; Sentry.init({ dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664' }); var helloEl=document.getElementById('hello'); var errorEl=document.getElementById('error'); var outputEl=document.getElementById('output'); helloEl.addEventListener('click', handleHelloClick); errorEl.addEventListener('click', handleErrorClick); function handleHelloClick() { outputEl.innerHTML='Hello World'; try { throw new Error('Caught'); } catch (err) { Sentry.captureException(err); } } function handleErrorClick() { throw new Error('Uncaught'); } })(); </script> </body> </html> 

Notes:


  • Sentry is installed from the CDN and displayed as a global variable
  • A little earlier, we launched Sentry in our JavaScript

To test this example, we can use the static web server platform Node.js : http-server . We go to the folder where the index.html file is stored and enter (the option c disables caching) the following line to open the address http://localhost: 8080 .


How caught bugs are displayed


First, click on the “Hello" button.


ITKarma picture


We caught a bug, so it will not pop up the call stack, therefore, it will not be monitored in the console. However, since we manually send a bug report to Sentry , we’ll see a message about it in your account.


ITKarma picture


Notes:


  • We can trace in which line (24) a bug was found
  • In addition, the navigation chain displays the actions of the browser, which led to an error.

How uncaught bugs are displayed


We click the button determinedError>.


ITKarma picture


A bug pops up the call stack and thus an error message is displayed on the console. After that, Sentry automatically monitors the bug, without any additional action.


ITKarma picture


Notes:


  • We can see in which line (30) the bug was lost
  • The navigation chain is not provided (I don’t quite understand why)

How to ensure the security of the project


You may have noticed the way we control pages that can send bug reports to our Sentry project; using the dsn entry. The problem is that anyone who views the source code of your page can see the entry.


To avoid this, you need to limit the number of domains that can log error reports into our project. In this example, we used localhost (localhost). This option is configured in the settings tab of the Sentry project, Sentry Project Setting .


ITKarma picture


Releases


If you think about how to use Sentry in different variations of our application, then you need some mechanism that will flag errors with the version number.


After all, you don’t need the bug fixed by us to come up again, but we thought that what we fixed didn’t work. It may be that the user launched an older, cached version of the application.


To solve the problem, you need to enter the identifier of the release (version) when starting Sentry .


vanilla/index.html


... var RELEASE='0.1.0'; Sentry.init({ dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664', release: RELEASE, });... 

After that, all new bugs will be marked as release (0.1.0) , that is, they will be tied to the correct version of the code.


ITKarma picture


Notes:


  • We've figured out an easy way to use releases
  • Sentry allows you to use more than complicated their use , which is closely related to GitHub . This feature allows you to track bugs before performing certain operations.

P.S. The second part is longer, so it will be in a separate post.


P.S Telegram chat Sentry https://t.me/sentry_ru


P.S. I forgot to indicate that this is a translation of the post https://codeburst.io/sentry -error-reporting-by-example-part-1-999b2df11556

.

Source