🥇مراقبة الأخطاء باستخدام Sentry في تطبيقات الواجهة الأمامية المكتوبة بلغة JavaScript: الجزء الأول

خدمة خفير يسمح لك بمراقبة الأخطاء عن بعد في تطبيقات الواجهة الأمامية المكتوبة جافا سكريبت.

محاولة إصلاح المشكلات في تطبيقات الواجهة الأمامية جافا سكريبت يمكن أن تكون صعبة لأنها تنشأ في متصفح المستخدم، والذي غالبًا لا يمكنك الوصول إليه. لكن، خفير يجعل من الممكن مراقبة الأخطاء عن بعد.

ومن يمكنك تنزيل الحلول التي تمت مناقشتها في هذه المقالة.

ما هو المطلوب

إذا كنت تريد استخدام هذه الأمثلة، فسوف تحتاج إلى:

نود.جي إس: أداة تطوير غنية بالميزات وليست جزءًا من التطبيق. قمنا بتنزيل أحدث إصدار من LTS (8.12.0)
خفير: إما حساب في خدمة Sentry (يمكنك تسجيل ما يصل إلى 10 آلاف خطأ شهريًا مجانًا) أو Sentry محلي مثبت - https://github.com/getsentry/onpremise

التثبيت على الخادم الخاص بك

لتثبيت Sentry On-Premise على الخادم الخاص بك، يمكنك اتباع طريقتين

بناء دورة في الدقيقة وتثبيتها - https://habr.com/ru/post/500632/

استخدم المثبت الرسمي:

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

الاستخدام القياسي

للبدء، قم بإضافة واحدة جديدة من موقع الخدمة خفير-مشروع للتطبيق. بعد اختيار اللغة المطلوبة، سوف تتلقى الوثائق المناسبة. في حالتنا اخترنا جافا سكريبت.

المثال الأول هو المعيار جافا سكريبت. يوجد زرين هنا: "مرحبا" (مرحبا و "خطأ" (خطأ).

بعد النقر على الزر "مرحبا"، سيتم إعادة تشغيل الشاشة والكتلة محاولة سوف يكتشف الخطأ ويلتقطه. بعد "اكتشاف الخطأ"، يتم إرسال تقرير الخطأ يدويًا إلى الخدمة خفير.

يتيح لك زر "الخطأ" اكتشاف الخطأ بسهولة.

الفانيليا/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 الخاص بنا

لاختبار هذا المثال، يمكننا استخدام منصة خادم ويب ثابتة نود.جي إس: خادم المتشعب. انتقل إلى المجلد حيث تم تخزين الملف index.html و، وأدخل (الخيار مع تعطيل التخزين المؤقت) السطر التالي لفتح العنوان في المتصفح http://localhost:8080.

كيف يتم عرض الأخطاء التي تم اكتشافها

أولا انقر فوق الزر "مرحبا".

لقد اكتشفنا خطأً، لذلك لن ينبثق مكدس الاستدعاءات، وبالتالي لا تتم مراقبته في وحدة التحكم. ومع ذلك، منذ أن نرسل إلى خفير قم بالإبلاغ عن خطأ يدويًا، وسنرى رسالة عنه في حسابك.

ملاحظات:

يمكننا تتبع السطر (24) الذي يحتوي على الخطأ
بالإضافة إلى ذلك، يعرض مسار التنقل إجراءات المتصفح التي أدت إلى الخطأ.

كيف يتم عرض الأخطاء التي لم يتم اكتشافها

النقر فوق الزر "خطأ".

يؤدي الخطأ إلى ظهور مكدس الاستدعاءات وبالتالي يتم عرض رسالة خطأ على وحدة التحكم. بعد ذلك، يقوم Sentry بمراقبة الخطأ تلقائيًا، دون أي إجراءات إضافية.

ملاحظات:

يمكننا أن نرى في أي سطر (30) تم فقدان الخطأ
لا يوجد مسار تنقل (لا أفهم السبب تمامًا)

كيفية ضمان أمن المشروع

ربما لاحظت الطريقة التي نتحكم بها في الصفحات التي يمكنها الإبلاغ عن الأخطاء لمشروعنا خفير; مع مساعدة دسن السجلات. تكمن المشكلة في أنه يمكن لأي شخص يشاهد الكود المصدري لصفحتك أن يرى المدخلات.

لتجنب ذلك، نحتاج إلى تحديد عدد النطاقات التي يمكنها إرسال تقارير الأخطاء إلى مشروعنا. في هذا المثال استخدمنا مؤسسة الكوثر (المضيف المحلي). تم تكوين هذا الخيار في علامة تبويب الإعدادات خفير-مشروع، إعداد مشروع الحراسة.

إطلاق

إذا فكرت في كيفية الاستخدام خفير في أشكال مختلفة من تطبيقنا، نحتاج إلى نوع من الآلية التي تحدد الأخطاء برقم الإصدار.

ففي نهاية المطاف، لا نريد أن يظهر الخطأ الذي أصلحناه مرة أخرى، ونعتقد أن ما أصلحناه لم ينجح. من الممكن أيضًا أن يكون المستخدم قد قام بتشغيل إصدار أقدم ومخزن مؤقتًا من التطبيق.

لحل المشكلة، تحتاج إلى إدخال المعرف إطلاق (الإصدارات) عند بدء التشغيل خفير.

الفانيليا/index.html

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

بعد ذلك، سيتم وضع علامة على جميع الأخطاء الجديدة على أنها الإصدار (0.1.0)أي أنه سيتم ربطهم بالإصدار الصحيح من الكود.

ملاحظات:

لقد اكتشفنا طريقة بسيطة لاستخدام الإصدارات
Sentry يسمح لك باستخدام المزيد مجمع هم استخدم، والتي ترتبط ارتباطًا وثيقًا GitHub جيثب:. تتيح هذه الوظيفة إمكانية تتبع الأخطاء قبل إجراء عمليات معينة.

ملاحظة: الجزء الثاني أطول، لذلك سيكون في مقال منفصل.

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

ملحوظة: لقد نسيت أن أشير إلى أن هذه ترجمة لهذا المنشور https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

المصدر: www.habr.com

مراقبة الخطأ باستخدام تطبيق Sentry في تطبيقات JavaScript الأمامية: الجزء الأول

إضافة تعليق إلغاء الرد