How can I read http errors when responseType is blob in Axios with VueJs?

Question

I'm using blob responseType with Axios in my VueJS app for downloading a document from the server. When the response code is 200 it works fine and download the file but when there is any http error, I'm not able to read the status code when I catch the error because the error is a JSON response.

Has anyone had a similar issue and worked out a way to convert the blob response type to json and thrown an error based on the status code?

I have tried sending the response as a plain text from Laravel backend and tried converting the response to JSON or text in the front-end but no luck.

I have tried reading error response headers but no luck.

Axios({
        url: 'xxxx',
        method: 'GET',
        responseType: 'blob', 
        })
    .then((response) => {
        //code to read the response and create object url with the blob and download the document
    })
    .catch((error) => {
      console.log('Error', error.message); //nothing
      console.log('Error', error.error); //undefined
      console.log('Error', error.data); //undefined

      const blb    = new Blob([error], {type: "text/plain"});
      const reader = new FileReader();

      // This fires after the blob has been read/loaded.
      reader.addEventListener('loadend', (e) => {
        const text = e.srcElement.result;
        console.log(text);
      });
     // Start reading the blob as text.
     reader.readAsText(blb);
});

I just want to throw the error message based on the status code. If it's 401 just want it to be unauthorized and anything else throw it on to the component.

Answer 1

I believe you might be using the error variable in your catch() incorrectly.

Axios passes an error object that has a response property that is where you will want to look for your error or message.

https://github.com/axios/axios#handling-errors

On a side note if you can catch the error server side you could try setting the Content-type header to text/plain. Using either header('Content-Type: plain/text') or Laravel's Response Methods