首先排查白屏这个问题先默认在主流场景下，这个可以运行，并且实现目标功能，但是在特定的场景出现了白屏问题。
Javascript代码错误
- 原本有属性的对象，后端在特定场景下传了null
- 异步组件，因为交互时延等情况，出现了未被赋值前就被使用的场景
以上场景导致null.attr，由此导致页面崩溃，如果是在渲染前就出现该问题，可能会导致白屏
通过console进行排查，一般以上问题的报错都是调某个attr之前出现undefined、null
解决+预防办法：
- obj?.attr，可以解决大部分的问题，最好上ts，对于部分场景ts会提示当前对象有取undefined的可能，预防出现忘记打?的情况，但是最好对象取值的case都打上
- errorBoundary包裹组件，组件一旦出现意外的错误，冒泡上去，被errorBoundary捕获，直接替换成空div，哪怕组件暂时不展示，也比整个页面陷入白屏要好
资源版本错误
- 用户没有更新，走到了旧版本上，但是旧版本文件在项目更新迭代打包的过程中已经丢失了，导致进入白屏
一般以上错误console也会进行提示，会显示chunk-xxxx.js找不到了等信息
解决+预防办法：
- 进行错误捕获，如果出现对应的错误，就将对应的文件进行替换和刷新
- 进行版本更新弹窗，提示用户代码发版，需要刷新更新来使用最新功能，提醒用户不要走到旧代码上
- CDN故障、网络不稳定导致关键CSS/JS、PNG文件加载失败
一般以上问题会出现接口报错，后端的接口状态码显示拿不到这个资源
解决+预防办法：
- 做好兜底的图片，如果远程的资源加载不出来，就展示兜底的图片，或者直接替换成空div
兼容性问题
- 使用的浏览器或者移动端太老，导致系统代码不兼容
解决+预防办法：
这个场景比较复杂，兼容性一直是前端难题之一，核心处理思路是：先明确兼容边界 → 用工具自动兼容 → 核心功能降级 → 极端情况友好提示
- 首先需要明确的是兼容范围，通常是
> 1% last 2 versions not dead
- 常见的两种不兼容主要是es6和css:es6可以配置babel，转成es5;css可以使用postcss里面的autoprefixer
- 部分API不支持，比如IntersectionObserver的情况，代码里面做好预备方案，当不支持IntersectionObserver，采用监听滚动scroll等降级方案
Q: 如何获取浏览器或者移动端对象？
- window.navigator.userAgent
其他预防和问题最小化方法：
- 建立线上监控系统，对于关键模块，都打入展示上报埋点，如果出现白屏，则会出现埋点数据异常
- 代码灰度，在灰度的过程中积极观察埋点数据，如果出现异常及时进行代码回滚，使得损失最小化
