I am trying to console.log some data for a weather API, but when I go look up a location I get the error message

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

My code so far is this on my server

app.post('/weather', (req, res) => {
    const url = `/${DARKSKY_API_KEY}/${req.body.latitude},${req.body.longitude}?units=auto`
    axios({
      url: url,
      responseType: 'json'
    }).then(data => res.json(data.data.currently)).catch(error => { throw error})
  })

app.listen(3000, () => {
    console.log("Server has started")
})

and my Javascript

  fetch('/weather', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      latitude: latitude,
      longitude: longitude
    })
  }).then(res => res.json()).then(data => {
    console.log(data)
    setWeatherData(data, place.formatted_address)
  }).catch(error => { throw error})
})

I am trying to console.log some data for a weather API, but when I go look up a location I get the error message

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

My code so far is this on my server

app.post('/weather', (req, res) => {
    const url = `https://api.darksky/forecast/${DARKSKY_API_KEY}/${req.body.latitude},${req.body.longitude}?units=auto`
    axios({
      url: url,
      responseType: 'json'
    }).then(data => res.json(data.data.currently)).catch(error => { throw error})
  })

app.listen(3000, () => {
    console.log("Server has started")
})

and my Javascript

  fetch('/weather', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      latitude: latitude,
      longitude: longitude
    })
  }).then(res => res.json()).then(data => {
    console.log(data)
    setWeatherData(data, place.formatted_address)
  }).catch(error => { throw error})
})

• javascript
• node.js
• json
• es6-promise

Share Improve this question Follow asked Jan 8, 2020 at 2:22 faizan_khan98faizan_khan98 14133 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your code:

axios(...).then(...).catch(error => { throw error;})

will lead to that warning if your axios() call or the .then() handler has a rejection.

When you throw the error in your .catch() handler that leaves the promise chain in a rejected state and you have no further code to catch that rejection.

The exact same issue is true of your client-side code.

---

You should also understand that .catch(error => { throw error;}) does absolutely nothing useful. It catches the rejection, then throws which just rejects the chain again. And, since there is nothing else listening to the promise chain, it's an unhandled rejection.

What you need to do instead is to actually handle the error in some way that is appropriate for your application such as send an error status back to the client.

axios(...).then(...).catch(error => {
    console.log(err);
    res.sendStatus(500);
});

And, in the client, you can either show the user an error message or just log the error. rethrowing the error if there's nobody listening to catch it does you no good.

axios({
      url: url,
      responseType: 'json'
    }).then(data => res.json(data.data.currently)).catch(error => { console.error(error)})

I did the same thing when I started. :)

You wouldn't throw a baseball from the catcher's mitt, so you shouldn't throw an error from a catch method either. You can however throw from the then method and it will be caught by the following catch method.

Anyway, you should handle the error in the catch method. In most cases the error will be sent to that catch method automatically if it's a real error. If it's an error hidden inside a successful API request, you'd have to manually throw the error like I mentioned above.

.catch(error => yourCustomErrorHandlerThatShouldBeAvailableGloballyAndDefinitelyNotHaveANameThisLong(error))

Your custom error handler can do whatever you want. You can forward it to a service you're using to track crashes, you can display something to page visitors, you can print it to the console, make the page spin around really fast and explode, create an animated cat rainstorm, redirect to Darth Vader yelling "NOOOOOOO!". Sky's the limit.