iOS上的Next.js:未能在“节点”上执行“insertBefore”; NotFoundError insertBefore([本机代码])无法在此处找到对象

mwyxok5s  于 2022-12-01  发布在  iOS
关注(0)|答案(1)|浏览(209)

我想分享这个错误(和修复),因为我花了几个星期的时间寻找这个问题的答案,这个问题只影响我们的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.打开旧选项卡或浏览器并导航回浏览器和选项卡

xwbd5t1u

xwbd5t1u1#

修复

我们最初的修复是升级到Next.js 13和React 18,在Sentry中观察到的错误明显减少。但是,这并没有完全修复错误。我们还尝试了一个修复,建议在_app.js中禁用Google Translate,这也没有起作用。
我们还创建了一个custom_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 --->
</>

此修复是将布局 Package 在单个DOM节点中:
Layout.js

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

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

     <Footer/>
</div>

相关问题