阅读 4039

前端重新部署后,领导跟我说页面崩溃了...

背景:

每次前端更新,重新部署后,用户还停留在更新之前的页面,当请求页面数据时,会导致页面白屏,报错信息如下:

Uncaught ChunkLoadError: Loading chunk {n} failed.

原因

每次更新后,用户端的html文件中的 js 和 css 名称就和服务器上的不一致导致,导致加载失败。

解决方案

1.对error事件进行监听,检测到错误之后重新刷新

      window.addEventListener(
        'error',
        function (event) {
          if (
            event.message &&
            String(event.message).includes('Loading chunk') &&
            String(event.message).includes('failed')
          ) {
            window.location.replace(window.location.href);
          }
        },
        true,
      );
复制代码

2.对window.console.error事件监听,效果同上

      window.console.error = function () {
        console.log(JSON.stringify(arguments), 'window.console.error'); // 自定义处理
      };
复制代码

3.其他方案

如:HTTP2.0推送机制 / fis3 构建 /webSocket通知等,未尝试

注:有好的方案可以在下面评论讨论哈

本篇收录在个人工作记录专栏中,专门记录一些比较有意思的场景和问题。

后记

在之后的某一天,该问题再次暴露出来。源于一位同事在使用过程中,会不定页面的出现报错情况,报错如下:

image.png

很明显,还是资源加载问题,按道理讲应该可以走入我们逻辑进行刷新。但是当时用户反馈:刷新也不能解决问题,强制刷新才可以解决。

分析:刷新为什么不能解决问题?其实还是因为当用户第一次因为网络原因未成功加载到资源,后续刷新均走的缓存,因此让用户手动去刷新解决不了问题。

解决方案:

不知道大家发现没有,上面对error事件进行监听代码中,并没有包括css失败的情况,因此匹配上css加载失败的情况即可。

更新代码如下:

      window.addEventListener(
        'error',
        function (event) {
          if (
            event.message &&
            String(event.message).includes('chunk') &&
            String(event.message).includes('failed')
          ) {
            window.location.replace(window.location.href);
          }
        },
        true,
      );
复制代码

可能有人会问,既然刷新解决不了问题,那window.location.replace(window.location.href)可以解决吗?

其实刷新的方法有很多,根据MDN的说法,Location.replace() 方法会以给定的URL替换当前的资源,因此可解决此问题。

文章分类
前端
文章标签