ReactJs Throw Error to Parent Parent function

Question

I have created a authFetch function so I can easily include my JWT tokens to all my fetch requests as follows.

export const authFetch = (url, body) => {
    let headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + Auth.getToken()
    }

    let options
    if (body !== null) {
        options = {
            headers,
            body
        }
    } else {
        options = {
            headers
        }
    }

    return fetch(url, {
        headers,
        method: 'POST',
        body: JSON.stringify(body)
    })
        .then(_checkStatus)
        .then(response => response.json())

}

const _checkStatus = response => {
    // raises an error in case response status is not a success
    if (response.status >= 200 && response.status < 300) {
        // Success status lies between 200 to 300
        console.log(response)
        return response
    } else {
        console.log(response)
        let error = new Error(response.statusText)
        error.response = response
        throw error
    }
}

now I have a problem. When my API throws a 404, or 400 error, the error is not throw back to my Component which calls authFetch in componentWillMount.

ReactJS says fail to compound on unhandled errors

Unhandled Rejection (Error): Forbidden _checkStatus src/services/authFetch.js:44
41 | return response
42 | } else {
43 | console.log(response)

44 | let error = new Error(response.statusText)

45 | error.response = response

46 | throw error
47 | }

the arrow is pointed at row 44

Update: Added Component codes

componentWillMount = () => {
    authFetch($url)
    .then(data => {
        console.log(data)
    }
    .catch(err => console.log(err))
}

Possible duplicate of [How do I handle errors with promises?](https://stackoverflow.com/questions/21800010/how-do-i-handle-errors-with-promises) — Alejandro, Dec 06 '18 at 06:24
i under simple promises. fetch returns a promise anyway right? so it should return the thrown error no? — Someone Special, Dec 06 '18 at 06:26
there are many ways to handle errors, check duplicated answer. Most common is: `promise.then(handler).catch(handlerError)` - you're missing `.catch()` block — Alejandro, Dec 06 '18 at 06:28
do you have `componentDidCatch` implementation in your component? — Alejandro, Dec 06 '18 at 06:37

ReactJs Throw Error to Parent Parent function

0 Answers0