🔕 👋 🤰🏾 Monitoring Sentry Bugs in Front-End JavaScript Applications: Part 1 🧖 🌃 👩🏿‍🤝‍👨🏾

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

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

Here you can download the solutions discussed in this article.

What is necessary

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

Node.js : A multifunctional 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

Installation on your server

Sentry On-Premise 2

rpm — https://habr.com/ru/post/500632/
:
```
   docker  docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh
```

, Sentry- . . JavaScript.

— JavaScript. : «Hello» () «Error» ().

, «Hello», , try . , «», Sentry.

«Error» .

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>

Sentry CDN
Sentry JavaScript-

, - Node.js: http-. , index.html, ( ) , http://localhost:8080.

«Hello».

, , . , Sentry , .

, (24)
, , .

«Error».

, , . Sentry , - .

, (30)
( , )

, , , , Sentry; dsn . , , .

, , . localhost ( ). Sentry-, Sentry Project Setting.

, Sentry , , .

, , , , . , , .

, () Sentry.

vanilla / index.html

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

release (0.1.0), .

Sentry allows the use of more complex their use , which is closely linked with GitHub . This feature makes it possible to track bugs before performing certain operations.

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

PS Telegram chat Sentry https://t.me/sentry_ru

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

Monitoring Sentry Bugs in Front-End JavaScript Applications: Part 1

More articles: