الانهيار الصامت

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

في تطوير الواجهة الأمامية، تكون حالات الفشل صامتة. تخيل مستخدمًا على موقع التجارة الإلكترونية الخاص بك. لقد أمضوا 30 دقيقة في التصفح. لديهم عناصر بقيمة 500 دولار في سلة التسوق الخاصة بهم. ينقرون على “المتابعة إلى الخروج”. يواجه محرك JavaScript TypeError: لا يمكن قراءة خصائص غير محددة (قراءة 'السعر'). ماذا يحدث؟ الشاشة لا تنفجر. المتصفح لا يغلق. واجهة المستخدم تتجمد حتما. يدور الزر الدوار إلى الأبد. ينتظر المستخدم 10 ثواني. ينقرون مرة أخرى. لا شئ. يتنهدون، ويغلقون علامة التبويب، ويذهبون إلى أمازون. أنت (المطور) ليس لديك ** أي معرفة ** بحدوث ذلك. تظهر سجلات الخادم الخاص بك “200 موافق” لتحميل الصفحة. أنت تفترض أن برنامجك مثالي. في الواقع، أنت تخسر آلاف الدولارات في الساعة.

وهذا ما يسمى الطيران الأعمى. مراقبة الأخطاء (Sentry، Datadog، LogRocket) هي الحل. يقوم بتثبيت “مسجل الصندوق الأسود” (SDK) في متصفح كل مستخدم. عند حدوث عطل، فإنه يلتقط الحالة ويرسلها إلى السحابة وينبهك.

لماذا يناقش Maison Code هذا الأمر

في Maison Code، نؤمن بأن الملاحظة هي الخطوة الأولى في الهندسة. غالبًا ما نرث قواعد التعليمات البرمجية من العملاء الذين يقولون “انخفض معدل التحويل لدينا بنسبة 20% ولا نعرف السبب”. نقوم بتثبيت Sentry، وفي غضون 10 دقائق، نرى الآلاف من CheckoutError: undefified is not object قادمة من مستخدمي Safari. وكان الخطأ دائما هناك. كان العميل أصمًا لذلك. نحن ننفذ المراقبة ليس فقط لاكتشاف الأخطاء، ولكن أيضًا لقياس الجودة. نحن نساعد مديري التكنولوجيا على الانتقال من “أعتقد أن الموقع مستقر” إلى “لدينا معدل جلسات خالية من الأعطال بنسبة 99.98%.”

الأداة: الحارس

Sentry هو معيار الصناعة بلا منازع لمراقبة أداء التطبيقات (APM) وتتبع الأخطاء. وهو يدعم كل اللغات، ولكن تكامله مع JavaScript/TypeScript قوي بشكل خاص. فهو لا يلتقط رسالة الخطأ فحسب؛ فهو يلتقط السياق.

التنفيذ: دمج Sentry في Next.js

كان إعداد Sentry أمرًا صعبًا. الآن أصبح الأمر آليًا.

المعالج: قم بتشغيل npx @sentry/wizard@latest -i nextjs. هذا السيناريو سحري.
- يقوم بإنشاء مشروع Sentry عبر API.
- يقوم بتحديث “next.config.js” لتحميل خرائط المصدر.
- يقوم بإنشاء “sentry.client.config.ts” (المتصفح)، و”sentry.server.config.ts” (العقدة)، و”sentry.edge.config.ts” (Edge Runtime).
الاستخدام (SDK): يرتبط Sentry تلقائيًا بالأحداث العالمية “window.onerror” و”window.onunhandledrejection”. لا تحتاج عمومًا إلى تغليف التعليمات البرمجية في “try/catch” يدويًا.

الالتقاط اليدوي: في بعض الأحيان، تريد اكتشاف خطأ ما (حتى لا يتعطل التطبيق) ولكنك تستمر في الإبلاغ عنه.

استيراد * كـ Sentry من "@sentry/nextjs";

دالة غير متزامنة عملية الدفع () {
  حاول {
    انتظر stripe.confirmPayment();
  } التقاط (خطأ) {
    // قم بتسجيل الدخول إلى Sentry، ولكن قم بإظهار واجهة مستخدم لطيفة للمستخدم
    Sentry.captureException(error);
    toast.error("فشل الدفع، يرجى المحاولة مرة أخرى.");
  }
}

خرائط المصدر: حجر رشيد

جافا سكريبت الإنتاج ** مصغر ** و ** قبيح **. فهو يزيل المسافات البيضاء، ويعيد تسمية المتغيرات إلى a، وb، وc، ويتخلص من التعليمات البرمجية الميتة. يعد هذا أمرًا رائعًا بالنسبة للأداء، ولكنه سيئ جدًا بالنسبة لتصحيح الأخطاء.

الرعب:

خطأ: غير محدد ليس دالة
  في (app-123.js:1:432)
  في ب (app-123.js:1:890)

هذا لا يخبرك بشيء.

الحل: خرائط المصدر (.js.map). تقوم هذه الملفات بتعيين التعليمات البرمجية المصغرة مرة أخرى إلى مصدر TypeScript الأصلي. عندما يتلقى Sentry تقريرًا عن الأعطال، فإنه يبحث عن خريطة المصدر المطابقة. إنه يعمل بشكل فعال على “إلغاء تصغير” تتبع المكدس.

النتيجة:

خطأ في النوع: عنوان المستخدم غير محدد
  في موقع accountShipping (src/utils/shipping.ts:45:12)
  في CheckoutForm (src/components/Checkout.tsx:102:4)

الآن أنت تعرف بالضبط أن السطر 45 من “shipping.ts” هو الجاني.

السياق هو الملك

معرفة مكان التعطل هي الخطوة الأولى. معرفة من الذي تعطل هو الخطوة 2. يتيح لك Sentry إثراء حدث الخطأ بالعلامات المخصصة وبيانات المستخدم.

// في AuthProvider أو Layout
استخدام التأثير (() => {
  إذا (المستخدم) {
    سينتري.سيتيوسير({
      المعرف: معرف المستخدم،
      البريد الإلكتروني: user.email، // كن حذرًا بشأن معلومات تحديد الهوية الشخصية (GDPR)
      الجزء: user.isVIP؟ "VIP": "قياسي"
    });
  }
}, [المستخدم]);

في Sentry Dashboard، يمكنك الآن تشغيل استعلامات قوية:

“أرني جميع الأعطال التي تؤثر على مستخدمي VIP.”
“أظهر لي جميع الأعطال على iOS 17.”

تنبيه التعب: الصبي الذي بكى الذئب

الخطر الأكبر في مراقبة الأخطاء هو الضوضاء. إذا كانت قناة Slack الخاصة بك #alerts-prod تصدر صوتًا كل 5 دقائق مع رسالة “فشل تحميل الصورة”، فسيقوم المطورون بكتم صوت القناة. ثم، عندما تنخفض قاعدة البيانات، لا أحد يلاحظ. هذا هو ** تنبيه التعب **.

استراتيجية الإشارة إلى الضوضاء:

تجاهل الأخطاء الحميدة: قم بتكوين “ignoreErrors” في “sentry.client.config.ts” (على سبيل المثال، “ResizeObserver Loop Limit”).
الحماية من المسامير: لا تنبه إلى خطأ واحد. تنبيه إذا: “أكثر من 50 مستخدمًا واجهوا هذا الخطأ خلال 5 دقائق.”

إعادة الجلسة: الخيار النووي

في بعض الأحيان، لا يكون تتبع المكدس كافيًا. “يقول المستخدم إنه نقر على الزر ولكن لم يحدث شيء. لم يتم تسجيل أي خطأ.” إعادة تشغيل الجلسة (LogRocket / Sentry Replay) تسجل نسخة تشبه الفيديو لجلسة المستخدم. يسجل طفرات DOM وحركات الماوس والنقرات. يمكنك مشاهدة شاشة المستخدم حرفيًا. “آه، لقد نقروا ثلاث مرات على زر “الرجوع” أثناء فتح النموذج.”

الخصوصية (GDPR/CCPA): هذا أمر حساس. يجب عليك إخفاء حقول الإدخال (كلمات المرور، بطاقات الائتمان). يقوم Sentry بذلك بشكل افتراضي (maskAllText: true)، ويحول النص إلى ****. تحقق من هذا التكوين يدويًا.

7. تتبع الأداء (معاملات الحراسة)

الأخطاء هي حوادث. المعاملات بطء. يتتبع Sentry دورة حياة الطلب بأكملها.

ينقر المستخدم على “شراء”.
المتصفح (جلب /api/buy) -> 100 مللي ثانية.
خادم Next.js (أوامر db.insert) -> 500 مللي ثانية.
واجهة برمجة تطبيقات الشريط (الشحن) -> 2000 مللي ثانية. المجموع: 2.6 ثانية. إذا قمت بمراقبة الأخطاء فقط، فإنك تعتقد أن كل شيء على ما يرام. لكن 2.6 ثانية غير مقبول. يعرض لك Sentry “الشلال” للطلب، مع تسليط الضوء على أن Stripe هو عنق الزجاجة. الإصلاح: لا تنتظر الشريط. استخدم قائمة الانتظار.

8. أداة تعليقات المستخدم

عند حدوث عطل، يمكن لـ Sentry أن ينبثق تلقائيًا مربع حوار. “يبدو أننا تحطمنا. أخبرنا بما حدث.” أنواع المستخدمين: “لقد قمت بالنقر فوق “تطبيق القسيمة” مرتين.” هذا هو الذهب. فهو يربط “Stack Trace” (تقني) مع “نية المستخدم” (الأعمال). قم بتمكين هذا للمستخدمين الذين تم التحقق منهم لبناء علاقة.

10. صحة الإصدار: ثقة النشر

قمت بنشر الإصدار 2.0. هل الأخطاء ترتفع أم تنخفض؟ يتتبع Sentry Release Health “الجلسات الخالية من الأعطال”. الإصدار 1.0: خالي من الأعطال بنسبة 99.9%. الإصدار 2.0: 98.0% خالي من الأعطال. يؤدي هذا إلى تشغيل تنبيه تلقائي: “تم اكتشاف الانحدار في الإصدار 2.0”. يمكنك إجراء التراجع الفوري قبل أن يشتكي العملاء. هذه هي حلقة الملاحظات التي تسمح بـ “النشر يوم الجمعة”.

11. أمان خريطة المصدر

يؤدي تحميل خرائط المصدر إلى تسهيل عملية تصحيح الأخطاء. ولكنه يعرض أيضًا كود المصدر الخاص بك للجمهور (إذا قمت بتحميله على CDN). يمكن للمنافسين سرقة الخوارزميات الخاصة بك. الإصلاح: تحميل خرائط المصدر إلى عناصر الحراسة (خاص). لا تقم بتحميل ملفات .map إلى شبكة CDN العامة الخاصة بك. قم بتكوين Sentry لجلب الخرائط داخليًا. الآن تحصل على آثار مكدس كاملة، لكن العالم يرى تعليمات برمجية مبهمة.

12. الاستنتاج

لا يمكنك إصلاح ما لا يمكنك رؤيته. تعمل المراقبة على تحويل الأخطاء من “قصص الأشباح” إلى “تذاكر قابلة للتنفيذ”. يسمح لك بالاتصال بالعميل والقول: “لقد لاحظنا حدوث خطأ أثناء الدفع. لقد قمنا بإصلاحه. إليك قسيمة بقيمة 10%.” هكذا تحول الفشل إلى ولاء.

هل سئمت من التصحيح الأعمى؟

إذا كان فريقك يقضي ساعات في مطاردة الأخطاء غير القابلة للتكرار، فيمكن أن يساعدك Maison Code. نقوم بتنفيذ مكدسات قابلة للملاحظة تمنحك رؤية بالأشعة السينية في بيئة الإنتاج الخاصة بك.

اتصل بنا لوقف الطيران الأعمى.

هل تطير أعمى؟

نقوم بدمج مجموعات مراقبة Sentry/Datadog مع خرائط المصدر وإثراء السياق. قم بتعيين مهندسينا المعماريين.