关于服务器端渲染的 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.

91cda3e0db515157f56dacf18c2cccdd.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 不响应客户端请求:

442b255d9e91c8a846b44d3b0e8e5e56.png

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

相关文章
|
2月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
68 0
|
2月前
|
Rust 安全 开发者
惊爆!Xamarin 携手机器学习,开启智能应用新纪元,个性化体验与跨平台优势完美融合大揭秘!
【8月更文挑战第31天】随着互联网的发展,Web应用对性能和安全性要求不断提高。Rust凭借卓越的性能、内存安全及丰富生态,成为构建高性能Web服务器的理想选择。本文通过一个简单示例,展示如何使用Rust和Actix-web框架搭建基本Web服务器,从创建项目到运行服务器全程指导,帮助读者领略Rust在Web后端开发中的强大能力。通过实践,读者可以体验到Rust在性能和安全性方面的优势,以及其在Web开发领域的巨大潜力。
34 0
|
2月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
27 0
|
2月前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
38 0
|
2月前
|
JavaScript 前端开发 UED
服务器端渲染新浪潮:用Vue.js和Nuxt.js构建高性能Web应用
【8月更文挑战第30天】在现代Web开发中,提升应用性能和SEO友好性是前端开发者面临的挑战。服务器端渲染(SSR)能加快页面加载速度并改善搜索引擎优化。Vue.js结合Nuxt.js提供了一个高效框架来创建SSR应用。通过安装`create-nuxt-app`,可以轻松创建新的Nuxt.js项目,并利用其自动路由功能简化页面管理。Nuxt.js默认采用SSR模式,并支持通过`asyncData`方法预取数据,同时提供了静态站点生成和服务器端渲染的部署选项,显著提升用户体验。
54 0
|
24天前
|
Cloud Native Java 编译器
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
随着云计算技术的不断发展,云服务商们不断推出高性能、高可用的云服务器实例,以满足企业日益增长的计算需求。阿里云推出的倚天实例,凭借其基于ARM架构的倚天710处理器,提供了卓越的计算能力和能效比,特别适用于云原生、高性能计算等场景。然而,有的用户需要将传统基于x86平台的应用迁移到倚天实例上,本文将介绍如何将基于x86架构平台的应用迁移到阿里云倚天实例的服务器上,帮助开发者和企业用户顺利完成迁移工作,享受更高效、更经济的云服务。
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
|
22天前
|
编解码 前端开发 安全
通过阿里云的活动购买云服务器时如何选择实例、带宽、云盘
在我们选购阿里云服务器的过程中,不管是新用户还是老用户通常都是通过阿里云的活动去买了,一是价格更加实惠,二是活动中的云服务器配置比较丰富,足可以满足大部分用户的需求,但是面对琳琅满目的云服务器实例、带宽和云盘选项,如何选择更适合自己,成为许多用户比较关注的问题。本文将介绍如何在阿里云的活动中选择合适的云服务器实例、带宽和云盘,以供参考和选择。
通过阿里云的活动购买云服务器时如何选择实例、带宽、云盘
|
20天前
|
弹性计算 运维 安全
阿里云轻量应用服务器和经济型e实例区别及选择参考
目前在阿里云的活动中,轻量应用服务器2核2G3M带宽价格为82元1年,2核2G3M带宽的经济型e实例云服务器价格99元1年,对于云服务器配置和性能要求不是很高的阿里云用户来说,这两款服务器配置和价格都差不多,阿里云轻量应用服务器和ECS云服务器让用户二选一,很多用户不清楚如何选择,本文来说说轻量应用服务器和经济型e实例的区别及选择参考。
阿里云轻量应用服务器和经济型e实例区别及选择参考
|
21天前
|
机器学习/深度学习 存储 人工智能
阿里云GPU云服务器实例规格gn6v、gn7i、gn6i实例性能及区别和选择参考
阿里云的GPU云服务器产品线在深度学习、科学计算、图形渲染等多个领域展现出强大的计算能力和广泛的应用价值。本文将详细介绍阿里云GPU云服务器中的gn6v、gn7i、gn6i三个实例规格族的性能特点、区别及选择参考,帮助用户根据自身需求选择合适的GPU云服务器实例。
阿里云GPU云服务器实例规格gn6v、gn7i、gn6i实例性能及区别和选择参考
|
14天前
|
弹性计算 人工智能 安全
阿里云推出第九代ECS实例,最高提升30%性能
阿里云推出第九代ECS实例,最高提升30%性能
120 14
下一篇
无影云桌面