🥇 Monitro gwallau gan ddefnyddio Sentry mewn cymwysiadau pen blaen sydd wedi'u hysgrifennu yn JavaScript: Rhan 1

Gwasanaeth Sentry yn eich galluogi i fonitro chwilod o bell mewn cymwysiadau pen blaen sydd wedi'u hysgrifennu ynddynt Javascript.

Ceisio trwsio problemau mewn cymwysiadau pen blaen ymlaen Javascript gallant fod yn anodd oherwydd eu bod yn tarddu o borwr y defnyddiwr, nad oes gennych fynediad ato yn aml. Fodd bynnag, Sentry yn ei gwneud hi'n bosibl monitro chwilod o bell.

Yma Gallwch chi lawrlwytho'r atebion a drafodir yn yr erthygl hon.

Beth sydd ei angen

Os ydych am ddefnyddio'r enghreifftiau hyn, bydd angen:

Node.js: Offeryn datblygu nodwedd-gyfoethog nad yw'n rhan o'r cais. Fe wnaethom lawrlwytho'r fersiwn LTS ddiweddaraf (8.12.0)
Sentry: Naill ai Cyfrif yn y gwasanaeth Sentry (gallwch recordio hyd at 10 mil o fygiau'r mis am ddim) neu Sentry lleol wedi'i osod - https://github.com/getsentry/onpremise

Gosod ar eich gweinydd

I osod Sentry On-Premise ar eich gweinydd gallwch fynd mewn 2 ffordd

Adeiladu rpm a'u gosod - https://habr.com/ru/post/500632/

Defnyddiwch y gosodwr swyddogol:

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

Defnydd Safonol

I ddechrau, ychwanegwch un newydd o wefan y gwasanaeth Sentry-prosiect ar gyfer y cais. Ar ôl dewis yr iaith a ddymunir, byddwch yn derbyn y ddogfennaeth gyfatebol. Yn ein hachos ni fe ddewison ni Javascript.

Mae'r enghraifft gyntaf yn safonol Javascript. Mae dau fotwm yma: "Helo" (Helo) a "Gwall" (Gwall).

Ar ôl i chi glicio ar y botwm "Helo", bydd y sgrin yn ailgychwyn a'r bloc ceisiwch yn canfod a dal y byg. Ar ôl i'r nam gael ei “ddal”, mae'r adroddiad gwall yn cael ei anfon â llaw i'r gwasanaeth Sentry.

Mae'r botwm "Gwall" yn caniatáu ichi ganfod nam yn hawdd.

fanila/mynegai.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>

Примечания:

Gosodir Sentry o CDN a'i amlygu fel newidyn byd-eang
Ychydig yn gynharach fe wnaethom lansio Sentry yn ein JavaScript

I brofi'r enghraifft hon, gallwn ddefnyddio llwyfan gweinydd gwe sefydlog Node.js: gweinydd http. Ewch i'r ffolder lle mae'r ffeil yn cael ei storio index.html, a nodwch (opsiwn gydag analluogi caching) y llinell ganlynol i agor y cyfeiriad yn y porwr http://localhost:8080.

Sut mae chwilod sydd wedi'u dal yn cael eu harddangos

Yn gyntaf cliciwch ar y botwm "Helo".

Rydym yn dal byg, felly ni fydd yn pop i fyny y pentwr galwadau, ac felly nid yw'n cael ei fonitro yn y consol. Fodd bynnag, ers i ni anfon at Sentry riportiwch nam â llaw, byddwn yn gweld neges amdano yn eich cyfrif.

Примечания:

Gallwn olrhain pa linell (24) sy'n cynnwys y byg
Yn ogystal, mae'r llwybr briwsion bara yn dangos gweithredoedd y porwr a arweiniodd at y gwall.

Sut mae bygiau heb eu dal yn cael eu harddangos

Cliciwch y botwm "Gwall".

Mae'r byg yn swigod i fyny'r pentwr galwadau ac felly mae neges gwall yn cael ei harddangos ar y consol. Ar ôl hyn, mae Sentry yn monitro'r nam yn awtomatig, heb unrhyw gamau gweithredu ychwanegol.

Примечания:

Gallwn weld ym mha linell (30) mae'r byg yn cael ei golli
Nid oes llwybr briwsion bara (dwi ddim yn deall pam yn iawn)

Sut i sicrhau diogelwch prosiect

Efallai eich bod wedi sylwi ar y ffordd yr ydym yn rheoli pa dudalennau all adrodd gwallau i'n prosiect Sentry; gyda chymorth dsn cofnodion. Y broblem yw y gall unrhyw un sy'n gweld cod ffynhonnell eich tudalen weld y mewnbwn.

Er mwyn osgoi hyn, mae angen i ni gyfyngu ar nifer y parthau a all gyflwyno adroddiadau gwallau i'n prosiect. Yn yr enghraifft hon rydym yn defnyddio localhost (gwesteiwr lleol). Mae'r opsiwn hwn wedi'i ffurfweddu yn y tab gosodiadau Sentry- prosiect, Gosodiad Prosiect Sentry.

Rhyddhau

Os ydych chi'n meddwl sut i ddefnyddio Sentry mewn gwahanol amrywiadau o'n cais, yna mae angen rhyw fath o fecanwaith a fydd yn nodi gwallau gyda rhif fersiwn.

Wedi'r cyfan, nid ydym am i'r byg y gwnaethom ei drwsio ymddangos eto, a chredwn na weithiodd yr hyn a drwsiwyd gennym. Mae'n bosibl hefyd bod y defnyddiwr wedi lansio fersiwn hŷn, wedi'i storio o'r rhaglen.

I ddatrys y broblem, mae angen i chi nodi'r dynodwr rhyddhau (fersiynau) wrth gychwyn Sentry.

fanila/mynegai.html

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

Ar ôl hyn, bydd pob gwall newydd yn cael ei farcio fel rhyddhau (0.1.0), hynny yw, byddant yn cael eu clymu i'r fersiwn cywir o'r cod.

Примечания:

Rydyn ni wedi darganfod ffordd syml o ddefnyddio datganiadau
Mae Sentry yn caniatáu ichi ddefnyddio mwy cymhleth eu y defnydd o, sy'n perthyn yn agos i GitHub. Mae'r swyddogaeth hon yn ei gwneud hi'n bosibl olrhain bygiau cyn cyflawni rhai gweithrediadau.

PS Mae'r ail ran yn hirach, felly bydd mewn post ar wahân.

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

ON Anghofiais nodi mai cyfieithiad o'r post yw hwn https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Ffynhonnell: hab.com

Monitro Gwallau gyda Sentry mewn Cymwysiadau Blaengar Ysgrifenedig yn JavaScript: Rhan 1

Ychwanegu sylw Diddymu ateb