مراقبة وتسجيل تطبيقات TypeScript: دليل شامل

مقدمة: لماذا يحتاج مشروع TypeScript الخاص بك إلى المراقبة والتسجيل

تخيل الموقف: لقد أطلقت خدمة رائعة باستخدام TypeScript. كل شيء يعمل بشكل مثالي... حتى أول مكالمة من مستخدم: "الموقع بطيء!" أو "البيانات لا تُحفظ!". تذهب إلى الكود، لكنك لا تستطيع إعادة إنتاج الخلل. هل هذا مألوف؟

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

في هذه المقالة، سنشرح كيفية إعداد المراقبة والتسجيل بشكل صحيح في تطبيقات TypeScript (سواء على الخادم باستخدام Node.js أو على الواجهة الأمامية)، وما هي الأدوات التي يجب اختيارها وكيف لا تغرق في بحر من السجلات. هيا بنا!

لماذا هذا ضروري؟ ثلاثة أسباب رئيسية

1. تصحيح الأخطاء في الوقت الفعلي

يسمح لك التسجيل بالنظر داخل التطبيق أثناء العمل. بدلاً من التخمين، ترى قيماً محددة للمتغيرات، ومكدس الاستدعاءات، وتسلسل الأحداث.

2. الأداء

تساعد مراقبة تطبيقات TypeScript في تتبع الوظائف "الثقيلة" التي تبطئ واجهة المستخدم أو تستهلك الذاكرة. سترى أين يقضي التطبيق معظم الوقت.

3. الأمان والتدقيق

السجلات هي أول شيء ستظهره عند التحقيق في حادث. من الذي طلب أي بيانات ومتى؟ السجل الصحيح سينقذ سمعتك.

أدوات المراقبة والتسجيل في TypeScript

دعنا نلقي نظرة على ما يُستخدم فعلياً في بيئة الإنتاج. يعتمد اختيار الأداة على ما تكتبه: خادم باستخدام Node.js أو واجهة أمامية في المتصفح.

للخادم (Node.js + TypeScript)

\n
• Winston — أشهر مسجل. مرن، مع العديد من وسائل النقل (ملف، وحدة تحكم، خادم بعيد).
\n
• Pino — فائق السرعة، إذا كان الأداء حاسماً.
\n
• Morgan — لطلبات HTTP (يعمل بشكل ممتاز مع Express).
\n

للوصيفة الأمامية (TypeScript في المتصفح)

\n
• Sentry — ملك مراقبة الأخطاء. يلتقط الاستثناءات، والأعطال، والطلبات البطيئة.
\n
• LogRocket — يسجل جلسات المستخدم + السجلات.
\n
• Datadog / New Relic — للحلول المؤسسية.
\n

إعداد التسجيل في TypeScript: دليل خطوة بخطوة

لنبدأ بالخادم الكلاسيكي. سنقوم بتثبيت Winston — فهو يتوافق بشكل مثالي مع TypeScript.

الخطوة 1: التثبيت والتكوين الأساسي

npm install winston\nnpm install @types/winston --save-dev

لنقم بإنشاء ملف logger.ts:

import winston from 'winston';\n\nconst logger = winston.createLogger({\n    level: 'info',\n    format: winston.format.combine(\n        winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),\n        winston.format.errors({ stack: true }),\n        winston.format.json()\n    ),\n    defaultMeta: { service: 'user-service' },\n    transports: [\n        new winston.transports.File({ filename: 'error.log', level: 'error' }),\n        new winston.transports.File({ filename: 'combined.log' }),\n    ],\n});\n\nif (process.env.NODE_ENV !== 'production') {\n    logger.add(new winston.transports.Console({\n        format: winston.format.simple(),\n    }));\n}\n\nexport default logger;

الآن في أي مكان في كود TypeScript الخاص بك يمكنك كتابة:

import logger from './logger';\n\nlogger.info('تم تسجيل المستخدم بنجاح', { userId: 123 });\nlogger.error('خطأ في الاتصال بقاعدة البيانات', { error: err.message });

لاحظ: نحن نستخدم winston.format.errors({ stack: true }). هذا يعني أنه عند تسجيل خطأ، سيتم حفظ مكدس الاستدعاءات — وهو كنز لتصحيح الأخطاء.

الخطوة 2: إضافة