我想分享这个错误(和修复),因为我花了几个星期的时间寻找这个问题的答案,这个问题只影响我们的iOS移动用户(和少量Android用户)
这个错误也给我们的用户带来了500个应用程序错误。还有其他人在Next.js中发现过类似的问题吗?
下一版本:
下一个. js 12(带有React+17)和下一个. js 13(带有React18)
通过Sentry跟踪部分错误堆栈:
NotFoundError: The object can not be found here.
at insertBefore([native code])
at e(/_next/static/chunks/framework-847cdbe141f8ae13.js:9:89722)
...
和
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before the new node is to be inserted is not a child of this node.
at e(/_next/static/chunks/framework-847cdbe141f8ae13.js:9:89710)
...
浏览器版本
此错误将在我们的Next.js应用中触发一个毁灭性的500错误,根据我们的哨兵日志,仅影响iOS用户v15〉和Android Chrome上的一些Android(v12 & v13)用户:
观察到的错误触发器重现(仅限移动设备)
1.快速导航到Nextjs应用程序
1.从第三方来源(即社交媒体或谷歌搜索链接)导航到Nextjs应用程序
1.打开旧选项卡或浏览器并导航回浏览器和选项卡
1条答案
按热度按时间xwbd5t1u1#
修复
我们最初的修复是升级到Next.js 13和React 18,在Sentry中观察到的错误明显减少。但是,这并没有完全修复错误。我们还尝试了一个修复,建议在
_app.js
中禁用Google Translate,这也没有起作用。我们还创建了一个custom_error. js页面,其中包含一个用于重新加载页面的按钮,因为解决方法之一是刷新用户所在的页面。
最终的修复是我们layout.js应用根节点中的顶层布局有一个React片段(应该支持片段创建节点),但Next.js将其视为4个根节点(或者没有单个根节点):
_app.js
Layout.js
此修复是将布局 Package 在单个DOM节点中:
Layout.js