如何使用默认的 React 错误边界在 NextJS 13 中全局处理服务器端错误

Question

我对 NextJs 非常陌生，我刚刚开始直接从最新版本开始使用。 我发现它非常有趣和令人愉快，但我仍然对某些方面感到困惑，而这些方面在其他架构中对我来说更清晰。

目前我正在尝试了解默认的错误边界以及如何利用它。

我正在构建一个完整的堆栈应用程序，我想知道如何全局处理错误。 我曾经在其他框架中使用类似 Error 中间件的东西，但这里似乎有点不同。

我从官方文档中了解到，NextJs 实现了 React Error Boundary，并且在添加特殊文件 error.js （按照命名约定）后，所有页面都包含在其上

到目前为止一切都清楚了，您可以像魅力一样处理客户端错误，但是服务器端呢？

深入阅读文档我发现了这一点： “如果在数据获取期间或服务器组件内部抛出错误，Next.js 会将生成的 Error 对象转发到最近的 error.js”

所以我开始进行一些测试，但似乎它没有按我的预期工作。

举个例子：

假设您有一个从数据库检索一些数据的服务器端功能。 该函数被包装在 try-cacth 内，以防止出现未处理的异常。

现在当我来到客户端并写下类似的内容时：

 const Home=()=>{ ... throw new Error('Error') ... return{} }

它工作正常，我的自定义 error.js 是 renderend，因为它包含在 React ErrorBoundary 中。

但是

如果 OI 尝试这样做：

`const Home=()=>{
     ...
     functionErrorTrigger(){
         throw new Error('Error')
     }

     ...
     return{
         <button onClick={ErrorTrigger}>ErrorTrigger<button>
     }
}`

它不起作用，错误页面没有显示，并且异常没有得到妥善处理。

在这里，我尝试模拟来自我的服务器的 Error500。 我同意应用程序没有崩溃，但如果出现问题，我需要通知最终用户，以避免无用的重试。

我试图找出我在这里缺少的东西..绝对是一些愚蠢的东西

Answer 1

尝试将

error.js

更改为

not-found.js

，而不是抛出错误，而是添加：

import { notFound } from 'next/navigation';

到文件顶部并使用：

functionErrorTrigger() {
  notFound()
}

https://nextjs.org/docs/app/api-reference/functions/not-found https://nextjs.org/docs/app/api-reference/file-conventions/not-found

不幸的是，它似乎没有接受错误道具，所以你无法真正通知错误的类型，但如果你只是想要一个一般的“出了问题”，这是我发现的唯一解决方法。

Answer 2

您应该使用

global-error.js

文件。一个全局有效的特殊

error.js

文件。

https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-layouts

Answer 3

因此，如果您需要在服务器端处理错误，有一个包“next-rsc-error-handler”可以提供帮助

https://www.npmjs.com/package/next-rsc-error-handler