Getting response.message custom message when doing await fetch

Issue

I have an error handler in my Nodejs express backend that catches some errors and sends it to the client:

res.status(error.status|| 500).json({
      status: error.status||500,
      message: 'MY CUSTOM ERROR MESSAGE',
      stack: error.stack
})

I have been using jquery ajax for the longest time and have always been able to get the value of the message obtained from the backend like this:

$.ajaxSetup({
    error(jqXHR, exception) {
      $('#divSubmitButtonSpinAnimation').addClass('d-none');

      console.log(jqXHR);
      console.log(exception);
      $.toast({
        position: 'top-right', /** top-left/top-right/top-center/bottom-left/bottom-right/bottom-center - Where the toast will show up * */
        dismissible: true, /** true/false - If you want to show the button to dismiss the toast manually * */
        stackable: true, /** true/false - If you want the toasts to be stackable * */
        pauseDelayOnHover: true, /** true/false - If you want to pause the delay of toast when hovering over the toast * */
        title: jqXHR.statusText,
        subtitle: jqXHR.status,
        content: (jqXHR.responseJSON) ? jqXHR.responseJSON.message : 'Unspecified Error',
        type: 'error',
        delay: 5000,
      });

     
      return false;
    },
  });

However, I am now working on ability to upload file and I ran into problems when using jquery ajax so I have decided to start using the await fetch api. I have got the most part working except, I can no longer read the value of the response.message as it is undefined.

const response = await fetch(
      '/getStudentInfo',
      {
        headers: {
          Accept: 'application/json',
        },
        method: 'POST',
        body: formData,
      },
    );
    if (response.status === 200) {
      return response.json();
    }

    console.log(response.message)

response.message is undefined but response.status is 500 and response.statusText is "Internal Server Error" which is expected as I am sending error 500 from the server.

Solution

You still need to call response.json() to access the message in the response body, even when the http status is not 200.

const response = await fetch('/getStudentInfo', {
  headers: {
    Accept: 'application/json',
  },
  method: 'POST',
  body: formData,
});
const data = response.headers.get("content-type")?.startsWith("application/json"))
  ? await response.json()
  : await response.text();

if (response.ok) {
  console.log(data);
} else {
  console.error(data.message);
}

Answered By – Bergi

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0