React SPA脚本置于body标签内仍偶现document.body未定义错误求解决方案

你当前把业务脚本放在body末尾的写法，正常场景下执行时DOM已经解析完成，document.body必然存在，极少数报错的核心诱因和Chrome系浏览器的独有机制相关：

• 第一类是Chrome会话恢复/崩溃恢复场景：你猜想的用户关闭浏览器重启后恢复标签页、安卓WebView被系统回收后恢复的场景是完全成立的。Chrome的恢复机制会优先加载已缓存的JS资源，再继续解析未完成的HTML结构，很容易出现JS已执行、但body还未完成解析的竞态，这也匹配你报错仅出现在Windows Chrome、安卓Chrome WebView的特征。
• 第二类是极少见的HTML传输截断场景：用户网络异常导致HTML只传输到head或者body开头的部分，但单独请求的application.js已经完整加载，浏览器会执行已加载的JS，此时document.body为null。

你想到的两个方案都能解决问题，但都有明显的副作用：

• 动态加载script会额外增加业务脚本的加载时机，拖慢首屏性能
• 等待window.onload再渲染React会让首屏渲染时间大幅增加，因为window.onload需要等所有图片、样式、第三方资源全部加载完成才触发，用户白屏时间会明显变长，完全没必要。

不需要修改现有资源加载逻辑，也不影响正常场景性能，通过三层兜底即可100%杜绝该错误：

1. 入口渲染兜底：优先判断根容器存在再执行渲染，不存在就等DOMContentLoaded触发后再渲染，DOMContentLoaded在DOM解析完成就触发，远早于window.onload：

const renderApp = () => {
  const rootNode = document.querySelector('#root');
  if (rootNode) ReactDOM.render(<Popup />, rootNode);
};
// 优先直接执行，正常场景不会有延迟
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', renderApp);
} else {
  renderApp();
}

2. DOM操作点兜底：所有直接操作document.body的位置，先判断目标节点存在再操作，不存在就用MutationObserver监听DOM结构变化，等body生成后再执行操作，同时要加清理逻辑避免内存泄漏：

const Popup = () => {
  useEffect(() => {
    const div = document.createElement('div')
    div.textContent = 'hello world'

    let observer = null;
    const appendDiv = () => {
      if (document.body) {
        document.body.appendChild(div)
        observer?.disconnect()
      }
    }
    if (document.body) {
      appendDiv()
    } else {
      observer = new MutationObserver(appendDiv)
      observer.observe(document.documentElement, { childList: true })
    }

    return () => {
      div.remove()
      observer?.disconnect()
    }
  }, [])
}

3. 异常上报过滤兜底：如果遇到用户直接在页面加载完成前关闭页面的场景，这类无实际影响的错误可以直接在Rollbar里配置过滤规则，避免占用错误上报配额。

你提到的「用户关闭浏览器重启后已加载代码被截断、body准备完成前就执行」的场景100%存在，Chrome的公开文档里明确提到会话恢复场景下，JS执行和DOM解析的顺序和正常加载场景不一致，会出现JS提前执行的情况，你遇到的低频次、仅Chrome系环境报错的特征完全匹配该场景。

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