الهدف
بعد هالدرس تقدر تضيف Sentry للتطبيق في 10 دقائق، تشوف stack trace كامل لأي error — مع اسم الملف والـ line number والـ user اللي واجهه — وتضبط alerts تنبهك على طول لما تصير مشكلة.
ليش هذا الحين؟
Analytics تقول لك وين يوقفون المستخدمين. Sentry يقول لك ليش. ترى المستخدمين في الغالب ما يبلّغون عن bugs — يطلعون وبس. بدون error tracking، أنت أعمى: تطبيق فيه errors ما تعرف عنها، ومستخدمين يطلعون ما تدري ليش. مع Sentry، تعرف عن كل error بعد ثوان — قبل ما يصير user complaint.
الفكرة
ليش Sentry أفضل من console.error؟
console.error → يظهر في الـ logs المحلية بس، ويختفي في production
Sentry → يجمع الـ errors من كل المستخدمين، يرتبها، ويرسل alerts
المعلومات اللي يجيبها Sentry لكل error:
- Stack trace كامل (ملف، سطر، function)
- Browser / OS / device
- الـ user اللي واجه الخطأ (لو سويت
identify) - الـ URL والـ route
- آخر user actions قبل الخطأ ("breadcrumbs")
- عدد المرات اللي صار فيها نفس الخطأ
Client vs Server errors:
Sentry يمسك errors في ثلاثة أماكن:
- Client: React component crashes, unhandled promise rejections
- Server: API route errors, server component errors
- Edge: Middleware errors