Frontendda Error Tracking va Monitoring nima?

Frontend monitoring - client-side’da sodir bo’lgan error’larni avtomatik tarzda yig’ish, kuzatish va tahlil qilish jarayoni. Oddiy qilib aytganda, dastur ishlash jarayonida client-side'da paydo bo’lgan JavaScript error, network error, yoki UI crash’larni check qilib bizga ma’lumot yuborilishi.

Veb-ilovani ikki qisimga ajratish mumkin: client-side (Foydalanuvchiga ko’rinadigan joy, UI) va server-side (Server).

Nima uchun frontend monitoring kerak o’zi?

Tasavvur qiling, siz katta savdo markazi ochgansiz. Ichkarida mahsulotlar sifatli, narxlar ham yaxshi. Lekin tashqarida kiraverishda eshik nosoz bo‘lsa yoki lift ishlamasa, odamlar ichkariga kira olmaydi yoki noqulaylik sezadi. Natijada, ichkarida qancha yaxshi sharoit bo’lishini foydasi yo‘q — klientlar bo’lmaydi.

Frontend monitoring ham xuddi shunday. Savdo markazini ichki qismi (Backend) juda mukammal ishlashi mumkin, lekin frontenddagi muammolar (eshik yoki lift ishlamasligi) foydalanuvchilar sizning mahsulotingizdan foydalanish imkoniyatini cheklab qo’yadi. Shu sababli frontend monitoring foydalanuvchiga birinchi navbatda qulaylik yaratish va muammolarni aniqlash uchun zarur.

Xozirgi kunda Frontend Single Page Application asosiga qurilmoqda. Bu esa an’anaviy usullardan farq qiladi.

SPA nima? Bunda application bitta sahifa orqali barcha kontentni yuklaydi va foydalanuvchi har safar interation bo’lganida shu sahifani qayta paint qiladi. React, Angular yoki Vue kabi framework’lar serverdan ma’lumotlarni olib, bitta sahifada ko‘rsatadi.

SPA’ni monitoring qilish boshqa application’larga qaraganda farq qiladi. SPA’da quyidagilarni monitoring qilish zarur:

Api requestlar
Rendering sikllar
dynamic elementlarni load bo’lishi

Monitoring usullari

Synthetic Monitoring - bu foydalanuvchi xatti-harakatlarini sun’iy ravishda simulatsiya qilish. Ya’ni, foydalanuvchi qilishi mumkin bo‘lgan yo‘llarni oldindan avtomatlashtirib tekshirish. Bu usul foydalanuvchilar xabar bermasidan muammolarni oldindan aniqlash imkonini beradi.

Real User Monitoring (RUM) - bu haqiqiy foydalanuvchilarni kuzatish jarayoni.

Qo’llash usullari

Tayyor xizmatlardan foydalanish

Eng ommaboplari:

Misol, Sentry’ni React’da ishlatish:

npm install @sentry/react @sentry/tracing

// src/main.tsx yoki _app.tsx
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
 
Sentry.init({
  dsn: "YOUR_SENTRY_DSN_KEY", // Sentry’dan olingan DSN
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // 0-1 oralig‘ida
});

Endi barcha error lar avtomatik ravishda Sentry dashboard’ga yuboriladi.

O‘zingiz yozishingiz mumkin

Agar 3rd-party xizmat ishlatishni xohlamasangiz:

window.onerror = function (msg, url, line, col, error) {
  fetch("/api/log-error", {
    method: "POST",
    body: JSON.stringify({
      message: msg,
      url,
      line,
      col,
      stack: error?.stack,
    }),
    headers: { "Content-Type": "application/json" },
  });
};
 
window.onunhandledrejection = function (event) {
  fetch("/api/log-error", {
    method: "POST",
    body: JSON.stringify({
      message: event.reason,
    }),
    headers: { "Content-Type": "application/json" },
  });
};

Manbaa:

Telegram kanalimga obuna bo'ling: @usmanov_dev