typescriptvue.jsarraybuffervue-resourceextract-error-message

How to get error message from array buffer


I have the following request to download a file (using vue-resource):

this.$http.get(fileUrl, { responseType: 'arraybuffer' }).
    then(
        (response) => {
            let blob = new Blob([response.data], { type: response.headers.get('content-type') });
            let link = document.createElement('a');
            link.setAttribute("type", "hidden");
            link.href = window.URL.createObjectURL(blob);
            let disposition = response.headers.get('content-disposition');
            let matches = /.*filename=(.*);.*/.exec(disposition);
            let filename = (matches != null && matches[1])
                ? matches[1]
                : 'file';
            if (filename.startsWith('"')
                && filename.endsWith('"')) {
                filename = filename.substr(1, filename.length - 2);
            }
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            link.remove();
        },
        (errorResponse) => {
            // TODO: errorResponse doesn't actually have the error message somehow
            console.error(errorResponse);
        });

In my back end (C# asp.net core) I am throwing an execption like this:

throw new DomainException("ErrorMessage");

I can see in the request in devtools that the message "ErrorMessage" is definitely being sent back. It's the only thing visible in both the response and preview tabs in chrome.

However, I can't seem to find that message anywhere to show the user.

Normally I would get it from errorResponse.bodyText, but this is undefined in this case


I have tried everything from calling errorResponse.body, errorResponse.bodyText (everything gives me undefined) and even tried reading it with

var decodedString = String.fromCharCode.apply(null, errorResponse.body);
var obj = JSON.parse(decodedString);
var message = obj['message'];

which just throws more errors:

myMixin.ts:257 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse () at VueComponent. (myMixin.ts:257)

Trying the above again but passing in new Uint8Array(errorResponse.body) gives me

myMixin.ts:257 Uncaught (in promise) SyntaxError: Unexpected token N in JSON at position 0 at JSON.parse () at VueComponent. (myMixin.ts:257)


Removing , { responseType: 'arraybuffer' }, I can see the error message exists in errorResponse.bodyText.

Why is this happening? How can I just get the error message - which clearly does exist as I can see it in the network tab - and just log it on the console?


Solution

  • I finally found the solution I needed here:

    let message = String.fromCharCode.apply(
        null, 
        new Uint8Array(errorResponse.body));
    

    However, because I'm using TypeScript I was getting some kind of annoying message about errorResponse.body not being assignable to type number[], so I'm doing it like this:

    let message = String.fromCharCode.apply(
        null, 
        new Uint8Array(errorResponse.body) as any);
    

    Also note that because my response body had an odd number of characters, I had to use Uint8Array instead of Uint16Array. See this helpful answer for details.