Handling Errors Gracefully in Angular Applications

{
  "title": "Handling Errors Gracefully in Angular Applications",
  "description": "Learn strategies to handle and display errors in a user-friendly manner within your Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-global-error-handler",
      "description": "Implement a global error handler by extending Angular's ErrorHandler class to manage uncaught exceptions across the application.",
      "severity": "error",
      "pattern": "class CustomErrorHandler extends ErrorHandler { handleError(error: any): void { /* custom error handling logic */ } }",
      "fix": "Ensure a global error handler is implemented by extending Angular's ErrorHandler class and overriding the handleError method."
    },
    {
      "id": "angular-http-error-interceptor",
      "description": "Use an HttpInterceptor to catch and handle HTTP errors globally, providing consistent error management for all HTTP requests.",
      "severity": "error",
      "pattern": "@Injectable() class HttpErrorInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(req).pipe(catchError((error: HttpErrorResponse) => { /* error handling logic */ return throwError(error); })); } }",
      "fix": "Implement an HttpInterceptor to globally handle HTTP errors by intercepting requests and responses, and applying appropriate error handling logic."
    },
    {
      "id": "angular-rxjs-catcherror",
      "description": "Utilize RxJS's catchError operator to handle errors in observable streams, ensuring graceful degradation of functionality.",
      "severity": "error",
      "pattern": "observable$.pipe(catchError(error => { /* error handling logic */ return throwError(error); }))",
      "fix": "Apply the catchError operator in your observable streams to manage errors effectively and maintain application stability."
    },
    {
      "id": "angular-user-friendly-error-messages",
      "description": "Provide user-friendly error messages that inform users of issues without exposing technical details.",
      "severity": "warning",
      "pattern": "this.snackBar.open('An error occurred', 'Dismiss', { duration: 5000 })",
      "fix": "Ensure error messages displayed to users are clear, concise, and free from technical jargon to enhance user experience."
    },
    {
      "id": "angular-error-logging-service",
      "description": "Implement a centralized error logging service to capture and log errors for monitoring and debugging purposes.",
      "severity": "warning",
      "pattern": "@Injectable() class ErrorLoggingService { logError(error: any): void { /* logging logic */ } }",
      "fix": "Create a dedicated error logging service to collect and store error information, facilitating easier debugging and maintenance."
    }
  ]
}