مراقبة تطبيقات TypeScript: المقاييس والتنبيهات

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

مراقبة تطبيقات TypeScript: من المقاييس إلى التنبيهات الذكية

في التطوير الحديث، كتابة الكود ليست سوى نصف المهمة. من المهم للغاية فهم كيفية تصرف التطبيق في بيئة الإنتاج (production). بالنسبة لمشاريع TypeScript، سواء كان خادمًا على Node.js أو عميلاً على React، تصبح المراقبة الاستباقية مطلبًا إلزاميًا. في هذه المقالة، سنستعرض التقنيات المتقدمة لجمع المقاييس، وإعداد التنبيهات، وبناء نظام مراقبة (observability) يسمح لك بالنوم براحة.

1. المقاييس الرئيسية لتطبيقات TypeScript

قبل إعداد التنبيهات، يجب تحديد ما نقيسه بالضبط. سنقسم المقاييس إلى ثلاث مجموعات: البنية التحتية، والأعمال، والمستخدم.

مقاييس البنية التحتية (منهجية RED):

Rate — عدد الطلبات في الثانية (RPS).
Errors — نسبة الأخطاء (5xx، 4xx، الرفض غير المعالج).
Duration — وقت الاستجابة (p50، p95، p99).

مقاييس الأعمال:

عدد المعاملات الناجحة.
وقت تنفيذ العمليات الحرجة (مثل إنشاء تقرير).
المستخدمون النشطون (DAU/MAU).

مقاييس المستخدم (لتطبيقات العميل):

LCP (Largest Contentful Paint) — سرعة تحميل المحتوى الرئيسي.
FID (First Input Delay) — تأخير أول تفاعل.
CLS (Cumulative Layout Shift) — استقرار التخطيط البصري.

لجمع هذه المقاييس في TypeScript، سنستخدم مكتبة prom-client (لـ Node.js) و @opentelemetry/instrumentation-http.

2. جمع المقاييس باستخدام Prometheus و OpenTelemetry

لنلقِ نظرة على مثال لإعداد المقاييس لتطبيق Express على TypeScript. سنقوم بتثبيت الحزم اللازمة:

npm install prom-client @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/instrumentation-express

سننشئ ملف metrics.ts لتسجيل المقاييس:

import client from 'prom-client';

const collectDefaultMetrics = client.collectDefaultMetrics;collectDefaultMetrics({ timeout: 5000 });

export const httpRequestDuration = new client.Histogram({    name: 'http_request_duration_seconds',    help: 'Duration of HTTP requests in seconds',    labelNames: ['method', 'route', 'status_code'],    buckets: [0.01, 0.05, 0.1, 0.5, 1, 2, 5],});

export const errorCounter = new client.Counter({    name: 'http_errors_total',    help: 'Total number of HTTP errors',    labelNames: ['method', 'route', 'status_code'],});

الآن سنقوم بدمج المقاييس في middleware:

import { Request, Response, NextFunction } from 'express';

export function metricsMiddleware(req: Request, res: Response, next: NextFunction) {    const end = httpRequestDuration.startTimer();    res.on('finish', () => {        end({ method: req.method, route: req.route?.path || 'unknown', status_code: res.statusCode.toString() });        if (res.statusCode >= 500) {            errorCounter.inc({ method: req.method, route: req.route?.path || 'unknown', status_code: res.statusCode.toString() });        }    });    next();}

سنضيف نقطة نهاية لجمع مقاييس Prometheus:

import { Router } from 'express';import client from 'prom-client';

const router = Router();router.get('/metrics', async (req, res) => {    res.set('Content-Type', client.register.contentType);    res.end(await client.register.metrics());});export default router;

لتطبيقات العميل (React)، نستخدم @opentelemetry/instrumentation-document-load لجمع Web Vitals تلقائيًا.