A Comprehensive Guide to Handling Non-200 HTTP Status Codes in Angular 2

Introduction

In Angular 2 applications, HTTP requests are central to frontend-backend server interactions. However, when servers return non-200 status codes (e.g., 400, 500), Angular 2 defaults to throwing exceptions, leading to app crashes or degraded user experience. This article addresses this issue by introducing RxJS's catch operator and error-handling mechanisms for more robust HTTP request processing.

Problem Analysis

In Angular 2, the HTTP module is designed around Observables, complicating error handling. When a server returns a non-200 status code, the HTTP request enters an error state. Without proper handling, Angular 2 throws uncaught exceptions, such as: uncaught exception: [object Object]. This often occurs because developers do not explicitly handle these error states in their code.

Solution: Using RxJS's Catch Operator

To handle non-200 status codes, we can use the catch operator from the RxJS library. First, import the necessary modules:

import {Observable} from 'rxjs/Rx';

Then, add the catch operator to the HTTP request chain to capture errors. Here is an example code snippet demonstrating how to handle specific status codes like 400 and 500:

return this.http.request(new Request(requestoptions))
    .map((res: Response) => {
        if (res) {
            if (res.status === 201) {
                return [{ status: res.status, json: res }];
            } else if (res.status === 200) {
                return [{ status: res.status, json: res }];
            }
        }
    })
    .catch((error: any) => {
        if (error.status === 500) {
            return Observable.throw(new Error(error.status));
        } else if (error.status === 400) {
            return Observable.throw(new Error(error.status));
        } else if (error.status === 409) {
            return Observable.throw(new Error(error.status));
        } else if (error.status === 406) {
            return Observable.throw(new Error(error.status));
        }
    });

In this example, the catch operator captures HTTP errors and returns an Observable error stream based on the status code. This allows errors to be handled by subscribers instead of causing app crashes.

General Error Handling

If handling specific status codes is unnecessary, a more generic approach can be used. For instance, catch all errors with status codes less than 400 or equal to 500:

.catch((error: any) => {
    if (error.status < 400 || error.status === 500) {
        return Observable.throw(new Error(error.status));
    }
})

This method simplifies code and is suitable for most scenarios.

Subscribing to Error Callbacks

After the catch operator throws an error, it must be handled in the subscription. Use the err callback in the subscription to display error messages or perform other actions:

.subscribe(
    res => { /* Handle successful response */ },
    err => { console.log(err); /* Handle error, e.g., show user prompt */ }
);

This enables users to see friendly error messages instead of app crashes.

Practical Application Example

Suppose we have a user registration feature where the server returns a 400 status code (indicating an invalid request). We want to display an error prompt on the frontend. Using the above method, capture the 400 error in the catch operator and update the UI in the subscription's err callback:

this.http.post('/api/register', userData)
    .catch((error: any) => {
        if (error.status === 400) {
            return Observable.throw(new Error('Registration failed: Please check input data'));
        }
        return Observable.throw(new Error('Unknown error'));
    })
    .subscribe(
        res => { /* Handle successful registration */ },
        err => { alert(err.message); /* Display error prompt */ }
    );

Conclusion

By leveraging RxJS's catch operator and error subscription mechanisms, Angular 2 applications can effectively handle non-200 HTTP status codes, preventing app crashes and enhancing user experience. Key steps include importing RxJS modules, adding the catch operator to HTTP request chains, throwing errors based on status codes, and handling error callbacks in subscriptions. This approach is adaptable for specific or general error handling, making applications more robust and user-friendly.