Windows端Microsoft Edge 95稳定版运行React App出现白屏及调用栈溢出错误

仅Windows 10设备的Microsoft Edge 95稳定版加载React应用时出现白屏，控制台仅抛出Uncaught RangeError: Maximum call stack size exceeded错误，其余浏览器、其他Edge版本、Mac端Edge 95均运行正常，BrowserStack等模拟工具无法复现，仅实体设备可复现。

• 调整babel编译配置，明确在targets字段中指定包含edge: 95，强制对该版本做针对性语法降级。Chromium 95 Win版本存在已知的模板字符串递归解析bug，可开启@babel/plugin-transform-template-literals的loose配置避免生成嵌套递归的字符串拼接代码：

{
  "plugins": [
    ["@babel/plugin-transform-template-literals", { "loose": true }]
  ]
}

• 排查项目中是否存在递归调用的边界判断逻辑依赖于navigator.userAgent，Win版Edge 95的UA字符串和Mac版、其他版本存在细微差异，可能导致边界判断失效进入死递归，建议替换为特性检测逻辑代替UA检测。
• 生产构建时关闭调试相关注入代码、sourcemap以及React DevTools关联逻辑，部分调试工具注入代码会和Win版Edge 95的React fiber递归调度逻辑冲突触发栈溢出，关闭后重新验证是否复现。
• 排查第三方依赖版本兼容性，react-router v6.0.x早期版本、styled-components v5.3.0~v5.3.2版本在Win版Chromium 95下存在已知的递归渲染bug，可升级到对应后续稳定小版本或者降级到兼容版本验证。
• 若上述方案均无法定位问题，可在应用入口处添加栈溢出错误捕获逻辑，打印完整调用栈缩小问题范围：

// 项目入口文件顶部添加监听
window.addEventListener('error', (e) => {
  if (e.error instanceof RangeError && e.error.message.includes('Maximum call stack size exceeded')) {
    console.error('溢出调用栈：', e.error.stack);
  }
})

内容的提问来源于stack exchange，提问作者Bashir Egeh