您的当前位置：首页 NextJs - Error Handling （错误处理）

NextJs - Error Handling （错误处理）

来源：榕意旅游网

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/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>
  )
}

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文