记一次 iOS 环境 H5 页面突然白屏

背景

在 202x 年的某一天，接到用户反馈，某个页面在新版本的 iOS 系统中突然无法打开，呈现白屏状态。

排查

接到反馈后，立即分析了前端日志，定位到此问题只会出现在新系统版本的 iOS 用户中。

进一步分析前端错误日志，发现错误源自一个全局变量的冲突：新版 iOS 系统的 Safari 浏览器中新增了一个全局变量 browser，而旧项目中也使用了同名变量来挂载一些全局可用的值。这一命名冲突导致了JavaScript 运行时错误，从而引发了页面白屏。

Safari 控制台：

Safari 控制台

Chrome 控制台：

Chrome 控制台

解决方案

临时修复

为了快速恢复用户体验，首先在代码中做了一个临时的热修复。通过检测 iOS 版本，暂时兼容了对 browser 变量的使用，从而避免冲突。

下次迭代

针对使用变量 browser 的地方进行小规模代码重构，将项目中使用的 browser 变量重命名为一个不太可能引发冲突的名称：<业务名称>_<模块>_BROWSER，并更新了所有相关的代码引用。

预防措施

避免关键字

意识到命名冲突的潜在风险，加强了代码审查流程，确保在代码中避免使用可能与系统保留关键字冲突的变量名称，并且制定一个全局变量命名规范。

持续监控

为了及时发现和响应类似问题，在项目中引入了更完善的监控机制。并且在系统进行大更新的节点，重点关注。