Mock error message properly?

[Geddard]

Hi there, im trying to mock an error scenario with MSW, but the problem i have is that if i put for example status code 500, and then ctx.json({ message: "something"}) this message is part of the response body but it's not included as a real error message that is part of the catched arguments.

So when i do:

request.catch(error => console.log(error.message))

I only see "Request failed with status code 500".

I can't find any way in the docs to override the default error message i get on the catch block.
Any suggestions?

[Geddard]

I also tried passing the status message param, no change:

res(ctx.status(500, 'some message'), ctx.json({ message: "error message"}))

None of those two strings are anywhere to be found on the error object i get in the catch function

[kettanaito]

Hey, @Geddard.

Note that window.fetch handles any responses in the resolved promise, so the .catch block would never be called. This includes 4xx and 5xx responses. This is done on purpose, so you could access the error response body and reference the error details (i.e. error message, or any other additional information).

fetch('https://api.com/response/500').then(res => res.json()).then(json => json.errorMessage)

The only time the .catch block gets executed with fetch is when a network error occurs or if the request couldn't have been otherwise made. Since you get the .catch block called, I suspect you're using a different request client than window.fetch. You'd have to see the documentation of your client on how to access error responses.

If you wish to mock a network error, use the res.networkError() utility:

rest.get('/resource', (req, res, ctx) => {
  return res.networkError('Custom error message')
})

Please note that whether you can access the "Custom error message" is control entirely by the request client.

Solution for axios

The issue reported uses axios to make a request. With Axios, you can access the error response like so:

rest.get('/resource', (req, res, ctx) => {
  return res(ctx.status(500), ctx.json({ errorMessage: 'My error message' }))
})

axios.get('/resource').catch((error) => {
  error.response.data.errorMessage
})

[kettanaito]

It's a known behavior in Axios: it doesn't propagate thrown errors, it replaces them with their own error and that's the error you see when debugging.

[Geddard]

Ah I thought thst could also be related, but 8 couldn't find anything related to axios at first glance. I'll keep digging, thx :)

[Geddard]

ok looks like i can grab my own message by doing something like error.response.data.message :) thx for the tip

[kettanaito]

I've updated my original answer to include your finding. @Geddard, could you please see it and let me know if it's incorrect?
This will help others to find the answer quicker in the future. Thanks!

[Geddard]

Looks good, the structure of data inside response is what we passed to ctx.json