DEV Community: Tabrez Ahmed

How to handle 4xx and 5xx errors in Javascript fetch()

Tabrez Ahmed — Sat, 27 Mar 2021 12:27:04 +0000

Many modern javascript applications make use of the in-built fetch() API. This API takes care of most of the HTTP stuff and hence reduces the overhead of an external library like Axios or jQuery in many cases.

fetch makes use of Promise instead of callbacks to make things easier for the developers. For the sake of explanation, Let's fetch my github profile as an example and log to console. Typically, our fetch usage would look like this:

function fetchProfile(profileURL) {
    fetch(profileURL)
        .then(res => res.json())
        .then(userData => console.log('Response: ', userData))
}

fetchProfile('https://api.github.com/users/ahmedtabrez')
// This logs my profile in JSON format

This should work for a happy flow. Let's do some error handling now.

function fetchProfile(profileURL) {
    fetch(profileURL)
        .then(res => res.json())
        .then(userData => console.log('Success: ', userData))
        .catch(error => console.error('Error: ', error))
}

fetchProfile('https://non.sense.url/')

And this is what gets logged to my console:

Fair enough so far. Now let's try fetching my profile with a deliberate typo (let's add a hyphen at the end)

fetchProfile('https://api.github.com/users/ahmedtabrez-')

And here's what is logged:

Wait a minute, why did it log Success: <object>? Wasn't it supposed to log Error: <object> according to our code just like it did for https://non.sense.url/?

Well, that's the caveat that makes using fetch slightly difficult.

According to the docs, fetch actually throws an exception only if there is a network failure or if something prevented the request from completing. It doesn't throw an exception for 4xx or 5xx responses

So in our case, fetchProfile('https://non.sense.url/') entered the catch block as expected because there was a network failure. There was actually no host at https://non.sense.url/. But when we did fetchProfile('https://api.github.com/users/ahmedtabrez-'), there was no network error. The URL we called took the request and responded with a response code. The request was complete and hence fetch did not consider that as an error.

If you have been using APIs like jQuery.ajax, you might expect the 4xx and 5xx errors in the catch block too. So let's write a wrapper function as a workaround for this.

To begin with:

function myFetch(...args) {
    return fetch(...args)
}

To handle the 4xx and 5xx responses, the fetch API, fortunately, provides us with a flag ok in the response object. We can make use of this flag to our advantage.

function myFetch(...args) {
    return fetch(...args)
        .then(res => {
            if (res.ok) {
                return res
            } else {
                throw new Error('An error occurred')
            }
        })
}

That would be enough. Now let's update our fetchProfile function and try again.

function fetchProfile(profileURL) {
    myFetch(profileURL)
        .then(res => res.json())
        .then(userData => console.log('Success: ', userData))
        .catch(error => console.error('Error: ', error))
}

fetchProfile('https://api.github.com/users/ahmedtabrez-')

And this is what the console looks like now:

As expected, the 404 response causes our fetchProfile to enter into the catch block.

A quick enhancement

In the network log in developer tools, The response body looks like

Let's say we want the server error response body within the catch block for handling the user experience for example by showing an error popup. But our implementation so far is only capable of giving us a generic error message An error occurred. To make this happen, we will make use of Promise.reject in place of throw like so:

function myFetch(...args) {
    return fetch(...args)        
        .then(res => {
            if (res.ok) {
                return res
            } else {
                // Assume our 4xx/5xx responses are always JSON objects for the sake of simplicity
                return res.json().then(json => Promise.reject(json))
            }
        })
}

Now let's see what fetchProfile('https://api.github.com/users/ahmedtabrez-') logs in console.

Now we have the error response body available at our catch block and we can make use of it as per our requirements.

Conclusion

There are tons of other implementations available over the internet and they could be more robust than this implementation. But as far as I was able to search, I could not find any implementation which gives us the response body in the catch block. That's what motivated me to write this post.

Let me know in the comments below if you feel like giving me any feedback. Also, let me know if you want me to write on a topic. I would love to explore.

Recursive routes in Angular

Tabrez Ahmed — Sun, 24 Nov 2019 10:49:40 +0000

Prologue

You own a retail chain that has a lot of branches. You grow your business and soon realize that you won't be able to concentrate on growing business while parallelly managing all the branches yourself.

You select some prominent branches in each region (Let's call them L-0 branches) and ask that branch to manage a few branches in their region (Let's call them L-1 branches). Your chain of stores thrives under the new business model. Now all your L-0 branches have too many L-1 to manage just like you had in the beginning.

You re-organize a little more by selecting a few prominent L-1 branches and add a few L-2 branches under each of them. You keep reorganizing your chain this way up to the L-N level as the need be.

What now?

You have a portal built in Angular which has a page to show you the list of branches at example.com/branches. You find it very cumbersome to have a list of all the branches in the initial view most of which you don't manage directly. You want to have L-0 branches in the initial view and then after choosing to view the sub-branches of one of them, you want to open a list of respective L-1 branches. Similarly, you want to see a list of respective L-2 branches on choosing to view sub-branches of an L-1 branch. and so on.

What you need?

Your site so far has the following component structure.

|-app.component.ts
|-app.component.html
|-app.module.ts
|-app-routing.module.ts
|-branches
    |-branches.module.ts
    |-branches-routing.module.ts
    |-branches.component.ts
    |-branches.component.html
    |-branch
        |-branch.module.ts
        |-branch-routing.module.ts
        |-branch.component.ts
        |-branch.component.html
|-core
    |-services
        |-branch.service.ts

The branches component in the branches module lists all the branches.
The branch component in the branch module displays all the details of a particular branch.
/branches and /branches/<branchCode> are lazyloaded routes.

The only thing you need to do beforehand is to modify your branches API so it can accept a parentBranchCode and give you sub-branches only of that branch. Like so:

Request:

GET https://example-api.com/branches?parentBranchCode=bengaluru

Response:

[
    {
        "id": 123, 
        "branchName": "Tumakuru",
        "branchCode": "tumakuru",
        "parentBranchCode": "bengaluru"
    },
    {
        "id": 124,
        "branchName": "Mysuru",
        "branchCode": "mysuru",
        "parentBranchCode": "bengaluru"
    },
    {
        "id": 125,
        "branchName": "Mandya",
        "branchCode": "mandya",
        "parentBranchCode": "bengaluru"
    }
]

Note: In the absence of the parentBranchCode, the API should give a response containing an array of all L-0 branches.

Okay, now let's go ...

This is a breeze. You just got three things to modify in your existing code.

1. `branch-routing.module.ts`

Before:

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: '', component: BranchComponent }
        ])
    ],
    exports: [RouterModule]
})
export class BranchRoutingModule { }

After:

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: '', component: BranchComponent },
            { path: 'sub-branches', loadChildren: '../branches.module#BranchesModule' }
        ])
    ],
    exports: [RouterModule]
})
export class BranchRoutingModule { }

This is actually the trick. This will make the routes /branches, /branches/bengaluru/sub-branches and /branches/bengaluru/sub-branches/mysuru/sub-branches render the same component ie. BranchesComponent.

But `branchCode` from where?

Just to clarify, since you already have a page /branches/<branchCode>, there must be a route already in your branches-routing.module.ts like so:

{ 
    path: ':branchCode', 
    loadChildren: './branch/branch.module#BranchModule' 
}

A question you may have

In a route like /branches/bengaluru/sub-branches/mysuru/sub-branches, we have two sub-branches, there could be any number in other routes. How do we deal with this?

Short answer: You don't have to.

Long answer: If the route params of the same name appear more than once, the one appearing later will always overwrite the one preceding it. So rest assured, we are covered here. The branchCode we finally get when we subscribe to the route params will be the last one that appears in the URL (in this case, mysuru) which is what we desire.

2. `branches.component.ts`

You have got the branches API modified beforehand so as to accept parentBranchCode and give us back the branches managed by it (or all the L-0 branches if parentBranchCode is empty). Let' start sending this in query params.

ngOnInit() {
    const parentBranchCode = this.route.snapshot.params.branchCode;
    this.branchService.getBranches({ parentBranchCode })
    .subscribe(branches => {
        this.branches = branches;
    });
}

3. `branch.service.ts`

Very obviously, after the previous step, we need to pass on the query params to the API request.

getBranches(queryParams: any = {}) {
    return this.httpService.get('https://example-api.com/branches', { 
        queryParams 
    });
}

An after step

It makes sense to add a link to sub-branches in the branch component like so:

<a routerLink="sub-branches">Sub-branches</a>

Now go to /branches, you should see all your L-0 branches. Choose to view the details of that branch. Find the button you just added and click on it. You'll see a list of its sub-branches. Now choose to view any branch, find the button again, click on it. You'll get another level of branches. No end to it.

Done?

Yeah, did you expect more?

Hope you like this post. Scroll down to the comments section below and leave me your feedback or any questions you may have.

I really wish you the very best for your retail chain. 😉😛