修复

我们最初的修复是升级到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>