ntab.dev —提升效率的新标签页组件error.js
error 文件允许你处理意外的运行时错误并显示备用 UI。
app/dashboard/error.tsx
TypeScript
'use client' // Error boundaries must be Client Components
import { useEffect } from 'react'
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
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 将路由段及其嵌套子项包装在 React Error Boundary 中。当边界内抛出错误时，error 组件会显示为备用 UI。
值得注意的是：
- React DevTools 允许你切换错误边界以测试错误状态。
- 如果你希望错误冒泡到父错误边界，你可以在渲染
error组件时throw。
参考
Props
error
转发到 error.js Client Component 的 Error 对象实例。
值得注意的是：在开发过程中，转发到客户端的
Error对象将被序列化，并包含原始错误的message，以便更轻松地调试。但是，这种行为在生产环境中是不同的，以避免将错误中包含的潜在敏感细节泄露给客户端。
error.message
- 从 Client Components 转发的错误显示原始
Error消息。 - 从 Server Components 转发的错误显示带有标识符的通用消息。这是为了防止泄露敏感细节。你可以使用
errors.digest下的标识符来匹配相应的服务器端日志。
error.digest
自动生成的抛出错误的哈希值。它可用于匹配相应的服务器端日志中的错误。
reset
错误的原因有时可能是暂时的。在这些情况下，重试可能会解决问题。
错误组件可以使用 reset() 函数提示用户尝试从错误中恢复。当执行时，该函数将尝试重新渲染错误边界的内容。如果成功，备用错误组件将被重新渲染的结果替换。
app/dashboard/error.tsx
TypeScript
'use client' // Error boundaries must be Client Components
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
)
}示例
全局错误
虽然不太常见，但你可以使用位于根 app 目录中的 global-error.js 处理根布局或模板中的错误，即使使用了国际化。全局错误 UI 必须定义自己的 <html> 和 <body> 标签。当激活时，此文件会替换根布局或模板。
app/global-error.tsx
TypeScript
'use client' // Error boundaries must be Client Components
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
// global-error must include html and body tags
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}值得注意的是：在开发环境中，会显示错误覆盖层，而不是
global-error.js。
版本历史
| 版本 | 变更 |
|---|---|
v15.2.0 | 在开发环境中也显示 global-error。 |
v13.1.0 | 引入 global-error。 |
v13.0.0 | 引入 error。 |