How to deal with errors? Not presenting error information.

[osnofa]

Axios has an error.response object that mirrors the information present when the server returns a normal response:

{
  data: ...
  status: ...
  statusText: ...
  headers: ...
  config: ...
}

I would like to have access to this information, but when const [{ data, loading, error, response }, fetch] = useAxios(...) returns an error from the server, the data and response come with the previously correct response values (undefined if it was the first request made).

Shouldn't it update the data, or at least the response with the axios' error.reponse value? Or at least construct the useAxios()'s error according to that value? Or am I missing the point completely and useAxios() is meant to be used differently when handling errors?

Right now, to know the status of the error, I have to extract the number part from the string associated with useAxios()'s error value: Error: Request failed with status code 404

[simoneb]

You will find all this information in the error property, or am I missing something?

const [{ error }] = useAxios(...)

[osnofa]

Strange, it's not giving me an object, it's giving me this instead:

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:81)

Going to try and reproduce it in codesandbox, I'll update this comment afterwards.

[simoneb]

okay sure. that object though is what's returned by axios, see

axios-hooks/src/index.js

Line 129 in 8706e4c

dispatch({ type: actions.REQUEST_END, payload: err, error: true })

[osnofa]

I coudn't reproduce my problem, but I noticed that it's something that is documented in axios.

At least I know where the problem lies. Basically the error occurred on the request, so error.response is obviously still undefined. I could identify this by checking all the values mentioned in axios' docs.

error.response -->  undefined
error.request -->  XMLHttpRequest {klIsCORSRequest: true, readyState: 4, timeout: 0, withCredentials: false, onreadystatechange: ƒ, …}
error.message -->  Network Error
error.config -->  {url: "https://nonexistingurl.com", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}

[simoneb]

Correct, though unusual, HTTP errors may occur on the request rather than in the response (i.e. there's no network connectivity so the request cannot even leave the local network). In those cases, you will never have a response and in Axios that's communicated by an undefined response on the error object.

[roeniss]

@simoneb I think this is more like react issue, but anyway.

I had almost the same problem -- I request a wrong URL, which does not exist, then axios literally died and my NextJS server also died.

logs:

client/node_modules/axios/lib/core/createError.js:16
  var error = new Error(message);
              ^

Error: Request failed with status code 404 at createError (client/node_modules/axios/lib/core/createError.js:16:15)

// really long (2200) config, request, response object info

error Command failed with exit code 1.

I don't think this is normal behavior. Axios dosen't return error, just die with react.

[simoneb]

This is a bug in your code. Neither axios or react simply "die".

[roeniss]

@simoneb Thank you for reply. It was actually ssr issue. when I set option {ssr: false} that problem was gone.

I think nextJS or some of my unconscious setup make axios do a job at server-side.