web-dev-qa-db-ja.com

Angular 9：HttpInterceptorでリクエストのスタックトレースをどのように表示しますか？

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]

出力には、要求を行ったコンポーネントまたはサービスに関する有用な情報は表示されません。

サービスとコンポーネントのスタックトレースを見つけるために役立つ情報を表示するためのヒントはありますか？

javascriptangularangular-http-interceptors
4
Simone Nigro

インターセプター内部のトレースはすでにめちゃくちゃになっています。また、カスタム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はGET/POST/etcごとにrequestを呼び出します。そのため、このメソッドを拡張してそこにトレースを配置し、ベースにデリゲートして戻すだけで十分ですHttpClientクラス

1
Poul Kruijt