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

背景：

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

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通知等，未尝试

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

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

后记

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

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

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

解决方案：

不知道大家发现没有，上面对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替换当前的资源，因此可解决此问题。

完