error.js

error 文件允许您处理意外的运行时错误并显示备用 UI。

'use client' // 错误边界必须是客户端组件

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // 将错误记录到错误报告服务
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>出错了！</h2>
      <button
        onClick={
          // 尝试通过重新渲染该片段来恢复
          () => reset()
        }
      >
        重试
      </button>
    </div>
  )
}

'use client' // 错误边界必须是客户端组件

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // 将错误记录到错误报告服务
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>出错了！</h2>
      <button
        onClick={
          // 尝试通过重新渲染该片段来恢复
          () => reset()
        }
      >
        重试
      </button>
    </div>
  )
}

error.js 将路由片段及其嵌套子项包裹在 React 错误边界中。当边界内抛出错误时，error 组件会显示为备用 UI。

须知:

React 开发者工具允许您切换错误边界来测试错误状态。

如果您希望错误冒泡到父级错误边界，可以在渲染 error 组件时 throw 错误。

参考

属性

`error`

传递给 error.js 客户端组件的 Error 对象实例。

须知: 在开发环境下，转发到客户端的 Error 对象会被序列化，并包含原始错误的 message 以便调试。但在生产环境中，此行为会有所不同，以避免将错误中可能包含的敏感信息泄露给客户端。

`error.message`

从客户端组件转发的错误会显示原始 Error 消息。
从服务端组件转发的错误会显示带有标识符的通用消息。这是为了防止泄露敏感细节。您可以使用 errors.digest 下的标识符来匹配对应的服务端日志。

`error.digest`

自动生成的错误哈希值。可用于匹配服务端日志中的对应错误。

`reset`

有时错误的起因可能是暂时的。在这些情况下，重试可能会解决问题。

错误组件可以使用 reset() 函数提示用户尝试从错误中恢复。执行时，该函数会尝试重新渲染错误边界的内容。如果成功，备用错误组件将被重新渲染的结果替换。

'use client' // 错误边界必须是客户端组件

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>出错了！</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  )
}

'use client' // 错误边界必须是客户端组件

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>出错了！</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  )
}

示例

全局错误

虽然不常见，但您可以使用位于应用根目录的 global-error.js 来处理根布局或模板中的错误，即使在使用国际化时也是如此。全局错误 UI 必须定义自己的 <html> 和 <body> 标签。此文件在激活时会替换根布局或模板。

'use client' // 错误边界必须是客户端组件

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    // global-error 必须包含 html 和 body 标签
    <html>
      <body>
        <h2>出错了！</h2>
        <button onClick={() => reset()}>重试</button>
      </body>
    </html>
  )
}

'use client' // 错误边界必须是客户端组件

export default function GlobalError({ error, reset }) {
  return (
    // global-error 必须包含 html 和 body 标签
    <html>
      <body>
        <h2>出错了！</h2>
        <button onClick={() => reset()}>重试</button>
      </body>
    </html>
  )
}

使用自定义错误边界优雅地恢复错误

当客户端渲染失败时，显示最后已知的服务端渲染 UI 可以提供更好的用户体验。

GracefullyDegradingErrorBoundary 是一个自定义错误边界的示例，它捕获并保留错误发生前的当前 HTML。如果发生渲染错误，它会重新渲染捕获的 HTML 并显示一个持久通知栏来通知用户。

'use client'

import React, { Component, ErrorInfo, ReactNode } from 'react'

interface ErrorBoundaryProps {
  children: ReactNode
  onError?: (error: Error, errorInfo: ErrorInfo) => void
}

interface ErrorBoundaryState {
  hasError: boolean
}

export class GracefullyDegradingErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  private contentRef: React.RefObject<HTMLDivElement>

  constructor(props: ErrorBoundaryProps) {
    super(props)
    this.state = { hasError: false }
    this.contentRef = React.createRef()
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true }
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    if (this.props.onError) {
      this.props.onError(error, errorInfo)
    }
  }

  render() {
    if (this.state.hasError) {
      // 渲染当前 HTML 内容而不进行水合
      return (
        <>
          <div
            ref={this.contentRef}
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: this.contentRef.current?.innerHTML || '',
            }}
          />
          <div className="fixed bottom-0 left-0 right-0 bg-red-600 text-white py-4 px-6 text-center">
            <p className="font-semibold">
              页面渲染过程中发生错误
            </p>
          </div>
        </>
      )
    }

    return <div ref={this.contentRef}>{this.props.children}</div>
  }
}

export default GracefullyDegradingErrorBoundary

'use client'

import React, { Component, createRef } from 'react'

class GracefullyDegradingErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
    this.contentRef = createRef()
  }

  static getDerivedStateFromError(_) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    if (this.props.onError) {
      this.props.onError(error, errorInfo)
    }
  }

  render() {
    if (this.state.hasError) {
      // 渲染当前 HTML 内容而不进行水合
      return (
        <>
          <div
            ref={this.contentRef}
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: this.contentRef.current?.innerHTML || '',
            }}
          />
          <div className="fixed bottom-0 left-0 right-0 bg-red-600 text-white py-4 px-6 text-center">
            <p className="font-semibold">
              页面渲染过程中发生错误
            </p>
          </div>
        </>
      )
    }

    return <div ref={this.contentRef}>{this.props.children}</div>
  }
}

export default GracefullyDegradingErrorBoundary

版本历史

版本	变更
`v15.2.0`	在开发环境中也显示 `global-error`。
`v13.1.0`	引入 `global-error`。
`v13.0.0`	引入 `error`。

错误处理

了解如何显示预期错误并处理未捕获异常。

错误处理

On this page