Error handling in Angular

Dashrath Hapani
3w
524
0
0

Article

Error handling in Angular involves capturing and managing errors to ensure a smooth user experience and easier debugging. Angular provides several built-in tools and techniques for handling errors systematically.

1. Handling HTTP Errors

When making HTTP requests, you can handle errors using the HttpClient and the catchError operator from RxJS.

Example

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // Client-side error
      console.error('Client-side error:', error.error.message);
    } else {
      // Server-side error
      console.error(`Server-side error: ${error.status} - ${error.message}`);
    }
    return throwError(() => new Error('Something went wrong; please try again later.'));
  }
}

catchError: Intercepts errors and allows custom handling.
throwError: Re-throws the error after handling it for further processing.

2. Global Error Handling

Angular provides a way to handle application-wide errors using the ErrorHandler service.

Custom Global Error Handler.

Create a custom error handler.

import { ErrorHandler, Injectable, NgZone } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private ngZone: NgZone) {}

  handleError(error: any): void {
    // Log the error to the console or a logging service
    console.error('Global Error:', error);

    // Notify the user (e.g., using a toast or modal)
    this.ngZone.run(() => {
      alert('An unexpected error occurred.');
    });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './global-error-handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

The service will be used throughout the entire application to catch logs.

3. Error Interceptors

Use an HTTP interceptor to handle errors globally for all HTTP requests.

Example

Create an HTTP interceptor.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        // Handle different error types
        if (error.status === 404) {
          console.error('Not Found:', error.message);
        } else if (error.status === 500) {
          console.error('Server Error:', error.message);
        }

        // Optionally, rethrow the error
        return throwError(() => new Error('An error occurred. Please try again later.'));
      })
    );
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ErrorInterceptor } from './error-interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

4. Using Angular Guards for Route Error Handling

Angular guards can protect routes and handle access-related errors.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = false; // Replace with actual authentication logic
    if (!isAuthenticated) {
      alert('You are not authorized to access this page.');
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

5. Error Display in the UI

Display user-friendly error messages in the UI using Angular components.

Example

Create an error message component.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-error-message',
  template: `
    <div *ngIf="errorMessage" class="error">
      {{ errorMessage }}
    </div>
  `,
  styles: [
    `
      .error {
        color: red;
      }
    `,
  ],
})
export class ErrorMessageComponent {
  @Input() errorMessage: string | null = null;
}

Use the component.

<app-error-message [errorMessage]="error"></app-error-message>

6. RxJS Error Handling Strategies

Retry Failed Requests.

import { retry } from 'rxjs';

this.http.get(this.apiUrl).pipe(
  retry(3), // Retry up to 3 times
  catchError(this.handleError)
);

Fallback Data.

this.http.get(this.apiUrl).pipe(
  catchError(() => of([])) // Return fallback data on error
);

7. Logging Errors

Use external services like Sentry, LogRocket, or custom logging services to log errors.

Example

@Injectable({
  providedIn: 'root'
})
export class LoggingService {
  logError(message: string, stack: string) {
    // Send error logs to an external server
    console.log('Logging error:', message);
  }
}