如何解决即使在 <body> 标签中加载了脚本,document.body 也未定义
我们在大规模的 React SPA 中基本上有这个:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/application.js"></script>
<script src="a-third-party-remote-script.js"></script>
<script>var configFor3rdPartyStuff = {keyvalstuff}</script>
</body>
</html>
在应用程序内部,我们可能会这样做(在一些深度嵌套的导入中):
const Popup = () => {
useEffect(() => {
const div = document.createElement('div')
div.textContent = 'hello world'
document.body.appendChild(div)
},[])
}
ReactDOM.render(<Popup />,document.querySelector('#root'))
document.body
出现的时间超过 99%,但在少数情况下(2 个月内 document.body 似乎是null,因为 rollbar 正在我们执行 document.body.appendChild(div)
的地方捕获并记录错误。这是因为我们需要等待 window.onload
事件吗?还是别的什么?
我想到了两种可能的解决方案。一种是在 script
之后以编程方式动态加载 window.onload
元素。另一种是在应用入口点内等待 window.onload
,使 onload 回调执行 ReactDOM.render...
。由于我无法重现此问题,因此我不确定这是解决方案。您认为理想的架构应该怎么做才能避免这种错误?
到目前为止,该错误似乎只发生在 Windows 版 Chrome 和 Android 版 Chrome Mobile WebView 上(如果这有区别的话)。
是否有可能客户在应用程序仍在加载时关闭浏览器,然后当他们重新打开应用程序时,加载的代码运行,但可能会被切断,并且它在主体准备好之前运行?我不这么认为,而是尝试跳出框框思考。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。