Angular Universal 应用避免 SSR hang 的一些指导方针
Angular Universal 应用避免 SSR hang 的一些指导方针
当某些异步任务永远挂起时，Angular SSR 渲染可能永远不会完成，例如对后端 API 的 http 调用。
目前 Spartacus SSR 实现里，已经采取了一些措施来改善渲染挂起时的监控体验：
我们添加了配置 SsrOptimizationOptions.maxRenderTime.
在 maxRenderTime 时间之后，我们登录控制台，能看到显示渲染时间过长并且可能挂起的提示消息，但我们对此无能为力。
理想情况下，我们应该尽可能避免 render 进程出现 hang 的情况。
首先，最好调查一下 SSR 中出现 never-ending 的异步操作的最常见原因是什么，然后尝试阻止它们。
一种合理的猜测是，在大多数情况下，这是由于一个永不响应的 HTTP API 调用造成的。 如果情况确实如此，在 SSR 模式下，我们可以为所有 API 调用引入通用的 http 超时，因此它们最终会返回控制权给 SSR 服务器，因此 SSR 服务器可以继续进行其他请求的响应工作。
Angular Universal 的一个局限就在于，无法以编程方式中止挂起的渲染并释放分配的资源。
一种解决方案是，我们可以引入一个 Angular HTTP_INTERCEPTOR，它可以使长时间未决的网络请求超时，因此在服务器端启动的应用程序的生命周期更短。
换句话说：因此 SSR 渲染不会因为等待来自网络的缓慢 API 响应而“挂起”。 但是，这可能需要在应用程序代码甚至 SSR 代码中添加额外的逻辑，这样此类格式错误的渲染（基于不完整的数据）不会在 SSR 响应中返回。 在这种情况下，最好回退到具有无缓存标头的 CSR 应用程序，而不是允许发送格式错误的呈现 html 作为响应（并可能由 CDN 缓存）。
下面是一个具体的例子：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestTimeoutHttpInterceptor, DEFAULT_TIMEOUT } from './interceptors';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
declarations: [
AppComponent,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: RequestTimeoutHttpInterceptor, multi: true },
{ provide: DEFAULT_TIMEOUT, useValue: 5000 },
],
bootstrap: [AppComponent]
})
export class AppModule { }import { Injectable, InjectionToken, Inject } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { empty, TimeoutError } from 'rxjs';
import { timeout, catchError } from 'rxjs/operators';
export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');
@Injectable({
providedIn: 'root'
})
export class RequestTimeoutHttpInterceptor implements HttpInterceptor {
constructor(
@Inject(DEFAULT_TIMEOUT) protected defaultTimeout: number,
) { }
intercept(req: HttpRequest<any>, next: HttpHandler) {
const modified = req.clone({
setHeaders: { 'X-Request-Timeout': `${this.defaultTimeout}` }
});
return next.handle(modified).pipe(
timeout(this.defaultTimeout),
catchError(err => {
if (err instanceof TimeoutError)
console.error('Timeout has occurred', req.url);
return empty();
})
);
}
}