next.js 13 的 error.tsx 和 not-found.tsx 并非全局拦截器，而是基于 react error boundaries 和路由层级的特殊组件；它们无法捕获事件处理器（如 onclick）中抛出的同步错误，需通过状态驱动 + useeffect 触发异常才能被正确捕获。
next.js 13 的 error.tsx 和 not-found.tsx 并非全局拦截器，而是基于 react error boundaries 和路由层级的特殊组件；它们无法捕获事件处理器（如 onclick）中抛出的同步错误，需通过状态驱动 + useeffect 触发异常才能被正确捕获。
在 Next.js 13 的 App Router 中，error.tsx 和 not-found.tsx 是边界敏感、渲染时机严格受限的特殊页面组件。它们并非传统意义上的“全局错误处理器”，其生效依赖两个关键前提：
- error.tsx 必须位于发生错误的 Layout 或 Page 的 同级或父级目录，且仅能捕获该布局树内 组件初始化阶段（render 或 useEffect）抛出的错误；
- React Error Boundaries 不会捕获事件处理器（event handlers）、定时器（setTimeout）、服务端请求（fetch）、或异步 Promise rejection 中的错误 —— 这是 React 的底层设计限制（官方文档明确说明）。
因此，您当前代码中点击按钮直接 throw new Error(...) 的写法，属于典型的「事件处理器内抛错」，完全绕过了 Error Boundary 的捕获机制，导致 Next.js 退回到开发模式下的 overlay 提示（即左下角黄色弹窗），而非渲染 app/sample/error.tsx。
✅ 正确做法：将错误触发“延迟”至 React 渲染生命周期中可被捕获的阶段，例如使用 useState + useEffect 组合：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
// app/sample/page.tsx
'use client'
import { useState, useEffect } from 'react'
export default function Sample() {
const [shouldThrow, setShouldThrow] = useState(false)
// 在 useEffect 中抛错 → 可被同级 error.tsx 捕获
useEffect(() => {
if (shouldThrow) {
throw new Error(`Client-side error at ${new Date().toISOString()}`)
}
}, [shouldThrow])
return (
<main classname="flex flex-col items-center justify-between p-24"><h1>Sample Page</h1>
<button onclick="{()"> setShouldThrow(true)}
className="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
>
Trigger Render-Time Error
</button>
</main>
)
}
⚠️ 注意事项：
- error.tsx 必须为 Client Component（已正确添加 'use client'），且需导出 error 和 reset 参数；
- reset() 函数仅在用户调用后重试当前错误边界内的子树渲染，不会刷新页面或重走数据获取流程；
- not-found.tsx 的触发方式完全不同：它仅在 notFound() 被显式调用（如 generateStaticParams 返回空数组、或服务端组件中 notFound()）时激活，不会响应客户端路由跳转失败（如 ） —— 客户端导航失败默认返回 404 页面（由 app/not-found.tsx 全局接管）；
- 若需在客户端主动触发 404，应在服务端逻辑中处理（如 async function generateStaticParams() 返回空数组），或使用 redirect() / notFound()（仅限 Server Components）。
? 总结：
Next.js 13 的错误与未找到处理机制是声明式、层级化、且严格区分服务端/客户端语义的。不要试图在事件中直接 throw 来测试 error.tsx；应通过状态变更 + useEffect 触发错误，确保其落入 React 错误边界作用域。同时，务必理解 not-found.tsx 的适用场景仅限于服务端路由解析失败，而非前端导航容错。遵循这一范式，即可稳定启用自定义错误与 404 页面。
