Javascript fetch with better error handling example

fetch-better-error-handling.js

return fetch(url)
    .then((response) => {
      if (response.ok) {
        return response.json()
      }
      throw response
    })
    .catch((error) => {
      if (error instanceof Error) {
        return { error }
      }

      return error.json().then((responseJson) => {
        return {
          error: new Error(
            `HTTP ${error.status} ${error.statusText}: ${responseJson.msg}`
          )
        }
      })
    })

Firstly, fetch doesn't throw errors normally for HTTP 400 errors etc.

Secondly, response JSON has a msg field with useful information for the error. Let's use it.