How do I view the full error response in Angular?

Question

I am trying to display more detailed error responses in my Angular app. It's running off of a .Net Core 8 backend.

I have the following code:

        <...>.subscribe(
            () => {
            },
            (err: HttpErrorResponse) => {
                this.busy = false;
                console.log(err);
                console.log(typeof(err));
                this.showErrorSheet('Error', '',
                    `While saving the user, the system encountered this error: ${JSON.stringify(err)}`);
            }
        );

When I run it with an intentional error (ex. a duplicate username) the err variable returns as a string reading

Http failure response for (url omitted): 400 OK

Meanwhile, the network tab in Chrome shows much more data. In addition to the 400 error code, the Response tab reads:

Username already in use

Which is the message I want to show.

On the .Net Core side, when the error is encountered, I am returning:

return BadRequest(errorMessage);

Where errorMessage is a string containing the error (in this case, "Username is already in use").

How can I show this message in Angular, so that I can display it to my users properly?

Answer 1

The problem was that I had an overeager HttpInterceptor that was converting all HTTP error responses into a string.

The interceptor was simply returning:

err.statusText

Which was why I only saw a string, not an HttpErrorResponse object.