Accès au corps de réponse d'erreur HTTP de HttpInterceptor en Angular

Question

J'ai un HttpInterceptor pour intercepter les erreurs et les afficher dans un modal. Outre le code d'erreur et le message, je voudrais également montrer le corps de la réponse qui contient en fait une description plus précise de l'erreur (par exemple sur une erreur interne du serveur 500). Comment puis-je obtenir ceci dans angulaire? (J'utilise la version 4.3.6.)

J'ai déjà regardé des questions connexes mais des réponses comme HttpErrorResponse._body ou similaire ne fonctionnent pas pour moi. En outre, lors de l'inspection de la réponse d'erreur dans la console, HttpErrorResponse.error est défini sur null.

Voici comment mon intercepteur regarde actuellement:

@Injectable() 
export class HttpErrorInterceptor implements HttpInterceptor { 
    public constructor(private httpErrorService: HttpErrorService) { } 

    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).do(event => { 
    }, (error: HttpErrorResponse) => { 
     console.log('HTTPERROR INTERCEPTOR'); 
     console.log(error); 
     if (error.status >= 400) { 
     this.httpErrorService.onError(error); 
     } 
    }); 
    } 
} 

Answer 1

Le corps devrait être disponible dans la propriété error, donc:

return next.handle(req).do(event => { 
}, (error: HttpErrorResponse) => { 
    console.log(error.error); // body 
    ... 
}); 

Voici l'essentiel de la mise en œuvre from the sources:

if (ok) { 
    ... 
} else { 
    // An unsuccessful request is delivered on the error channel. 
    observer.error(new HttpErrorResponse({ 
    // The error in this case is the response body (error from the server). 
    error: body, <-------------------- 
    headers, 
    status, 
    statusText, 
    url: url || undefined, 
    })); 
} 

Pour en savoir plus sur les mécanismes derrière les intercepteurs r DEE:

• Insider’s guide into interceptors and HttpClient mechanics in Angular