iOS 上的 Next.js：无法在 \'Node\' 上执行 \'insertBefore\'； NotFoundError insertBefore([native code]) 这里找不到对象答案

【问题标题】：Next.js on iOS: Failed to execute 'insertBefore' on 'Node'; NotFoundError insertBefore([native code]) The object can not be found hereiOS 上的 Next.js：无法在 \'Node\' 上执行 \'insertBefore\'； NotFoundError insertBefore([native code]) 这里找不到对象
【发布时间】：2022-11-30 20:42:51
【问题描述】：

我想分享这个错误（和修复），因为我花了数周时间寻找这个问题的答案，这个问题只影响我们的 iOS 移动用户（以及少量的 Android 用户）

此错误还在我们的 Nextjs 应用程序上为我们的用户引发了毁灭性的 500 应用程序错误。有没有其他人在 Next.js 中观察到类似的问题？

Nextjs 版本：

Next.js 12（带 React +17）和 Next.js 13（带 React 18）

通过哨兵的部分错误堆栈跟踪：

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 错误，根据我们的 Sentry 日志，仅影响 iOS 用户 v15 > 和一些 Android（v12 和 v13）用户在 Android Chrome 上：

观察到的错误触发器重现（仅限移动设备）

快速导航到 Nextjs 应用程序
从第三方来源（即社交媒体或谷歌搜索链接）导航到 Nextjs 应用程序
打开陈旧的选项卡或浏览器并导航回浏览器和选项卡

【问题讨论】：

标签： ios reactjs next.js sentry http-status-code-500

【解决方案1】：

使固定

我们最初的修复是升级到 Next.js 13 和 React 18，它们在 Sentry 中观察到的错误明显减少。但是，这并没有完全修复错误。我们还尝试了一个建议在_app.js 中禁用谷歌翻译的修复程序，这也没有用。

我们还创建了一个带有按钮的自定义 _error.js 页面以重新加载页面，因为解决方法之一是刷新用户所在的页面。

最终的解决方法是我们的 layout.js 应用程序根节点中的顶级布局有一个 React 片段（应该支持片段创建节点）但 Next.js 将其视为 4 个根节点（或没有单个根节点）节点）：

_app.js

<Layout>
    <ErrorBoundary>
        <Component {...pageProps} />
    </ErrorBoundary>
</Layout>

Layout.js

 <> <!-- should be component root node? --->           
    <Header /> <!-- root node --->

    <main className="root" role="main"> <!-- root node --->
        <Breadcrumb />
        {children}
     </main>
            
     <NewsletterSignup /> <!-- root node --->

     <Footer /> <!-- root node --->
</>

此修复是将我们的布局包装在单个 DOM 节点中：

Layout.js

<div className={Style.wrapper}> <!-- root node --->           
    <Header /> 

    <main className="root" role="main">
        <Breadcrumb />
        {children}
     </main>
            
     <NewsletterSignup /> 

     <Footer/>
</div>

【讨论】：