معالجة أخطاء الشبكة والاتصال مركزياً عبر Interceptors و CatchError

Global Error HandlingServer ResilienceInterceptor Error ManagementcatchError

جدول مرجعي سريع

استراتيجية المعالجة (`Strategy`)	مكان التنفيذ الهندسي	الجدوى المعمارية في التطبيقات الكبيرة
المعالجة المحلية (`Local Handling`)	داخل كل مكون برمجى عند عمل `subscribe`	تؤدي لتكرار الكود وصعوبة الصيانة الشاملة
المعالجة المركزية (`Global Interceptor`)	عبر اعتراض الاستجابة وتطبيق `catchError` مركزياً	توفر حلاً موحداً، نظيفاً، وقابلاً للتوسع لإدارة الأخطاء

الشرح

معالجة الأخطاء بشكل فردي داخل كل مكون يعتبر حلاً غير فعال ومكرراً. يتيح لك دمج مشغلات الـ Interceptors مع تقنيات catchError معالجة كافة أخطاء الشبكة (مثل انتهاء الصلاحية، انقطاع الاتصال، أو أخطاء الصلاحيات 401 و 500) مركزياً على مستوى التطبيق بالكامل، وإظهار تنبيهات موحدة للمستخدم.

تفصيل فلسفة وعمل المعالجة المركزية للأخطاء

الالتقاط المبكر للاستثناءات:

من خلال تمرير تدفق الاستجابة عبر مشغل catchError في الاعتراض، يتم التعامل مع أكواد الحالة HTTP الخاطئة فور صدورها من الخادم.

تحسين تجربة المستخدم:

توفر المعالجة المركزية مرونة في توجيه المستخدم أو إظهار رسائل تنبيه موحدة دون تكرار منطق معالجة الأخطاء في كل صفحة.

⚠️ تحذير

تذكر أن الاعتراض المركزي للأخطاء لا يغني تماماً عن معالجة بعض الحالات الخاصة داخل المكونات! استخدم الاعتراض المركزي لإدارة الأخطاء العامة (مثل 401 و 500 وخطأ الشبكة)، واترك المعالجة المحلية للرسائل الخاصة بنماذج الإدخال أو التحقق من البيانات.

بناء اعتراض وظيفي مركزي لمعالجة الأخطاء

ملف اعتراض الأخطاء المركزي (error-handling.interceptor.ts)

typescript

1	import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
2	import { catchError } from 'rxjs/operators';
3	import { throwError } from 'rxjs';
4
5	export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
6	return next(req).pipe(
7	catchError((error: HttpErrorResponse) => {
8	let errorMsg = 'حدث خطأ غير معروف في النظام.';
9
10	if (error.status === 401) {
11	errorMsg = 'انتهت صلاحية الجلسة، يرجى تسجيل الدخول مرة أخرى.';
12	// هنا يمكن توجيه المستخدم لصفحة تسجيل الدخول تلقائياً
13	} else if (error.status === 500) {
14	errorMsg = 'خطأ داخلي في الخادم الرئيسي، يرجى المحاولة لاحقاً.';
15	} else if (error.status === 0) {
16	errorMsg = 'تعذر الاتصال بالخادم، تحقق من اتصال شبكة الإنترنت لديك.';
17	}
18
19	console.error('[Global Error Interceptor intercepted error:]', errorMsg, error);
20
21	// إعادة تمرير الخطأ لمعالجته محلياً إذا لزم الأمر
22	return throwError(() => new Error(errorMsg));
23	})
24	);
25	};

نصائح احترافية

—استخدم الاعتراض المركزي لإدارة حالات الأخطاء العامة مثل انتهاء الجلسة أو تعطل الخادم!
—هذا يضمن توحيد السلوك العام للتطبيق ويخفف من كتابة الأكواد المكررة داخل المكونات البرمجية.

الدرس السابق

اعتراض الطلبات والاستجابات باستخدام الاعتراضات الوظيفية

الدرس التالي

تتبع تقدم عمليات الرفع والتحميل

استراتيجية المعالجة (`Strategy`)

مكان التنفيذ الهندسي

الجدوى المعمارية في التطبيقات الكبيرة

المعالجة المحلية (`Local Handling`)

داخل كل مكون برمجى عند عمل `subscribe`

تؤدي لتكرار الكود وصعوبة الصيانة الشاملة

المعالجة المركزية (`Global Interceptor`)

عبر اعتراض الاستجابة وتطبيق `catchError` مركزياً

توفر حلاً موحداً، نظيفاً، وقابلاً للتوسع لإدارة الأخطاء

تفصيل فلسفة وعمل المعالجة المركزية للأخطاء

الالتقاط المبكر للاستثناءات:

تحسين تجربة المستخدم:

⚠️ تحذير

بناء اعتراض وظيفي مركزي لمعالجة الأخطاء

ملف اعتراض الأخطاء المركزي (error-handling.interceptor.ts)

typescript

1	import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
2	import { catchError } from 'rxjs/operators';
3	import { throwError } from 'rxjs';
4
5	export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
6	return next(req).pipe(
7	catchError((error: HttpErrorResponse) => {
8	let errorMsg = 'حدث خطأ غير معروف في النظام.';
9
10	if (error.status === 401) {
11	errorMsg = 'انتهت صلاحية الجلسة، يرجى تسجيل الدخول مرة أخرى.';
12	// هنا يمكن توجيه المستخدم لصفحة تسجيل الدخول تلقائياً
13	} else if (error.status === 500) {
14	errorMsg = 'خطأ داخلي في الخادم الرئيسي، يرجى المحاولة لاحقاً.';
15	} else if (error.status === 0) {
16	errorMsg = 'تعذر الاتصال بالخادم، تحقق من اتصال شبكة الإنترنت لديك.';
17	}
18
19	console.error('[Global Error Interceptor intercepted error:]', errorMsg, error);
20
21	// إعادة تمرير الخطأ لمعالجته محلياً إذا لزم الأمر
22	return throwError(() => new Error(errorMsg));
23	})
24	);
25	};