关于 Angular Universal Engine SSR 错误处理的一些思考
ExpressJS 是一个流行的基于 Node.js 的 Web 应用框架，它常常用于作为服务器端的中间层。它的任务主要是处理 HTTP 请求，并返回合适的响应。Angular Universal 是 Angular 的一个服务端渲染 (Server Side Rendering, SSR) 解决方案，可以使 Angular 应用在服务器端渲染后再发送到浏览器，改善初次加载的速度以及提升 SEO 性能。
Angular Universal 通常与 ExpressJS 配合使用，在服务器端生成 HTML 页面并将其返回给客户端。为了完成这一过程，Angular Universal 提供了一种所谓的 Express engine，即一个可以与 ExpressJS 集成的引擎来完成 SSR 渲染。这个引擎负责将 Angular 组件的模板渲染为最终的 HTML 页面。
ExpressJS 默认返回状态码 200 的行为
在 ExpressJS 中，默认的行为是无论在应用的渲染过程中是否遇到错误，它都会向客户端返回一个 HTTP 状态码为 200 的成功响应。这种默认行为导致的问题在于，如果 Angular 应用在渲染过程中产生了某些异步错误，例如从后台请求数据的错误、组件中的运行时错误等，这些错误并不会被 Express 捕捉到并处理。因此，Express 仍会返回一个 200 OK 的响应码，而不是将这些错误反映在 HTTP 响应中。
我们可以通过以下几个方面来具体解释这种行为：
-
Angular Universal Express Engine 的错误处理机制
Angular Universal 的 Express 引擎默认会忽略所有在渲染过程中发生的异步错误。例如，当组件进行某些异步调用，比如发起 HTTP 请求去获取数据时，如果该请求失败，ExpressJS 本身并不知道这个失败的发生，因为它的生命周期中没有被设计来感知这些异步错误的细节。比如，当 Angular 中的某个组件使用
HttpClient进行后端请求，而该请求在渲染过程中返回了错误，此时的错误是被 Angular 内部的HttpClient捕获的。Express 引擎只是等待 Angular 完成渲染的任务，它对渲染过程中是否出现了异步错误不加处理。因此，Angular Universal 渲染的引擎会继续处理页面的渲染并返回结果，而不会直接将这个错误传递到 ExpressJS 层。 -
ExpressJS 如何处理异步错误
ExpressJS 中有一个典型的错误处理机制，那就是使用中间件函数来捕捉路由中抛出的错误。然而，当 Angular Universal 渲染应用时，渲染过程是异步的，且通常依赖于 Angular 内部的zone.js来追踪任务状态。因此，如果渲染过程中出现了某种异步错误，Express 的默认机制并不会捕获这些错误并中止响应，它仍然会继续完成整个渲染任务，将渲染的结果作为 HTTP 200 响应返回给客户端。
举例说明 ExpressJS 异步错误未被捕捉的场景
为了更好地理解这一点，我们来通过一个具体的例子逐步分析。
假设有一个 Angular Universal 应用程序，它包含一个用于展示用户信息的组件 UserComponent。这个组件在初始化时会调用后端的 API 以获取用户数据：
export class UserComponent implements OnInit {
user: any;
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get('/api/user')
.subscribe(
(data) => {
this.user = data;
},
(error) => {
console.error('Error fetching user data', error);
}
);
}
}
在上述代码中，UserComponent 使用 Angular 的 HttpClient 发送请求去获取用户数据。假设 /api/user 这个请求由于某种原因（例如后端服务器故障）返回了一个错误，比如 HTTP 500，HttpClient 会调用订阅中的错误回调函数，将错误打印到控制台。然而，由于这个错误发生在 Angular 组件中，Express 并不知道这个错误的存在，因此 Express 仍会返回状态码为 200 的响应。
客户端接收到的 HTTP 响应可能包含如下内容：
<html>
<head>
<title>Error Occurred</title>
</head>
<body>
<app-root>
<div>Error fetching user data</div>
</app-root>
</body>
</html>
此时，虽然客户端页面中展示了某种错误信息，但 HTTP 响应码却依然是 200。这对于自动化测试或者某些严格依赖 HTTP 状态码的客户端来说是有误导性的，因为客户端无法根据状态码判断服务器端是否在渲染过程中遇到了问题。
Angular Universal 引擎为何不捕捉异步错误？
Angular Universal 的 Express 引擎选择不捕捉这些异步错误，可能是出于以下几种考虑：
-
保持渲染的连贯性
在服务端渲染应用时，目标是尽可能生成一个完整的 HTML 页面，以提升用户体验，即使渲染过程中有些数据没有成功获取。如果每次异步调用失败都导致整体页面渲染失败并返回 HTTP 500，那么用户可能会频繁看到“服务器错误”的页面，这显然会影响用户体验。 -
异步任务的复杂性
在 Angular 中，异步任务大量存在，例如组件的数据加载、服务中的 HTTP 请求等。这些任务可能会有失败的风险，但 Angular 设计时强调前端的弹性与容错能力，通常以 UI 层的降级或提供占位符来解决。而 Express 作为渲染引擎，如果对每一个异步错误都做强制性的处理，会使得代码结构变得复杂且难以维护。 -
渲染的延迟问题
如果 Express 在渲染过程中等待每个异步操作完成并确保其无错误，那么一旦某个异步请求由于网络原因延迟，整个渲染过程的时间都会被拖长，进而影响用户体验。因此，Angular Universal 选择以一种“尽量完成”的方式来渲染页面，而非严格阻塞在某个异步任务上。
如何解决这个问题？
为了让 ExpressJS 正确地反映应用渲染中的异步错误，我们可以采取一些措施：
-
手动处理异步错误并返回状态码
在 Angular Universal 的服务端渲染过程中，我们可以手动捕捉异步错误，并将这些错误显式地传递给 ExpressJS，使其返回合适的 HTTP 状态码。具体来说，可以在渲染前注入一个错误捕捉逻辑，将捕获到的错误传递给 Express 错误处理的中间件。例如，可以通过
app.engine()自定义错误处理行为：
server.get('*', (req, res) => {
res.render('index', { req }, (err, html) => {
if (err) {
console.error('Rendering error:', err);
res.status(500).send('An error occurred during rendering');
} else {
res.send(html);
}
});
});
这样做可以确保当 Angular Universal 在渲染过程中遇到错误时，Express 能捕获到这些错误并返回合适的状态码（例如 500），从而反映服务器端的问题。
-
使用 Angular 的
TransferState进行状态管理
TransferState是 Angular 提供的一个状态管理工具，可以在服务端渲染时将一些状态传递给客户端。如果某些异步调用失败，可以通过TransferState将错误状态传递到页面中，并在客户端进行适当的处理。例如，可以在服务器端将错误信息注入到
TransferState，客户端在接收到这些状态后，可以根据情况选择重新请求数据或展示错误提示。 -
为关键请求提供超时和重试机制
另一种解决方案是在关键的异步请求中提供超时和重试机制。例如，在发起 HTTP 请求时，可以设置超时时间并在请求失败时进行重试。这种方式可以减少因网络波动或临时故障引发的渲染错误。使用
rxjs的操作符来处理，例如：
this.http.get('/api/user').pipe(
retry(3),
timeout(5000),
catchError((error) => {
return of({ error: true, message: 'Failed to load user data' });
})
).subscribe((data) => {
if (data.error) {
console.error(data.message);
} else {
this.user = data;
}
});
这种方法能够在网络请求出现问题时自动进行重试，减少因临时错误导致的渲染失败。
总结
ExpressJS 默认返回状态码为 200 的成功响应，即使在渲染 Angular 应用的过程中发生了异步错误。这是因为 Angular Universal 的 Express 引擎默认忽略了渲染过程中的异步错误，例如来自后端的 HTTP 请求错误或组件中的运行时错误。这种默认行为对于用户体验的提升是有利的，但可能会使得客户端无法准确了解渲染过程中是否发生了错误。
为了克服这一限制，可以通过手动捕捉异步错误并将其传递给 Express 中间件的方式来显式地返回合适的状态码。此外，可以使用 TransferState 进行状态管理，或者为异步请求添加超时和重试机制，以提高渲染的可靠性。这些方法可以帮助开发者在使用 Angular Universal 和 ExpressJS 时更好地处理异步错误，确保应用的稳定性和用户体验。
- 点赞
- 收藏
- 关注作者
评论（0）