如何在 Spartacus SSR 中記錄 http 請求的時間，即使在 SSR 超時之后

Question

如何記錄在 Spartacus Angular SSR 應用程序中發出的 http 請求的時間，即使在 SSR 超時（將 CSR 回退發送給客戶端）之后？

上下文：在像dynatrace這樣的監控工具中，您可以看到一個瀑布圖，顯示呈現請求的持續時間，還包括呈現的應用程序對外部服務（例如 OCC）進行的 http 調用。 然而，當 Spartacus SSR 返回 CSR 回退（由於 SSR 請求超時）時， dynatrace停止顯示呈現的應用程序正在進行的 http 調用。 需要強調的是，即使在 ExpressJS 服務器發送 CSR 回退后，Angular SSR 應用程序仍會在后台呈現，並且仍然可以進行 http 調用。 當這些 http 調用花費的時間太長時，最好調試其中哪些 http 調用花費了這么長時間。 如何調試那些 http 調用的持續時間？ 理想情況下，知道 CSR 回退是否已經發送給客戶......

Answer 1

出於調試目的，您可以提供一個 Angular HttpInteceptor來記錄 Angular 應用發出的每個 http 請求的時間。 順便提一句。 它還可以指示響應是否已由 ExpressJS 引擎發送到客戶端（例如，由於 SSR 請求超時）。

請參閱示例實現：

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Inject, InjectionToken, Optional } from '@angular/core';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';

export class LoggingInterceptor implements HttpInterceptor {
  constructor(@Optional() @Inject(RESPONSE) private response: Response) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const started = Date.now();
    return next.handle(request).pipe(
      tap(
        _event => {
          console.log(
            `Request for ${request.urlWithParams} took ${Date.now() - started} ms. ` +
            `Was ExpressJS Response already sent?: ${this.response?.headersSent}`
          );
        },
        _error => {
          console.log(
            `Request for ${request.urlWithParams} failed after ${Date.now() - started} ms. ` +
            `Was ExpressJS Response already sent?: ${this.response?.headersSent}`
          );
        }
      )
    );
  }
}

解釋：

• 我們從@nguniversal/express-engine/tokens注入RESPONSE InjectionToken
• RESPONSE對象具有來自 ExpressJS 的Response類型。 請注意寫： import {Response} from 'express' 。 否則會隱式使用 Node.js 的全局類型Response ，這是不正確的
• 我們用@Optional()裝飾器注入RESPONSE ，因為它在瀏覽器中不可用，但僅在 SSR 中可用
• 我們查找屬性this.response.headersSent ，它指示 ExpressJS 是否已經向客戶端發送了響應。 有關更多信息，請參閱ExpressJS Response.headersSent 的文檔

注意：如果你還想在 SSR 中 console.log 當前渲染頁面的 URL，你可以從@spartacus/core注入WindowRef並記錄它的屬性windowRef.location.href 。