การจัดการข้อผิดพลาดทั่วทั้งแอป

การจัดการข้อผิดพลาดจากส่วนกลาง

catchError ในอินเตอร์เซปเตอร์

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

การตรวจสอบ HttpErrorResponse

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

เปลี่ยนเส้นทางเมื่อเกิด 401

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

การแสดงการแจ้งเตือน

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

การส่งข้อผิดพลาดซ้ำกับการกลืนข้อผิดพลาด

การปรับข้อผิดพลาดให้เป็นมาตรฐาน

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

การแยกข้อผิดพลาดฝั่งไคลเอ็นต์กับฝั่งเซิร์ฟเวอร์

หลีกเลี่ยงการจัดการซ้ำ

การบันทึกไปยังบริการตรวจสอบระบบ

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

การจัดลำดับอินเตอร์เซปเตอร์ข้อผิดพลาด

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุป: การจัดการข้อผิดพลาดจากส่วนกลาง