رصد أخطاء الإنتاج
جعل a.js:1:4523 مفيدًا من جديد
جعل أعطال الإنتاج قابلة للتشخيص باستخدام خرائط المصدر المرفوعة ونفق Sentry من المصدر نفسه وأخطاء سياقية وترشيح وإعادة تشغيل الجلسات.
قراءة في 4 دقائقبقلم Abdullah Raheel
طريقتان قد تخفيان العطل
كانت لدينا نقطتا عمى منفصلتان. أشارت الأخطاء المستلمة إلى شفرة مصغرة مثل a.js:1:4523 لغياب خرائط المصدر. ولم تصل أحداث أخرى أصلًا لأن الطلبات المباشرة إلى sentry.io قد تُحجب.
كان هذان فشلين مستقلين. تحدد خرائط المصدر إمكان إرجاع أثر المكدس المستلم إلى رموزه الأصلية، بينما يحدد النقل وصول الحدث إلى Sentry من الأساس. وإصلاح أحدهما فقط يبقي الحادثة غير مقروءة أو غير مرئية.
ارفع خرائط المصدر من دون نشرها
غلف @sentry/nextjs البناء باستخدام withSentryConfig. وفرت CI المتغيرات SENTRY_AUTH_TOKEN وSENTRY_ORG وSENTRY_PROJECT. رفع ملحق البناء الخرائط، ووسع رفع ملفات العميل لتحسين الآثار، واستخدم deleteSourcemapsAfterUpload كي لا تُخدم الخرائط من المخرجات العامة.
export default withSentryConfig(nextConfig, {
org: process.env.SENTRY_ORG,
project: process.env.SENTRY_PROJECT,
authToken: process.env.SENTRY_AUTH_TOKEN,
sourcemaps: {
disable: process.env.NODE_ENV === 'development',
deleteSourcemapsAfterUpload: true
},
widenClientFileUpload: true,
disableLogger: true,
tunnelRoute: '/t'
})أبقى ذلك إرجاع الرموز ضمن بناء النشر المعتاد. لم يعد هناك أمر رفع منفصل عبر sentry-cli يجب على مهندس تذكره بعد الإصدار.
استخدم مصدر التطبيق لنقل الأحداث
كانت نقطة النهاية الأولى من المصدر نفسه /monitoring، لكن أدوات الحجب ظلت تطابقها. قصرت المسار إلى /t. ثم استهدفت أحداث المتصفح مصدر التطبيق، ومررها خادم Next.js إلى Sentry.
سجل الطرح الأصلي التقاطًا كاملًا بعد ذلك التغيير. كانت تلك نتيجة من فترة الطرح، لا وعدًا بأن كل أداة حجب أو شبكة ستوصل كل حدث دائمًا.
احتاج عدم توافق صامت في الأدوات إلى إصلاح مستقل
نقل Next.js 15 إعداد المتصفح إلى instrumentation-client.ts. ومع تفعيل Turbopack، بقي المشروع على Sentry v9 وتوقف رفع خرائط المصدر من دون فشل ظاهر للتطبيق. أعادت الترقية إلى Sentry v10 مسار الرفع المتوافق.
هيأ التطبيق Sentry أيضًا عبر بيئات المتصفح والخادم والحافة، وأضاف حدود أخطاء على مستوى المسار وعامة. كان إرجاع الرموز شأنًا للبناء؛ أما التقاط أعطال React والطلبات وبيئة التشغيل فكان شأنًا منفصلًا للتطبيق.
وضوح الخطأ لا يجعله مفيدًا تلقائيًا
أضاف خطاف beforeSend مسار الصفحة ومعلومات المتصفح وأبعاد نافذة العرض ووسم إصدار التطبيق. وصنف أعطال API وانتهاء المهلة والشبكة، ورشّح قيود اتصال Twilio المعروفة قبل الإدخال.
أخذ Session Replay عينات من 5% من الجلسات العادية وكل جلسات الخطأ في الإنتاج. وعمل التتبع أولًا بنسبة 100% في staging و10% في الإنتاج، ثم عُطل عندما استهلك حصة كبيرة. أخذ العينات إعداد تشغيلي، لا قيمة تُنسخ بلا تفكير.
- ارفع خرائط المصدر الخاصة أثناء البناء.
- أرسل أحداث المتصفح عبر نفق من مصدر التطبيق نفسه.
- افصل قيود المنتج المتوقعة عن أعطال التطبيق.
- أرفق سياق المسار وإعادة الجلسة كي يصاحب رقم السطر المقروء سياق تدفق المستخدم.

