การจัดการ Error ใน Angular

เดียวพามาจัดการ error ที่อาจเกิดขึ้นมีหลายรูปแบบ และบางครั้งเราอาจต้องการให้มีการจัดการข้อผิดพลาดที่ครอบคลุมทั่วทั้งแอป ไม่ใช่แค่เฉพาะบาง component หรือ service เท่านั้น Angular เองมีวิธีที่จะช่วยให้เราทำสิ่งนี้ได้ โดยการใช้คลาส ErrorHandler

งั้นเรามาสร้าง class CustomErrorHandler ของเราเองขึ้นมาใหม่พร้อมกับ implements ErrorHandler เพื่อจัดการข้อผิดพลาดทั้งหมดที่เกิดขึ้นภายในแอป เช่น ตรวจจับข้อผิดพลาดและแสดงข้อความในคอนโซลหรือจะทำเป็น popup เพื่อแจ้งเตือนผู้ใช้ก็ได้ โดยจะทำได้ด้วยการสร้างคลาส CustomErrorHandler

// global-error-handler.ts
import { ErrorHandler, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CustomErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) {}

  handleError(error: Error | any): void {
    const errorMessage = error.message ? error.message : error.toString();
    
    if (errorMessage.includes('chunk')) {
      console.log('Chunk Error:', errorMessage);
    } else {
      console.log('General Error:', errorMessage);
    }

    throw error;  // ให้ Angular ทำการโยนข้อผิดพลาดเพื่อจัดการต่อเอง
  }
}

ในโค้ดด้านบน เราได้ใช้ console.log() เพื่อแสดงข้อความแตกต่างกันไปตามประเภทของข้อผิดพลาดที่พบ และใช้ throw error เพื่อโยนข้อผิดพลาดกลับไปให้ระบบของ Angular จัดการต่อ

การใช้งาน

หลังจากที่สร้าง CustomErrorHandler เสร็จแล้ว เราจะต้องทำการการเพิ่มใน AppModule เพื่อให้ Angular รู้ว่าเราต้องการให้ใช้คลาสนี้เป็นตัวจัดการข้อผิดพลาดหลัก

// app.module.ts
import { ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from '../shared/error-handler/global-error-handler';

@NgModule({
  ...,
  providers: [
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler,
    },
  ],
  ...
})
export class AppModule {}

การทดสอบ

ใน AppComponent เราจะเพิ่มปุ่มที่มีฟังก์ชัน triggerError() ซึ่งจะทำการโยนข้อผิดพลาดเมื่อกดปุ่ม

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>ทดสอบการจัดการข้อผิดพลาด</h1>
    <div>
      <button (click)="triggerError()">Trigger Error</button>
    </div>
  `,
})
export class AppComponent {
  triggerError() {
    throw new Error('Simulated error in AppComponent');
  }
}

เมื่อกดปุ่ม “Trigger Error” จะเกิดข้อผิดพลาดขึ้นและ CustomErrorHandler จะเข้ามาจัดการโดยการตรวจสอบและแสดงข้อความในคอนโซล โดยเราจะเห็นข้อความ General Error: Simulated error in AppComponent ในคอนโซล

สรุป

การใช้ CustomErrorHandler ใน Angular การจัดการข้อผิดพลาดทั่วทั้งแอป ซึ่งสามารถเพิ่มความยืดหยุ่นในการจัดการข้อผิดพลาดต่างๆ ได้เป็นอย่างดี และทำให้โค้ดสะอาดเรียบร้อยมากยิ่งขึ้น