关于服务器端渲染的 Web 应用的 504 错误问题

简介: 关于服务器端渲染的 Web 应用的 504 错误问题

除非客户在 SSR 中添加了用于显式发送 504 的自定义逻辑,否则 504 不会来自 SSR。


在默认的 Spartacus/SSR 中,没有显式发送 504 的逻辑。 默认情况下它只发送 200 或 500(仅在 APP_INITIALIZER 失败的情况下)。


我们在浏览器里看到的这个 504 错误:


An error occurred.


Sorry, the page you are looking for is currently unavailable.



image.png

这个错误消息是由 nginx 生成的,并发送 504(网关超时),根据 MDN,这意味着:


504 Gateway Timeout 服务器错误响应代码表示服务器在充当网关或代理时,没有及时从上游服务器(the upstream server)获得完成请求所需的响应。


在这种情况下,上游服务器是 node.js 服务器。node.js 根本没有响应,于是 nginx 网关向客户端发回 504 错误码。


如果 Node.js 响应速度过慢,Nginx 就会直接将客户端发送过来的请求通过 504 错误码响应。


在某些特殊的场景下,有问题的请求在 Dynatrace 中实际上是不可见的。


个人的猜测是 Dynatrace 只有 在请求完成时才记录了该项目。所以那些永远不会完成的永远不会被 Dynatrace 记录。


例如,某些请求逻辑进入了无限循环(在 Java 代码中),导致线程从未结束,该请求从未记录在 Dynatrace 中。


下面这段代码可以模拟 Node.js 主线程被 block 的场景:


export class AppComponent {
  constructor(protected location: Location) {}
  ngOnInit() {
    const url = this.location.path();
    const shouldBlock = url.endsWith('?block-main-thread-super-long');
    console.log({ url, shouldBlock });
    if (shouldBlock) {
      this.blockMainThreadSuperLong();
    }
  }
  blockMainThreadSuperLong() {
    const SUPER_BIG_BUMER = 1_000_000_000_000_000;
    for (let i = 0; i < SUPER_BIG_BUMER; i++) {
      // do nothing, just looping to simulate a slow operation
    }
  }
}

运行命令行 curl http://localhost:4200/electronics-spa/?block-main-thread-super-long,不会收到任何响应,因为主线程被 block 住了。


再发送其他请求 curl http://localhost:4200,也收不到任何回应,这也是预料中的结果,因为主线程被 block 了。


下面代码是模拟 Node.js SSR 不再响应任何请求的场景:


// server.ts
  /*...*/
  let neverSendResponsesAnymore = false;
  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    if (req.url.endsWith('?never-send-responses-anymore')) {
      neverSendResponsesAnymore = true;
    }
    if (neverSendResponsesAnymore) {
      return;
    }
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    });
  });

下面这段高亮代码会导致 SSR 不响应客户端请求:

这两段代码均来自我的同事 Kris.

相关文章
|
缓存 JSON 前端开发
Web项目中,常用的几种清理浏览器缓存的方式
Web项目中,常用的几种清理浏览器缓存的方式
291 0
|
前端开发 搜索推荐 JavaScript
服务端渲染(SSR):提升现代Web应用的性能与用户体验
在现代Web应用开发中,服务端渲染(Server-Side Rendering, SSR)已经成为提高性能、SEO友好以及增强用户体验的关键技术之一。本博客将深入探讨服务端渲染的核心概念、实施方法以及为什么它对于构建现代Web应用如此重要。
228 0
|
2月前
|
JSON 前端开发 JavaScript
Web中的客户端和服务器端
Web中的客户端和服务器端
101 1
|
JavaScript Java 应用服务中间件
关于服务器端渲染的 Web 应用的 504 错误问题
关于服务器端渲染的 Web 应用的 504 错误问题
|
5月前
|
JavaScript 前端开发 搜索推荐
探索现代Web应用中的服务端渲染(SSR)技术
【4月更文挑战第9天】 在构建快速且可扩展的现代Web应用程序中,服务端渲染(SSR)技术已经成为一种不可或缺的方法。不同于传统的客户端渲染(CSR),服务端渲染能够提供更快的初始页面加载时间,改善搜索引擎优化(SEO),并且对于用户和网络速度各异的环境均能提供一致的用户体验。本文将深入探讨SSR的原理、主要框架以及它如何与现代前端技术栈相融合,同时讨论它的优缺点及未来发展趋势。
|
5月前
|
Java 关系型数据库 应用服务中间件
webgis Web 服务器端开发
webgis Web 服务器端开发
46 1
|
移动开发 前端开发 JavaScript
关于web项目在不同浏览器中的兼容问题及解决方式
关于web项目在不同浏览器中的兼容问题及解决方式
175 0
|
编译器 C语言 C++
采用QWebEngineView引擎设计web浏览器
采用QWebEngineView引擎设计web浏览器
589 0
采用QWebEngineView引擎设计web浏览器
|
数据采集 缓存 JavaScript
Web 应用客户端渲染和服务器端渲染的比较
Web 应用客户端渲染和服务器端渲染的比较
Web 应用客户端渲染和服务器端渲染的比较
|
Web App开发 数据采集 缓存
Web 应用服务器端渲染入门指南
Web 应用服务器端渲染入门指南
Web 应用服务器端渲染入门指南
下一篇
无影云桌面