صيد الأخطاء أثناء الطيران: مراقبة وتسجيل تطبيقات JavaScript

لماذا يصرخ كود JavaScript الخاص بك طلباً للمساعدة وأنت لا تسمع؟

تخيل: لقد أطلقت تطبيق ويب رائع. المستخدمون يدخلون، ينقرون، كل شيء يعمل... أو لا؟ في الواقع، في مكان ما في أعماق المتصفح، يحدث خطأ بهدوء: Uncaught TypeError: Cannot read property 'length' of undefined. المستخدم ببساطة يغلق علامة التبويب ويذهب إلى المنافسين، وأنت حتى لا تعلم أن هناك خطأ ما.

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

هذه المقالة هي دليلك السريع للبقاء في بيئة الإنتاج. هيا بنا!

Console.log - صديقك أم عدوك؟

لنبدأ من الأساسيات. console.log() هو أول ما يتبادر إلى ذهن كل مطور. وهذا طبيعي. لكن إذا كنت تستخدمه في كود الإنتاج، توقف. لماذا؟ لأن:

\n
• إنه يلوث وحدة تحكم المستخدم (نعم، بعضهم يفتحونها).
\n
• يؤثر على الأداء عند كثرة الاستدعاءات.
\n
• لا يعطي معلومات منظمة.
\n

من الأفضل استخدام مستويات التسجيل. إليك مثال على النهج الصحيح:

// سيء\nconsole.log('User clicked button');\n\n// جيد\nconsole.info('User interaction', { \n    action: 'click', \n    element: '#submit-btn', \n    timestamp: Date.now() \n});\n\n// للأخطاء\nconsole.error('API request failed', { \n    status: 500, \n    endpoint: '/api/users' \n});\n\n// للتحذيرات\nconsole.warn('Deprecated method used', { \n    method: 'fetchData_v1' \n});

لكن حتى هذا مجرد غيض من فيض. المراقبة الحقيقية لتطبيقات JavaScript تبدأ حيث تكون وحدة التحكم غير متاحة.

التسجيل المنظم: JSON لمساعدتك

عندما ينمو تطبيقك، تتحول الرسائل العشوائية في وحدة التحكم إلى فوضى. الحل هو التسجيل المنظم. أرسل البيانات بتنسيق JSON ليتم تحليلها ومعالجتها.

إليك كيفية إنشاء مسجل بسيط:

class Logger {\n    constructor(context = {}) {\n        this.context = context;\n    }\n\n    log(level, message, data = {}) {\n        const logEntry = {\n            timestamp: new Date().toISOString(),\n            level,\n            message,\n            ...this.context,\n            ...data\n        };\n\n        // في الإنتاج نرسل إلى الخادم\n        if (process.env.NODE_ENV === 'production') {\n            this.sendToServer(logEntry);\n        } else {\n            // في التطوير نعرض في وحدة التحكم\n            console[level](`[${level.toUpperCase()}] ${message}`, data);\n        }\n    }\n\n    sendToServer(entry) {\n        // نستخدم sendBeacon للإرسال المضمون\n        navigator.sendBeacon('/api/logs', JSON.stringify(entry));\n    }\n\n    info(message, data) { this.log('info', message, data); }\n    warn(message, data) { this.log('warn', message, data); }\n    error(message, data) { this.log('error', message, data); }\n}\n\n// الاستخدام\nconst logger = new Logger({ appVersion: '1.2.3', userId: getUserId() });\nlogger.info('Page loaded', { url: window.location.href, loadTime: performance.now() });

لاحظ استخدام navigator.sendBeacon() - هذه أفضل طريقة لإرسال البيانات قبل مغادرة المستخدم للصفحة. طلبات fetch العادية قد يتم إلغاؤها.

اصطياد الأخطاء: try/catch هي البداية فقط

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

معالج الأخطاء العام

// اعتراض الأخطاء غير المعالجة\nw