🥇 Monitering van foute met Sentry in front-end toepassings geskryf in JavaScript: Deel 1

Service Sentry laat jou toe om foute op afstand te monitor in front-end toepassings wat in geskryf is JavaScript.

Probeer om probleme in front-end toepassings op te los JavaScript kan moeilik wees omdat hulle in die gebruiker se blaaier ontstaan, waartoe jy dikwels nie toegang het nie. Maar Sentry maak dit moontlik om foute op afstand te monitor.

Hier U kan die oplossings aflaai wat in hierdie artikel bespreek word.

Wat nodig is

As jy hierdie voorbeelde wil gebruik, sal jy nodig hê:

Node.js: 'n Kenmerkryke ontwikkelingshulpmiddel wat nie deel van die toepassing is nie. Ons het die nuutste LTS-weergawe (8.12.0) afgelaai
Sentry: Of 'n rekening in die Sentry-diens (jy kan tot 10 duisend foute per maand gratis opneem) of 'n geïnstalleerde plaaslike Sentry - https://github.com/getsentry/onpremise

Installasie op jou bediener

Om Sentry On-Premise op jou bediener te installeer, kan jy op 2 maniere gaan

Bou rpm en installeer dit - https://habr.com/ru/post/500632/

Gebruik die amptelike installeerder:

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

Standaard gebruik

Om te begin, voeg 'n nuwe een vanaf die dienswebwerf by Sentry-projek vir die aansoek. Nadat u die verlangde taal gekies het, sal u die ooreenstemmende dokumentasie ontvang. In ons geval het ons gekies JavaScript.

Die eerste voorbeeld is standaard JavaScript. Daar is twee knoppies hier: "Hallo" (Hallo) en "Fout" (Fout).

Nadat jy op die knoppie geklik het "Hallo", sal die skerm herlaai en die blokkeer probeer sal die fout opspoor en vang. Nadat die fout "gevang" is, word die foutverslag met die hand na die diens gestuur Sentry.

Met die "Fout"-knoppie kan jy maklik 'n fout opspoor.

vanielje/indeks.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://[email protected]/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>

Notas:

Sentry word vanaf 'n CDN geïnstalleer en as 'n globale veranderlike blootgestel
'n Bietjie vroeër het ons Sentry in ons JavaScript bekendgestel

Om hierdie voorbeeld te toets, kan ons 'n statiese webbedienerplatform gebruik Node.js: http bediener. Gaan na die gids waar die lêer gestoor is index.html, en voer die volgende reël in (opsie met deaktiveer kas) om die adres in die blaaier oop te maak http://localhost:8080.

Hoe gevang goggas vertoon word

Klik eers op die knoppie "Hallo".

Ons het 'n fout opgespoor, so dit sal nie die oproepstapel opduik nie, en word dus nie in die konsole gemonitor nie. Aangesien ons egter aan stuur Sentry rapporteer 'n fout met die hand, ons sal 'n boodskap daaroor in jou rekening sien.

Notas:

Ons kan naspeur watter reël (24) die fout bevat
Daarbenewens vertoon die broodkrummelroete die blaaieraksies wat tot die fout gelei het.

Hoe onopgevang foute vertoon word

Klik op die knoppie "Fout".

Die fout borrel die oproepstapel op en dus word 'n foutboodskap op die konsole vertoon. Hierna monitor Sentry outomaties die fout, sonder enige bykomende aksies.

Notas:

Ons kan sien in watter reël (30) die gogga verlore is
Daar is geen broodkrummelroete nie (ek verstaan nie mooi hoekom nie)

Hoe om projeksekuriteit te verseker

Jy het dalk opgemerk hoe ons beheer watter bladsye foute aan ons projek kan rapporteer Sentry; met hulp dsn rekords. Die probleem is dat die insette gesien kan word deur enigiemand wat die bronkode van jou bladsy sien.

Om dit te vermy, moet ons die aantal domeine beperk wat foutverslae by ons projek kan indien. In hierdie voorbeeld het ons gebruik localhost (plaaslike gasheer). Hierdie opsie word in die instellingsoortjie gekonfigureer Sentry-projek, Sentry-projekinstelling.

Vrystellings

As jy dink oor hoe om te gebruik Sentry in verskillende variasies van ons toepassing, dan benodig ons 'n soort meganisme wat foute met 'n weergawenommer sal merk.

Ons wil immers nie hê dat die fout wat ons reggemaak het, weer opduik nie, en ons dink dat wat ons reggemaak het nie gewerk het nie. Dit kan ook wees dat die gebruiker 'n ouer weergawe van die toepassing in die kas geloods het.

Om die probleem op te los, moet jy die identifiseerder invoer vrylating (weergawes) by opstart Sentry.

vanielje/indeks.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

Hierna sal alle nuwe foute as gemerk word vrystelling (0.1.0), dit wil sê, hulle sal gekoppel wees aan die korrekte weergawe van die kode.

Notas:

Ons het 'n eenvoudige manier uitgevind om vrystellings te gebruik
Sentry laat jou toe om meer te gebruik ingewikkeld hul die gebruik van, wat nou verwant is aan GitHub. Hierdie funksie maak dit moontlik om foute op te spoor voordat sekere bewerkings uitgevoer word.

NS Die tweede deel is langer, so dit sal in 'n aparte pos wees.

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

NS Ek het vergeet om aan te dui dat dit 'n vertaling van die berig is https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Bron: will.com

Monitering van foute met Sentry in Front-End-toepassings Geskryf in JavaScript: Deel 1

Voeg 'n opmerking Kanselleer antwoord