Javascript 角度9：如何使用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);
  }
}

输出没有显示关于发出请求的组件或服务的任何有用信息

---

有一些提示可以显示查找服务和组件堆栈跟踪的有用信息？

拦截器内的跟踪已经混乱。您还可以考虑使用定制的

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);
  }
}

@Injectable（）
导出类TraceHttpClient扩展HttpClient{
构造函数（处理程序：HttpHandler）{
超级（处理器）；
}
请求（…args:[any]）：可观察。您可以看到堆栈跟踪具有不同的按钮方法调用。但是，您应该打开浏览器控制台，因为stackblitz控制台不显示
控制台。跟踪
日志

HttpClient
为每个GET/POST/etc调用
request
，因此只要扩展该方法，并在那里放置跟踪，然后委托回基本的
HttpClient
类
就足够了。这里有一个替代已接受答案的方法。我不希望每个http调用都发出堆栈的噪音

一旦进入HttpClient错误处理程序，堆栈跟踪就会丢失，因此，
console.trace
无效。
Errors
非常昂贵，因此我不希望在生产中使用它

/**
 * Extended HttpClient that generates a stack trace on error when not in a production build.
 */
@Injectable()
export class TraceHttpClient extends HttpClient {
  constructor(handler: HttpHandler) {
    super(handler);
  }

  request(...args: [ any ]): Observable<any> {

    const stack = environment.production ? null : (Error()).stack;
    return super.request(...args).pipe(catchError((err) => {
      // tslint:disable-next-line:no-console
      if(stack) console.error('Cloud UI - HTTP Client error stack\n', stack);
      return throwError(err);
    }));
  }
}

/**
*扩展的HttpClient，当不在生产生成中时生成错误堆栈跟踪。
*/
@可注射（）
导出类TraceHttpClient扩展HttpClient{
构造函数（处理程序：HttpHandler）{
超级（处理器）；
}
请求（…参数：[任何]）：可观察{
const stack=environment.production？空：（Error（））.stack；
返回super.request（…args）.pipe（catchError（（err）=>{
//tslint:禁用下一行：无控制台
if（stack）console.error（'cloudui-HTTP客户端错误stack\n'，stack）；
回程抛掷器（err）；
}));
}
}
也许您应该尝试禁用优化？尝试
console.trace（）
而不是
console.log（）
.console.trace（））显示相同的输出我怀疑这在当前的rxjs版本中是可能的。我确实读过，rxjs7的堆栈跟踪将更可读。你可以试试看，我不知道angular是否可以使用它：）@PierreDuc我认为这需要angular的一些技巧，例如：在开始之前将堆栈跟踪注入请求。。。
/**
 * Extended HttpClient that generates a stack trace on error when not in a production build.
 */
@Injectable()
export class TraceHttpClient extends HttpClient {
  constructor(handler: HttpHandler) {
    super(handler);
  }

  request(...args: [ any ]): Observable<any> {

    const stack = environment.production ? null : (Error()).stack;
    return super.request(...args).pipe(catchError((err) => {
      // tslint:disable-next-line:no-console
      if(stack) console.error('Cloud UI - HTTP Client error stack\n', stack);
      return throwError(err);
    }));
  }
}