Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

错误处理

本文档解释了如何处理开发、服务器端和客户端错误。

开发阶段的错误处理

在 Next.js 应用的开发阶段出现运行时错误时,你将遇到一个遮罩层。它是覆盖网页的模态框。仅在使用 next dev 通过 pnpm devnpm run devyarn devbun dev 运行开发服务器时可见,在生产环境中不会显示。修复错误将自动关闭遮罩层。

以下是遮罩层的示例:

开发模式下遮罩层的示例

服务器错误处理

Next.js 默认提供静态的 500 页面来处理应用中发生的服务器端错误。你也可以通过创建 pages/500.js 文件来自定义此页面

应用中的 500 页面不会向应用用户显示具体错误。

你还可以使用 404 页面来处理特定的运行时错误,如 文件未找到

客户端错误处理

React 错误边界是一种优雅的方式,可以处理客户端的 JavaScript 错误,使应用的其他部分继续工作。除了防止页面崩溃,它还允许你提供自定义的备用组件,甚至记录错误信息。

要在 Next.js 应用中使用错误边界,你必须创建一个类组件 ErrorBoundary,并在 pages/_app.js 文件中包装 Component 属性。该组件将负责:

  • 在抛出错误后渲染备用 UI
  • 提供重置应用状态的方法
  • 记录错误信息

你可以通过扩展 React.Component 来创建 ErrorBoundary 类组件。例如:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
 
    // 定义一个状态变量来跟踪是否存在错误
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // 更新状态,以便下一次渲染将显示备用 UI
 
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // 你可以在此处使用自己的错误日志服务
    console.log({ error, errorInfo })
  }
  render() {
    // 检查是否抛出错误
    if (this.state.hasError) {
      // 你可以渲染任何自定义的备用 UI
      return (
        <div>
          <h2>糟糕,出现了一个错误!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            重试?
          </button>
        </div>
      )
    }
 
    // 如果没有错误,返回子组件
 
    return this.props.children
  }
}
 
export default ErrorBoundary

ErrorBoundary 组件跟踪 hasError 状态。这个状态变量的值是布尔值。当 hasError 的值为 true 时,ErrorBoundary 组件将渲染备用 UI。否则,它将渲染子组件。

创建 ErrorBoundary 组件后,在 pages/_app.js 文件中导入它,以在 Next.js 应用中包装 Component 属性。

// 导入 ErrorBoundary 组件
import ErrorBoundary from '../components/ErrorBoundary'
 
function MyApp({ Component, pageProps }) {
  return (
    // 用 ErrorBoundary 组件包装 Component 属性
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}
 
export default MyApp

你可以在 React 文档中了解更多关于错误边界的信息。

错误报告

要监控客户端错误,请使用 Sentry、Bugsnag 或 Datadog 等服务。