🥇ניטור שגיאות באמצעות Sentry ביישומי קצה הכתובים ב-JavaScript: חלק 1

שירות Sentry מאפשר לך לעקוב מרחוק אחר באגים ביישומים חזיתיים שנכתבו ב JavaScript.

מנסה לתקן בעיות ביישומי קצה על JavaScript יכול להיות מסובך מכיוון שהם מקורם בדפדפן של המשתמש, שלעתים קרובות אין לך גישה אליו. למרות זאת, Sentry מאפשר לנטר מרחוק באגים.

כאן אתה יכול להוריד את הפתרונות הנדונים במאמר זה.

מה שצריך

אם אתה רוצה להשתמש בדוגמאות אלה, תצטרך:

Node.js: כלי פיתוח עשיר בתכונות שאינו חלק מהאפליקציה. הורדנו את גרסת ה-LTS העדכנית ביותר (8.12.0)
Sentry: או חשבון בשירות Sentry (תוכל להקליט עד 10 אלף באגים לחודש בחינם) או Sentry מקומי מותקן - https://github.com/getsentry/onpremise

התקנה בשרת שלך

כדי להתקין Sentry On-Premise בשרת שלך אתה יכול ללכת ב-2 דרכים

בנה סל"ד והתקן אותם - https://habr.com/ru/post/500632/

השתמש במתקין הרשמי:

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

שימוש רגיל

כדי להתחיל, הוסף אחד חדש מאתר השירות Sentry-פרויקט עבור היישום. לאחר בחירת השפה הרצויה, תקבל את התיעוד המתאים. במקרה שלנו בחרנו JavaScript.

הדוגמה הראשונה היא סטנדרטית JavaScript. יש כאן שני כפתורים: "שלום" (שלום ו "שְׁגִיאָה" (שְׁגִיאָה).

לאחר שתלחץ על הכפתור "שלום", המסך יאתחל והחסימה לנסות יזהה ויתפוס את הבאג. לאחר שהבאג "נתפס", דוח השגיאה נשלח ידנית לשירות Sentry.

כפתור "שגיאה" מאפשר לך לזהות באג בקלות.

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://[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>

הערות:

Sentry מותקן מ-CDN ונחשף כמשתנה גלובלי
קצת קודם לכן השקנו את Sentry ב-JavaScript שלנו

כדי לבדוק דוגמה זו, אנו יכולים להשתמש בפלטפורמת שרת אינטרנט סטטית Node.js: שרת http. עבור אל התיקיה שבה הקובץ מאוחסן index.html, והזן (אפשרות עם משבית מטמון) את השורה הבאה כדי לפתוח את הכתובת בדפדפן http://localhost:8080.

כיצד מוצגים באגים שנתפסו

תחילה לחץ על הכפתור "שלום".

תפסנו באג, אז הוא לא יקפוץ את ערימת השיחות, ולכן אינו מנוטר בקונסולה. עם זאת, מאז אנחנו שולחים ל Sentry דווח על באג באופן ידני, נראה הודעה לגביו בחשבונך.

הערות:

אנו יכולים לאתר איזו שורה (24) מכילה את הבאג
בנוסף, שביל פירורי הלחם מציג את פעולות הדפדפן שהובילו לשגיאה.

כיצד מוצגים באגים שלא נתפסו

לחץ על הכפתור "שְׁגִיאָה".

הבאג מבעבע בערימת השיחות וכך מוצגת הודעת שגיאה בקונסולה. לאחר מכן, Sentry עוקב אחר הבאג באופן אוטומטי, ללא פעולות נוספות.

הערות:

אנו יכולים לראות באיזו שורה (30) הבאג אבד
אין שביל פירורי לחם (אני לא כל כך מבין למה)

כיצד להבטיח את אבטחת הפרויקט

אולי שמתם לב לאופן שבו אנו שולטים באילו דפים יכולים לדווח על שגיאות לפרויקט שלנו Sentry; עם עזרה dsn רשומות. הבעיה היא שכל מי שצופה בקוד המקור של הדף שלך יכול לראות את הקלט.

כדי להימנע מכך, עלינו להגביל את מספר הדומיינים שיכולים לשלוח דוחות שגיאה לפרויקט שלנו. בדוגמה זו השתמשנו localhost (מארח מקומי). אפשרות זו מוגדרת בלשונית ההגדרות Sentry-פּרוֹיֶקט, הגדרת פרויקט Sentry.

משחרר

אם אתה חושב על איך להשתמש Sentry בווריאציות שונות של האפליקציה שלנו, אז אנחנו צריכים סוג של מנגנון שיסמן שגיאות עם מספר גרסה.

אחרי הכל, אנחנו לא רוצים שהבאג שתיקנו יצוץ שוב, ואנחנו חושבים שמה שתיקנו לא עבד. ייתכן גם שהמשתמש השיק גרסה ישנה יותר, שמורה במטמון של האפליקציה.

כדי לפתור את הבעיה, עליך להזין את המזהה שחרור (גרסאות) בעת ההפעלה Sentry.

vanilla/index.html

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

לאחר מכן, כל השגיאות החדשות יסומנו כ גרסה (0.1.0), כלומר, הם יהיו קשורים לגרסה הנכונה של הקוד.

הערות:

גילינו דרך פשוטה להשתמש במהדורות
Sentry מאפשר לך להשתמש ביותר מורכב שלהם использование, אשר קשורה קשר הדוק ל GitHub. פונקציה זו מאפשרת לעקוב אחר באגים לפני ביצוע פעולות מסוימות.

נ.ב החלק השני ארוך יותר, אז זה יהיה בפוסט נפרד.

נ.ב. טלגרם צ'אט Sentry https://t.me/sentry_ru

נ.ב שכחתי לציין שזה תרגום של הפוסט https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

מקור: www.habr.com

ניטור שגיאות עם Sentry ביישומי Front-End שנכתבו ב-JavaScript: חלק 1

הוספת תגובה ביטול תגובה