تتبّع أخطاء Angular يكتشف العلل قبل مستخدميك
حزمة Angular SDK مع مزوّد ErrorHandler وتجهيز للموجّه ومعترض HTTP — إضافة إلى إعادة تشغيل الجلسات وstack traces مقروءة عبر source maps على المنصة نفسها. استدعِ init قبل الإقلاع، وسجّل المزوّدات، وسيصل كل خطأ غير معالَج إلى لوحتك ومعه الرحلة التي سبقته.
لماذا تحتاج تطبيقات Angular إلى تتبّع أخطاء حقيقي
تتعطّل تطبيقات Angular بصمت في الإنتاج. استثناء غير معالَج في مكوّن يكسر سير عمل لمستخدم في منطقة زمنية أخرى، وتختفي رسالة الـ console مع إغلاق تبويبه، وأول إشارة تصلك هي تذكرة دعم بلا خطوات لإعادة الإنتاج. وتزيد حزم الإنتاج المصغّرة الأمر سوءًا — فـ stack trace يشير إلى السطر الأول من main.7d4f9b.js لا يخبرك شيئًا عن المكوّن أو المسار أو نداء HTTP الذي فشل فعلًا.
تسدّ حزمة AllStak لـ Angular هذه الفجوة. استدعِ init في main.ts قبل الإقلاع، ثم سجّل مزوّدات الـ standalone: يمرّر provideAllStakErrorHandler كل خطأ غير معالَج، ويتتبّع provideAllStakRouterInstrumentation التنقّل، ويسجّل allStakHttpInterceptor كل طلب صادر في span من نوع http.client. ارفع source maps فتغدو الـ traces المصغّرة شيفرة مقروءة؛ وتُريك إعادة تشغيل الجلسات ما فعله المستخدم فعلًا قبل العطل. وكل ذلك يصل إلى المنصة نفسها التي تستضيف أخطاء الخلفية والسجلات والتوافر لديك — فاتورة واحدة ولوحة واحدة.
مراقبة شاملة لـ Angular
من استثناء غير معالَج في مكوّن إلى نداء HTTP خلفه، يغطّي AllStak تطبيق Angular لديك عبر كل طبقة.
تتبّع الأخطاء
يمرّر provideAllStakErrorHandler — أو createErrorHandler لمعالج ErrorHandler مخصّص — كل خطأ غير معالَج تلقائيًا، ويبلّغ AllStak.captureException عن الأخطاء التي تعالجها بنفسك.
إعادة تشغيل الجلسات
شاهد ما فعله المستخدم فعلًا قبل الخطأ — النقرات والتنقّل ولحظة العطل — مع إخفاء للخصوصية يضمن ألّا تغادر المدخلات الحساسة المتصفّح.
خرائط المصدر
ارفع source maps فتُحَلّ stack traces الإنتاج المصغّرة إلى شيفرة TypeScript الأصلية — الملف والسطر والدالة — فيبدأ الإصلاح فورًا.
تجهيز الموجّه
سجّل provideAllStakRouterInstrumentation وستُتتبَّع التنقّلات تلقائيًا — فيحمل كل خطأ المسار الذي كان المستخدم عليه لحظة وقوعه.
معترض HTTP
يسجّل allStakHttpInterceptor كل طلب صادر ويفتح span من نوع http.client — استخدم المعترض الوظيفي مع withInterceptors، أو نسخة الصنف مع HTTP_INTERCEPTORS.
التنبيهات والحوادث
تلقَّ إشعارًا لحظة ظهور خطأ جديد أو ارتفاع خطأ قديم — قبل وصول تذاكر الدعم لا بعدها.
أضف AllStak خلال دقائق
ثبّت من npm واستدعِ init في main.ts قبل إقلاع التطبيق — ثم سجّل مزوّدات الـ standalone للأخطاء والتوجيه وHTTP.
npm install @allstak/angular
import { init } from '@allstak/angular';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
init({ apiKey: 'your-ingest-key', environment: 'production' });
bootstrapApplication(AppComponent, appConfig);في appConfig، سجّل provideAllStak وprovideAllStakErrorHandler وprovideAllStakRouterInstrumentation وprovideHttpClient(withInterceptors([allStakHttpInterceptor])) — ويعرض دليل الإعداد مصفوفة المزوّدات كاملة. دليل الإعداد الكامل ومرجع الـ SDK.
ما تراه في AllStak
تفاصيل الخطأ مع سياق كامل
افتح أي مشكلة لترى stack trace مقروءًا (عبر source maps)، والـ breadcrumbs التي سبقته، والإصدار الذي وصل فيه — إعادة إنتاج دون تخمين.
إعادة تشغيل جلسة العطل
شاهد جلسة المستخدم حول لحظة الخطأ — ما الذي نقر عليه، وأين تنقّل، وكيف بدت الصفحة عندما تعطّلت.
المسارات ونداءات HTTP معًا
يضع تجهيز الموجّه ومعترض HTTP كل تنقّل وكل طلب صادر إلى جانب الأخطاء المرتبطة بها — فلا يبقى نداء API الفاشل لغزًا أبدًا.
لوحة تحكّم موحّدة آنية
أخطاء الواجهة الأمامية إلى جانب أخطاء الخلفية والسجلات وتوافر الـ APIs خلفها — لوحة واحدة، بالعربية أو الإنجليزية، للفريق بأكمله.
لماذا تختار الفرق AllStak لـ Angular
- الواجهة الأمامية والخلفية على منصة واحدة — الأخطاء والسجلات والتوافر والبنية التحتية بفاتورة واحدة.
- دوال مزوّدات standalone تناسب Angular الحديث — سجّلها مرة واحدة في appConfig وستكون مغطًّى.
- تحوّل إعادة تشغيل الجلسات وsource maps بلاغات الأخطاء الغامضة إلى أدلة مرئية ومقروءة.
- يلتقط تجهيز الموجّه ومعترض HTTP الرحلة كاملة — دون تجهيز لكل نداء.
- تسعير واضح بالريال السعودي مع باقة مجانية حقيقية — ابدأ دون بطاقة ائتمان.
- تبقى بياناتك داخل السعودية، مع لوحة تحكّم بالعربية والإنجليزية للفريق بأكمله.
أسئلة شائعة حول مراقبة Angular
كيف أضيف تتبّع الأخطاء إلى تطبيق Angular؟
ثبّت @allstak/angular من npm، واستدعِ init بمفتاح API لمشروعك في main.ts قبل bootstrapApplication، وسجّل provideAllStakErrorHandler ضمن المزوّدات. تُمرَّر الأخطاء غير المعالَجة تلقائيًا من تلك اللحظة؛ ويغطّي دليل الإعداد مزوّدَي الموجّه وHTTP أيضًا.
هل يعمل AllStak مع مكوّنات Angular المستقلة (standalone)؟
نعم. توفّر الحزمة دوال مزوّدات مبنية لواجهة standalone — provideAllStak وprovideAllStakErrorHandler وprovideAllStakRouterInstrumentation والمعترض الوظيفي allStakHttpInterceptor مع withInterceptors. ويمكن للتطبيقات المبنية على الوحدات استخدام الصنف AllStakHttpInterceptor مع HTTP_INTERCEPTORS وcreateErrorHandler مع رمز ErrorHandler بدلًا من ذلك.
هل AllStak مجاني لـ Angular؟
نعم. يوفّر AllStak باقة مجانية يمكنك البدء بها دون بطاقة ائتمان، مع تسعير واضح بالريال السعودي مع نموّك. وحزمة Angular SDK نفسها مجانية الاستخدام.
هل AllStak بديل لـ Sentry في Angular؟
نعم. تحصل على تتبّع أخطاء Angular مع source maps وإعادة تشغيل الجلسات كما في Sentry، إضافة إلى السجلات والتوافر ومراقبة البنية التحتية لخلفيتك على المنصة نفسها — بفاتورة واحدة بالريال السعودي وبيانات مخزّنة داخل السعودية بدلًا من كومة أدوات منفصلة.
هل ستُبطئ حزمة الـ SDK تطبيق Angular لديّ؟
صُمّمت الحزمة لمتصفّحات الإنتاج: فخطّافات الالتقاط خفيفة وتُرسَل القياسات في الخلفية، فلا تتأثر تجربة مستخدميك بشكل ملموس. وأنت تختار بدقة ما يُجهَّز — فكل مزوّد (معالج الأخطاء، الموجّه، معترض HTTP) يُسجَّل على حدة.
استكشف المزيد
ابدأ تتبّع أخطاء Angular اليوم
استدعِ init، وسجّل المزوّدات، وانشر — وشاهد الأخطاء والمسارات والجلسات تصل إلى لوحة واحدة. ابدأ مجانًا — دون الحاجة إلى بطاقة ائتمان.