前端版本更新，错误监控，解决方案 error / unhandledrejection，同步异步错误监控方案

有一个 web 项目，使用了 vite + vue 的框架，最近把一些组件改成了异步加载，使用 defineAsyncComponent 引用。

先不说性能有没有提升，但是导致了一个问题，就是每次发布新版本后，静态资源 js 的哈希值变化了，在已经打开的网页上就无法加载旧的 js 文件了。

所以我们需要一个机制，监听了有版本变化，然后提示用户刷新页面再继续使用。

解决方案

使用 window.addEventListener('error', fn) 监听同步的错误

使用 window.addEventListener('unhandledrejection', fn) 监听异步的错误

在监听之后我们还要细化一下，是否是因为发版导致的错误，对于异步监听可以使用  e?.reason?.message 判断，比如判断 message 是否包含  Failed to fetch dynamically imported module 字样，如果是，就使用 alert 给用户一个提示。

使用 alert 是因为这是个不需要加载任何资源的浏览器的原生方法，如果你要搞一个漂亮的弹框，这个弹框的资源也得加载，可以但是没必要

但是这种方案其实对于同步的错误，不太好区分是因为发版本导致的还是其他的普通的业务的报错，所以我们可以优化一下这个方案。

就是在每次发版的时候需要更新一下服务端资源的版本号，比如在 public 目录下新建一个 json 文件存放版本号，或者使用 package.json 里面的 version，需要注意的是，每次发布新版本都要更新这个版本号

在页面加载的时候，把当前页面的版本号同步的加载并记录下来，在 main.ts 中如果监控到任何的error，我们对比一下当前版本号和服务端的版本号是否一致，如果不一致，提示用户刷新页面。