🥇 خطاهای مانیتورینگ با استفاده از Sentry در برنامه های جلویی نوشته شده در جاوا اسکریپت: قسمت 1

سرویس نگهبانی به شما این امکان را می دهد که از راه دور اشکالات برنامه های کاربردی جلویی را که در آن نوشته شده اند نظارت کنید جاوا اسکریپت.

تلاش برای رفع مشکلات در برنامه های جلویی در جاوا اسکریپت می توانند مشکل ساز باشند زیرا از مرورگر کاربر منشا می گیرند که اغلب به آن دسترسی ندارید. با این حال، نگهبانی نظارت از راه دور اشکالات را ممکن می سازد.

اینجا می توانید راه حل های مورد بحث در این مقاله را دانلود کنید.

آنچه لازم است

اگر می خواهید از این مثال ها استفاده کنید، به موارد زیر نیاز دارید:

Node.js و: یک ابزار توسعه غنی از ویژگی که بخشی از برنامه نیست. ما آخرین نسخه LTS (8.12.0) را دانلود کردیم
نگهبانی: یا یک حساب کاربری در سرویس 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

استفاده استاندارد

برای شروع، یک مورد جدید از وب سایت سرویس اضافه کنید نگهبانی-پروژه برای برنامه پس از انتخاب زبان مورد نظر، مستندات مربوطه را دریافت خواهید کرد. در مورد ما ما انتخاب کردیم جاوا اسکریپت.

مثال اول استاندارد است جاوا اسکریپت. در اینجا دو دکمه وجود دارد: "سلام" (سلام و "خطا" (خطا).

بعد از اینکه روی دکمه کلیک کردید "سلام"، صفحه راه اندازی مجدد می شود و مسدود می شود امتحان باگ را شناسایی و تشخیص خواهد داد. پس از "گرفتن اشکال"، گزارش خطا به صورت دستی به سرویس ارسال می شود نگهبانی.

دکمه "خطا" به شما امکان می دهد به راحتی یک اشکال را تشخیص دهید.

وانیل/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 را در جاوا اسکریپت خود راه اندازی کردیم

برای آزمایش این مثال، می‌توانیم از یک پلتفرم وب سرور استاتیک استفاده کنیم Node.js و: سرور http. به پوشه ای که فایل در آن ذخیره شده است بروید index.html بهو خط زیر را برای باز کردن آدرس در مرورگر (گزینه با غیرفعال کردن کش) وارد کنید http://localhost:8080.

چگونه اشکالات گرفتار نمایش داده می شود

ابتدا روی دکمه کلیک کنید "سلام".

ما یک اشکال را گرفتار کردیم، بنابراین پشته تماس ظاهر نمی شود، و بنابراین در کنسول نظارت نمی شود. با این حال، از آنجایی که ما به نگهبانی یک اشکال را به صورت دستی گزارش کنید، پیامی در مورد آن در حساب شما خواهیم دید.

یادداشت ها:

ما می توانیم ردیابی کنیم که کدام خط (24) حاوی اشکال است
علاوه بر این، دنباله breadcrumb اقدامات مرورگر را نشان می دهد که منجر به خطا شده است.

چگونه باگ های کشف نشده نمایش داده می شوند

با زدن دکمه "خطا".

این اشکال پشته تماس را حباب می کند و بنابراین یک پیام خطا روی کنسول نمایش داده می شود. پس از این، Sentry به طور خودکار باگ را کنترل می کند، بدون هیچ گونه اقدام اضافی.

یادداشت ها:

ما می توانیم ببینیم که در کدام خط (30) باگ گم شده است
هیچ دنباله ای برای پودر سوخاری وجود ندارد (من دقیقاً نمی دانم چرا)

چگونه امنیت پروژه را تضمین کنیم

ممکن است متوجه شده باشید که ما چگونه صفحاتی را که می توانند خطاها را به پروژه ما گزارش کنند کنترل می کنیم نگهبانی; با کمک dsn سوابق. مشکل این است که ورودی توسط هر کسی که کد منبع صفحه شما را مشاهده می کند قابل مشاهده است.

برای جلوگیری از این امر، باید تعداد دامنه هایی را که می توانند گزارش خطا را به پروژه ما ارسال کنند، محدود کنیم. در این مثال استفاده کردیم localhost را (میزبان محلی). این گزینه در تب تنظیمات پیکربندی شده است نگهبانی-پروژه، تنظیم پروژه Sentry.

منتشر شده

اگر به نحوه استفاده فکر می کنید نگهبانی در انواع مختلف برنامه ما، به نوعی مکانیسم نیاز داریم که خطاها را با شماره نسخه مشخص کند.

از این گذشته، ما نمی‌خواهیم باگی که رفع کردیم دوباره ظاهر شود و فکر می‌کنیم آنچه که رفع کردیم جواب نداد. همچنین ممکن است کاربر یک نسخه قدیمی تر و حافظه پنهان برنامه را راه اندازی کرده باشد.

برای حل مشکل، باید شناسه را وارد کنید رها کردن (نسخه ها) در هنگام راه اندازی نگهبانی.

وانیل/index.html

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

پس از این، تمام خطاهای جدید به عنوان علامت گذاری می شوند انتشار (0.1.0)، یعنی به نسخه صحیح کد متصل می شوند.

یادداشت ها:

ما یک راه ساده برای استفاده از نسخه ها پیدا کرده ایم
Sentry به شما امکان استفاده بیشتر را می دهد پیچیده شان использование، که ارتباط نزدیکی با GitHub. این تابع امکان ردیابی اشکالات را قبل از انجام عملیات خاص فراهم می کند.

PS قسمت دوم طولانی تر است، بنابراین در یک پست جداگانه قرار خواهد گرفت.

PS چت تلگرام سنتری https://t.me/sentry_ru

PS فراموش کردم اشاره کنم که این ترجمه پست است https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

منبع: www.habr.com

خطاهای مانیتورینگ با Sentry در برنامه های Front-End نوشته شده در جاوا اسکریپت: قسمت 1

اضافه کردن نظر انصراف از پاسخ