前端项目脚本加载失败:net:: ERR_HTTP2_PROTOCOL_ERROR 200

简介: 前端项目脚本加载失败:net:: ERR_HTTP2_PROTOCOL_ERROR 200

背景


接用户反映:线上系统使用域名访问前端项目时,一片空白,控制台报错了。


  • 火狐浏览器:

指向“www.abc.com/static/js/c…<script> 加载失败

image.png

这其实没有提供任何有用的信息。。换个浏览器试试。

  • Edge浏览器:

net:: ERR_HTTP2_PROTOCOL_ERROR 200

这个错误就有点意思啦,提示是跟 HTTP2 有关的问题。


网上查了下发现会有不同的原因导致这个错误信息,我这里的解决方案并不是普适的,但是确实解决了我的问题,真正重要的是要冷静分析,这个分析的过程才重要。

Note:部署架构是这样的:域名所在的服务器A通过内网IP代理了另一台服务器B(也具有公网IP),这个前端服务部署在服务器B上。


分析原因


重启 Nginx 试试?


其实,这时候,应该先冷静下来;重启是一个选项,但应该作为不得已的一个选择,经过认真调查、分析后,还是不能确定问题的原因,那么可以进行重启操作。

需要确定几个问题:


  1. Nginx 的配置有没有修改?


  1. Nginx 的配置如果被更新过,有没有重新加载使其生效?


  1. Nginx 的版本有没有被动过?(通过nginx -V查看nginx的版本信息,以及与http2相关的模块);


  1. 最近有没有新功能的部署?


  1. HTTPS 证书是不是过期了?(HTTP2要求在SSL下工作)


经过确认,发现以上问题答案都是否定的。。显然,是线上服务的运行环境发生了变化。

既然是运行环境发生了变化,我们首先检查了主机的各项指标:CPU、内存、磁盘等。当 df -h 查看磁盘空间时,问题暴露了:磁盘爆了(╥╯^╰╥)

image.png

那么问题来了,为啥磁盘会爆,既然是跟 Nginx 相关的问题,那么第一步应先查看 Nginx 的错误日志。


# 查看nginx的错误日志
vi /var/log/nginx/error.log

以下是 Nginx 错误日志给出的部分错误信息,关键信息:(28: No space left on device),没空间啦~~

image.png

2021/11/24 11:10:08 [crit] 23967#0: *82293762 pwritev() "/var/lib/nginx/tmp/proxy/2/32/0000543322" failed (28: No space left on device) while reading upstream, client: 110.179.80.101, server: www.abc.com, request: "GET /static/js/app.5033a65a.js HTTP/2.0", upstream: "http://192.168.0.36:80/static/js/app.5033a65a.js", host: "www.abc.com", referrer: "www.abc.com/"


问题解决


因为没有启用数据盘,这台主机上的服务用户量也不是很多,现在所有服务都在系统盘运行。那么清理一些服务日志,腾出空间即可。


问题总结


  1. 论基础设施监控的重要性,Prometheus监控告警可以搞起来了。。


  1. 经过以上排查,发现导致这个问题的原因似乎变得不那么重要了,反而是分析这个问题的过程才是关键。


这就像我们看到刘谦入驻 B站 开始解密当年的魔术,知道真相的我们一开始还是有点失望的:原来这么简单啊~~。


电影《致命魔术》中有这样一句话:“魔术的秘密没什么了不起,变魔术的技巧才重要。”


这也正是很多网友看完刘谦视频后最大的感受 —— 原理不是魔术的精髓,表演才是。

当了解到真正的魔术精神后,魔术的秘密便不再重要。共勉~


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
6天前
|
缓存 前端开发 搜索推荐
如何优化前端性能:提升网页加载速度的5个技巧
在当今互联网时代,网页加载速度是用户体验和搜索引擎排名的关键因素之一。本文将介绍5个有效的技巧,帮助前端开发人员优化网页性能,提升用户体验。
|
24天前
|
资源调度 前端开发 测试技术
前端工程化实践:从零搭建现代化项目构建流程
【4月更文挑战第6天】本文介绍了前端工程化的概念和重要性,包括模块化、自动化、规范化和CI/CD。接着,讨论了选择合适的工具链,如包管理器、构建工具和测试框架。然后,详细阐述了如何从零开始搭建一个基于React的现代化项目构建流程,涉及初始化、代码规范、测试、CSS处理、代码分割和CI/CD配置。最后,提到了持续优化与迭代的方向,如性能优化、类型检查和微前端。通过这样的实践,开发者可以提升开发效率和代码质量,为项目长远发展奠定基础。
30 0
|
25天前
|
缓存 前端开发 UED
前端常见的HTTP状态码
【4月更文挑战第6天】HTTP状态码是服务器对请求的响应状态,分为1xx(处理中)、2xx(成功)、3xx(重定向)、4xx(客户端错误)和5xx(服务器错误)五大类。常见的如200(成功)、404(未找到)、500(服务器内部错误)。理解这些状态码有助于优化前端应用的请求处理和调试。
11 1
|
25天前
|
缓存 监控 前端开发
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度成为用户体验的重要指标之一。本文将介绍10个有效的技巧,帮助前端开发人员优化网页性能,提升用户的访问体验。
|
11天前
|
存储 开发框架 前端开发
前端框架EXT.NET Dotnet 3.5开发的实验室信息管理系统(LIMS)成品源码 B/S架构
发展历史:实验室信息管理系统(LIMS),就是指通过计算机网络技术对实验的各种信息进行管理的计算机软、硬件系统。也就是将计算机网络技术与现代的管理思想有机结合,利用数据处理技术、海量数据存储技术、宽带传输网络技术、自动化仪器分析技术,来对实验室的信息管理和质量控制等进行全方位管理的计算机软、硬件系统,以满足实验室管理上的各种目标(计划、控制、执行)。
|
3天前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
4天前
|
监控 前端开发 jenkins
Jenkins在前端项目持续部署中的应用
【4月更文挑战第29天】本文探讨了Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程。前端持续部署涉及代码提交、构建、测试和部署四个步骤。实现过程中需配置代码仓库、构建、测试和部署任务,安装相关插件并确保环境一致性。注意事项包括代码质量控制、环境一致性、监控预警和安全管理。通过Jenkins,可提升前端开发效率和质量,但需不断学习以应对技术发展。
|
4天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
5天前
|
缓存 前端开发 算法
前端需要加载一个大体积的文件时,可以这么优化
前端需要加载一个大体积的文件时,可以这么优化
|
5天前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟