NextJs - Error Handling （错误处理）

莓莓儿～

已于 2023-08-18 16:07:59 修改

阅读量1k

点赞数

文章标签： javascript 前端开发语言

于 2023-08-18 15:29:48 首次发布

本文链接：https://blog.csdn.net/fanfan_h/article/details/132362812

版权

Error.js 的作用

使用 error.js 文件规则，可以优雅地处理嵌套路由中的意外运行时错误。

在 React Error Boundary 中自动封装路由段及其嵌套子段。

使用文件系统层次结构来调整粒度，为特定网段量身定制错误 UI。

将错误隔离到受影响的网段，同时保持应用程序其他部分的功能。

添加功能，尝试在不重新加载整个页面的情况下从错误中恢复。

通过在路由段内添加 error.js 文件并导出 React 组件来创建错误用户界面：

// app/dashboard/error.tsx
'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

Error.js 的工作原理

error.js 会自动创建一个 React 错误边界，该边界会封装嵌套的子段或 page.js 组件。
从 error.js 文件导出的 React 组件将用作后备组件。
如果在错误边界内出现错误，则会包含错误并呈现回退组件。
当回退错误组件处于活动状态时，错误边界上方的布局会保持其状态并保持交互，而错误组件则可以显示从错误中恢复的功能。

从错误中恢复

错误的原因有时可能是暂时的。在这种情况下，只需再次尝试就能解决问题。
错误组件可以使用 reset() 函数提示用户尝试从错误中恢复。该函数执行后，将尝试重新渲染错误边界的内容。如果成功，回退错误组件将被重新渲染的结果所取代。

嵌套路由
通过特殊文件创建的 React 组件会以特定的嵌套层次结构呈现。
例如，一个嵌套路由有两个段，其中都包含 layout.js 和 error.js 文件，会以以下简化的组件层次结构呈现：

嵌套组件层次结构会影响整个嵌套路由中 error.js 文件的行为：
错误会向最近的父错误边界冒泡。这意味着 error.js 文件将处理其所有嵌套子段的错误。通过将 error.js 文件放置在路由嵌套文件夹的不同层级，可以实现更细粒度或更小粒度的错误用户界面。
error.js 界面不会处理同一段落中 layout.js 组件抛出的错误，因为错误边界嵌套在该布局组件中。

处理根布局中的错误

根 app/error.js 界面不会捕获在根 app/layout.js 或 app/template.js 组件中抛出的错误。
要专门处理这些根组件中的错误，可使用应用程序根目录中名为 app/global-error.js 的 error.js 变体。
与根 error.js 不同的是，global-error.js 的错误边界覆盖了整个应用程序，其回退组件会在激活时替换根布局。因此，必须注意 global-error.js 必须定义自己的 <html> 和 <body> 标记。
global-error.js 是粒度最小的错误用户界面，可视为整个应用程序的 "万能 "错误处理。它不太可能经常被触发，因为根组件的动态性通常较低，其他 error.js 界面会捕捉到大多数错误。
即使定义了 global-error.js，仍建议定义一个根 error.js，其后备组件将在根布局中呈现，其中包括全局共享的用户界面。

// app/global-error.tsx
'use client'
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

莓莓儿～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NextJs - Error Handling （错误处理）

使用 error.js 文件规则，可以优雅地处理嵌套路由中的意外运行时错误。在 React Error Boundary 中自动封装路由段及其嵌套子段。使用文件系统层次结构来调整粒度，为特定网段量身定制错误 UI。将错误隔离到受影响的网段，同时保持应用程序其他部分的功能。添加功能，尝试在不重新加载整个页面的情况下从错误中恢复。
复制链接

扫一扫