Mastering Error Handling in Angular Applications
Written on
Chapter 1: Introduction to Error Management
In any system design, reliability stands as a key principle, and Angular applications are no different. Applications may encounter various errors, including logical, runtime, and network issues. These unexpected problems, referred to as faults, require a robust fault-tolerant system. This article will delve into effective strategies for managing errors in Angular applications, ensuring their reliability.
Let's dive into the topic of error handling.
Section 1.1: Synchronous Error Handling
The initial defense against errors is the try-catch statement, which is applied to code segments where errors are anticipated. The try/catch block enables the capture of errors that might occur within a specific code area.
try {
// Code that may generate an error
} catch(e) {
// Handle the error
}
This approach allows for immediate error capture, preventing application crashes. However, caution is needed, as this may not function as intended for asynchronous code:
try {
setTimeout(() => {
// Code that may throw an error
throw new Error("An error occurred!");
}, 1000);
} catch(e) {
console.log(e); // This will not work
}
In this case, the catch block fails to capture the error because setTimeout operates asynchronously. Instead, the try/catch block should encompass the synchronous code:
setTimeout(() => {
try {
// Code that may throw an error
throw new Error("An error occurred!");
} catch(e) {
console.log(e); // This will work}
}, 1000);
As applications grow larger, capturing every possible error with try/catch becomes increasingly difficult due to numerous edge cases. So, how can we prevent crashes in such scenarios?
Section 1.2: Utilizing a Global Error Handler
Errors not caught by a try/catch block are escalated to Angular's built-in Error Handler, which, by default, logs errors to the console. This centralized handler is crucial for managing application exceptions.
If we prefer to prevent users from continuing when the application is in a faulty state, we can redirect them to an error page after logging the error. To accomplish this, we can create a custom error handler by implementing the ErrorHandler interface.
import { ErrorHandler, Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: Error): void {
// Custom error handling logic}
}
The handleError method will be invoked upon an error. After logging the error, we can navigate the user to the error page:
import { ErrorHandler, Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class GlobalErrorHandler implements ErrorHandler {
router = inject(Router); // Inject Router
handleError(error: Error): void {
console.error(error);
this.router.navigateByUrl('/error');
}
}
Next, we need to override Angular's default error handler in our application module:
@NgModule({
...
providers: [
{
provide: ErrorHandler,
useClass: GlobalErrorHandler
},
],
...
})
export class AppModule { }
Chapter 2: Managing Asynchronous Errors
Angular extensively utilizes RxJS observables for asynchronous operations. Similar to try/catch, we can also manage errors in observables. For instance, if an observable throws an error without proper handling, it will be directed to the global error handler.
ngOnInit(): void {
of(true)
.pipe(
tap(() => {
throw new Error('SOMETHING WENT WRONG');})
)
.subscribe();
}
We can capture this error using the RxJS catchError operator. This operator produces another error observable, which could be the original error, a modified version, or an empty observable to halt error propagation.
of(true)
.pipe(
tap(() => {
throw new Error('Error');}),
catchError((error) => {
console.log("ERROR CAPTURED");
return EMPTY; // RxJS empty observable
})
)
.subscribe();
For specific errors where we do not want to navigate the user to an error page, we can return an EMPTY observable to prevent the error from reaching the global error handler.
We can also manage errors directly within the subscribe block using the error callback function:
of(true)
.pipe(
tap(() => {
throw new Error('Error');})
)
.subscribe({
next: () => console.log("Success"),
error: (e) => console.log("ERROR CAPTURED", e)
});
Chapter 3: Handling Global API Failures
Finally, we need to address HTTP call failures. As Angular uses observables for HTTP operations, errors can be handled using the previously discussed methods, either through catchError or within the subscribe method.
However, for a more centralized approach, similar to the global error handler, we can utilize an HTTP Interceptor to manage errors from HTTP calls. An interceptor allows us to intercept all outgoing HTTP requests, giving us access to both the HttpRequest and HttpResponse.
To create an interceptor, we will implement the HttpInterceptor interface and define the intercept method:
@Injectable()
export class ErrorResponseInterceptor implements HttpInterceptor {
// Implement the intercept method
intercept(req: HttpRequest, next: HttpHandler): Observable<any> {
// Proceed with the request and capture any errors
return next.handle(req).pipe(
catchError((err: unknown) => {
this.router.navigateByUrl('/server-error');
return EMPTY;
})
);
}
}
Using the catchError operator, we navigate the user to the 'server-error' page in case of an error and return an EMPTY observable to stop the error from escalating to the global error handler.
Similar to the global error handler, we need to provide the HTTP Interceptor using the HTTP_INTERCEPTOR token provided by Angular:
@NgModule({
...
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorResponseInterceptor,
multi: true
},
],
...
})
export class AppModule { }
Conclusion
In summary, effective error handling is crucial in Angular applications, just like in any other software. By addressing errors at multiple levels, we can enhance the resilience and fault tolerance of our applications. It is always preferable to handle errors gracefully rather than allowing the application to crash.
If you found this article helpful, a little applause would be appreciated! If not, feel free to share your thoughts! 😋
Or, if you're feeling generous, consider buying me a coffee! ☕️
Video Description: This video provides a comprehensive guide on error handling in Angular, covering best practices and common pitfalls.
Video Description: Explore the best practices for error handling in Angular applications, ensuring a robust user experience.