Error Handling

Error Handling Overview

1. Global Error Handling

The application uses a global error handler to catch and process unexpected errors across the app. To enable the global error handler, uncomment the following line in app.config.ts:

// import { GlobalErrorHandler } from '../error/error.handler'; // Uncomment this line to enable the global error handler

Then, uncomment and configure the provider for the global error handler in the ApplicationConfig:

// { provide: ErrorHandler, useClass: GlobalErrorHandler }, // Uncomment this line to enable the global error handler

This ensures that any unhandled runtime errors are logged, processed, or displayed gracefully to the user.

2. User-Friendly Error Pages

The application handles client-side errors (e.g., 404 Not Found) by displaying user-friendly error pages. Ensure your routes include appropriate components for error pages, such as NotFoundPageComponent.

Example in app.routes.ts:

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'error', component: ErrorPageComponent },
  { path: '**', component: NotFoundPageComponent }, // Catch-all route for 404 errors
];

Notes

Test your application by simulating errors to validate the error-handling flow.

Example:

throw new Error('This is a test error!');

Ready to deploy? Refer to this guide for error-handling best practices in Angular.