Angular 9: Как показать с HttpInterceptor трассировку стека запроса?

Question

У меня есть HttpInterceptor , и я хочу для целей разработки распечатать трассировку стека функций, которые сделали запрос:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Who has made this request?', new Error().stack);
    return next.handle(request);
  }
}

Вывод журнала консоли:

at HttpInterceptorService.intercept (:4200/main.js:1344) [angular]
    at HttpInterceptorHandler.handle (:4200/vendor.js:30718) [angular]
    at HttpXsrfInterceptor.intercept (:4200/vendor.js:31484) [angular]
    at HttpInterceptorHandler.handle (:4200/vendor.js:30718) [angular]
    at HttpInterceptingHandler.handle (:4200/vendor.js:31549) [angular]
    at MergeMapSubscriber.project (:4200/vendor.js:30457) [angular]
    at MergeMapSubscriber._tryNext (:4200/vendor.js:112207) [angular]
    at MergeMapSubscriber._next (:4200/vendor.js:112197) [angular]
    at MergeMapSubscriber.next (:4200/vendor.js:107493) [angular]
    at Observable._subscribe (:4200/vendor.js:116912) [angular]
    at Observable._trySubscribe (:4200/vendor.js:106949) [angular]
    at Observable.subscribe (:4200/vendor.js:106935) [angular]
    at MergeMapOperator.call (:4200/vendor.js:112182) [angular]
    at Observable.subscribe (:4200/vendor.js:106930) [angular]

В выходных данных не отображается полезная информация о том, какой компонент или служба отправила запрос.

Есть несколько советов, которые показывают полезную информацию для поиска трассировки стека служб и компоненты

Answer 1

След внутри перехватчика уже испорчен. Вы также можете подумать об использовании пользовательского HttpClient. Это непроверенный код, хотя. Так что, если вы удалите поставщика перехватчика и замените его на:

{ provide: HttpClient, useClass: TraceHttpClient }

И ваш TraceHttpClient будет выглядеть так:

@Injectable()
export class TraceHttpClient extends HttpClient {
  constructor(handler: HttpHandler) {
     super(handler);
  }

  request(...args: [ any ]): Observable<any> {
    console.trace('Who has made this request?');

    return super.request(...args);
  }
}

Вы можете увидеть рабочую версию здесь . Вы можете видеть трассировку стека с различными вызовами метода кнопки. Вы должны открыть консоль браузера, потому что консоль stackblitz не показывает журналы console.trace.

HttpClient вызывает request для каждого GET / POST / et c .... Так достаточно просто расширить этот метод, поместить туда трассировку и делегировать обратно в базовый HttpClient класс