前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载导读本文围绕 .agents/skills/next-best-practices/error-handling.md 展开系统讲解在 Next.js App Router 中如何处理运行时错误从路由级 Error Boundaryerror.tsx/global-error.tsx、404 与鉴权错误页到 Server Actions 中redirect/notFound等导航 API 的 try-catch 陷阱与unstable_rethrow的正确用法。读完本文你将掌握一套错误分层 就近兜底 不误吞导航异常的完整错误处理体系并能在实际项目中直接落地。仓库中 src/pages/404.astro 与 src/pages/[post].astro 的文章不存在即跳转 404实现可作为本文所述模式在真实站点中的对照实例。一、错误处理的整体思路分层边界就近兜底Next.js App Router 的错误处理遵循一个核心原则错误向最近的边界冒泡bubble up。你在哪一个路由段定义错误 UI该段及其子树内的错误就会被谁捕获。这样可以把出错了这件事限定在最小的页面范围内避免一个子页面的崩溃拖垮整站布局。在动手写任何错误 UI 之前先记住两个硬性约定error.tsx必须是 Client Component顶部声明use client因为错误边界需要响应式的重置交互根布局root layout自身的错误无法被普通的error.tsx捕获必须使用global-error.tsx且后者必须包含html和body标签。这两条是文档明确强调的约束违反任何一条都会导致错误边界失效或布局渲染异常。二、Error Boundarieserror.tsx与global-error.tsx2.1 路由段错误边界error.tsx在任意路由段下新建error.tsx即可捕获该段及其所有子路由在渲染、生成静态参数或客户端执行期间抛出的错误。它接收两个 propserror被抛出的Error对象附带的digest是服务端生成的哈希字符串用于在日志中关联同一次故障reset一个回调函数调用后 Next.js 会重新渲染该路由段注意不是重置任何客户端状态而是重新尝试渲染。最小可用实现来自原文档use client export default function Error({ error, reset, }: { error: Error { digest?: string } reset: () void }) { return ( div h2Something went wrong!/h2 button onClick{() reset()}Try again/button /div ) }实操要点reset()适合处理临时性故障如网络抖动、上游 API 瞬时不可用点击重试让用户无刷新恢复如果想给用户更友好的反馈可以读取error.message或根据digest展示错误编号便于后续向客服/日志系统上报不要在error.tsx里做数据请求等副作用它只负责展示与重试。2.2 全局错误边界global-error.tsx当错误发生在根布局内部时error.tsx帮不上忙——因为根布局本身被破坏了连错误 UI 都无处安放。此时需要项目根目录下的global-error.tsxuse client export default function GlobalError({ error, reset, }: { error: Error { digest?: string } reset: () void }) { return ( html body h2Something went wrong!/h2 button onClick{() reset()}Try again/button /body /html ) }与error.tsx的关键差异维度error.tsxglobal-error.tsx捕获范围所在路由段及其子路由根布局及其内部错误是否可省略按段按需添加一旦出现根布局错误即需要结构要求无特殊要求必须自带html和body是否会替代error.tsx就近生效仅当error.tsx无法覆盖时兜底注意global-error.tsx只处理根布局这一层它不会替代各路由段的error.tsx。两者是全局兜底 就近兜底的互补关系。三、Server Actions 的导航 API 陷阱不要把redirect()包进 try-catch这是本指南中最容易踩坑、也最影响线上体验的一节。3.1 为什么导航是抛异常的redirect()、permanentRedirect()、notFound()、forbidden()、unauthorized()这类导航/响应函数在 Next.js 内部是通过抛出特殊错误来实现控制流跳转的。也就是说redirect(/posts/1)这行代码正常执行的结果就是抛出一个内部错误由框架捕获后完成跳转。如果你把这些调用包进try-catch异常会被你的catch分支拦截导航就永远不会发生——用户会看到操作失败而不是被带到新页面。原文档给出的反例与正解use server import { redirect } from next/navigation import { notFound } from next/navigation // Bad: try-catch catches the navigation error async function createPost(formData: FormData) { try { const post await db.post.create({ ... }) redirect(/posts/${post.id}) // This throws! } catch (error) { // redirect() throw is caught here - navigation fails! return { error: Failed to create post } } } // Good: Call navigation APIs outside try-catch async function createPost(formData: FormData) { let post try { post await db.post.create({ ... }) } catch (error) { return { error: Failed to create post } } redirect(/posts/${post.id}) // Outside try-catch } // Good: Re-throw navigation errors async function createPost(formData: FormData) { try { const post await db.post.create({ ... }) redirect(/posts/${post.id}) } catch (error) { if (error instanceof Error error.message NEXT_REDIRECT) { throw error // Re-throw navigation errors } return { error: Failed to create post } } }三种写法对应的决策建议先做可能失败的 I/O后做导航第二种写法把redirect放在 try-catch 之外结构最清晰是首选方案必须整体包裹时识别并重新抛出导航错误第三种写法通过检查error.message NEXT_REDIRECT区分真错误与导航信号但这依赖内部字符串脆弱且易随版本变化无论哪种写法业务失败数据库写入失败等都要返回可展示的错误对象而不是吞掉或抛出原始异常。3.2 适用范围所有导航类 API上述不要包裹 / 包裹后必须放行的规则同样适用于API语义redirect()307 临时重定向permanentRedirect()308 永久重定向notFound()404 未找到forbidden()403 禁止访问unauthorized()401 未认证3.3 更稳的方案unstable_rethrow()与其手工比对NEXT_REDIRECT字符串Next.js 提供了unstable_rethrow()注意 API 目前仍带unstable_前缀表示仍在演进。在 catch 块中调用它会自动把 Next.js 内部的导航类错误重新抛出同时放行业务错误继续走你的降级逻辑import { unstable_rethrow } from next/navigation async function action() { try { // ... redirect(/success) } catch (error) { unstable_rethrow(error) // Re-throws Next.js internal errors return { error: Something went wrong } } }推荐的使用范式所有 Server Action 的 try-catch 第一行都放unstable_rethrow(error)这样既保留了业务错误返回表单提示的体验又绝不误杀导航。四、重定向307 与 308 怎么选redirect与permanentRedirect都从next/navigation导入区别在于 HTTP 状态码与语义import { redirect, permanentRedirect } from next/navigation // 307 Temporary - use for most cases redirect(/new-path) // 308 Permanent - use for URL migrations (cached by browsers) permanentRedirect(/new-url)选择标准redirect()307用于大多数场景——登录后跳转、表单提交后跳转到详情页、临时维护页等。浏览器和搜索引擎不会缓存307 结果permanentRedirect()308用于永久迁移场景例如站点改版后旧 URL 迁移到新路径。308 会被浏览器缓存下次访问直接走新地址因此只应在确定不会改回来时使用两者都必须在Server Component、Server Action、Route Handler等服务器上下文调用不能在 Client Component 的事件回调里调用客户端请用useRouter().push()。五、鉴权错误unauthorized()与forbidden()当页面需要基于会话session或权限做访问控制时可以直接触发对应的错误页import { forbidden, unauthorized } from next/navigation async function Page() { const session await getSession() if (!session) { unauthorized() // Renders unauthorized.tsx (401) } if (!session.hasAccess) { forbidden() // Renders forbidden.tsx (403) } return Dashboard / }随后在app目录下创建对应的错误页文件它们会自动接管对应状态码的渲染// app/forbidden.tsx export default function Forbidden() { return divYou dont have access to this resource/div } // app/unauthorized.tsx export default function Unauthorized() { return divPlease log in to continue/div }这样 401 与 403 就被语义化拆分成独立的落地页unauthorized引导用户先登录forbidden告知登录了但没权限比笼统抛一个错误更有助于转化和排查。六、404not-found.tsx与notFound()6.1 自定义 404 页面在路由段下创建not-found.tsx即可定制该段的 404 UIexport default function NotFound() { return ( div h2Not Found/h2 pCould not find the requested resource/p /div ) }6.2 主动触发 404当数据查询结果为空时比如按 slug 找不到文章用notFound()主动触发渲染最近的not-found.tsximport { notFound } from next/navigation export default async function Page({ params }: { params: Promise{ id: string } }) { const { id } await params const post await getPost(id) if (!post) { notFound() // Renders closest not-found.tsx } return div{post.title}/div }两点实操提醒notFound()与redirect()一样会抛出内部错误同样不要被外层 try-catch 吞掉注意params在 Next.js 15 中是Promise需要先await参见 async-patterns.md。6.3 仓库实例preguntas-entrevista-react 的 404 处理本仓库虽以 Astro 构建见 astro.config.mjs但其内容不存在的处理思路与上述模式完全同构可对照学习在 src/pages/[post].astro 中当fetchPost()查不到文章时执行Astro.redirect(/404)等价于 Next.js 中查不到资源 → 触发 404 页的notFound()专门的 404 页面实现在 src/pages/404.astro渲染Esta pregunta no existe标题、引导文案与Volver al inicio返回按钮并通过canonical/404与noindex{true}告知搜索引擎不要收录该页在 astro.config.mjs 的 sitemap 配置中通过filter: page !page.includes(/404)把 404 页从站点地图中排除——这与 Next.js 中让 404 页不参与索引的意图一致是错误页 SEO 卫生的常见做法。七、错误层级Error Hierarchy一张图看懂冒泡路径原文档给出了最典型的目录结构与捕获对应关系app/ ├── error.tsx # Catches errors from all children ├── blog/ │ ├── error.tsx # Catches errors in /blog/* │ └── [slug]/ │ ├── error.tsx # Catches errors in /blog/[slug] │ └── page.tsx └── layout.tsx # Errors here go to global-error.tsx逐层解读/blog/[slug]的page.tsx抛错 → 先被/blog/[slug]/error.tsx捕获若该段没有error.tsx错误继续冒泡到/blog/error.tsx再往上到根app/error.tsx捕获全站所有子路由错误根布局layout.tsx内部的错误无法由app/error.tsx捕获只能交给global-error.tsx404 与 401/403 等预期内的非异常则走not-found.tsx、unauthorized.tsx、forbidden.tsx它们不属于Error Boundary 体系。设计建议不要在每一层都放 error.tsx。按段的重要程度决定兜底粒度——比如对blog这样内容密集的段放一个专属边界其余交给全局边界即可避免重复代码。八、错误处理的完整决策清单把本文内容沉淀为一份可直接对照执行的检查单边界需要兜底的路由段放error.tsxClient Component根布局风险点配置global-error.tsx必须含html/body导航Server Action 中先做 I/O、后调redirect必须用 try-catch 时第一行执行unstable_rethrow(error)放行内部错误状态码语义临时跳转用redirect()(307)永久迁移用permanentRedirect()(308)未登录用unauthorized()(401)无权限用forbidden()(403)查无资源用notFound()(404)错误页 SEO404 等错误页记得配合noindex并从 sitemap 中排除对照 src/pages/404.astro 与 astro.config.mjs观察利用error.digest关联服务端日志让用户看到的错误与日志里的错误能对上号这是线上排查的起点。配套的其余最佳实践文件约定、RSC 边界、数据获取模式等可在 .agents/skills/next-best-practices/SKILL.md 中继续查阅例如 file-conventions.md 提供了app目录下所有特殊文件的完整清单可作为本文错误页体系的上下文补充。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐React Error Boundaries 实战指南用 refine 构建优雅的 React 错误处理机制React Error Boundaries 实战指南用 refine 构建优雅的 React 错误处理机制 React 提供的 Error Boundari前端企业应用preguntas-entrevista-react 项目实践Largest Contentful PaintLCP优化完全指南preguntas entrevista react 项目实践Largest Contentful PaintLCP优化完全指南 Largest Cont前端教程Kubernetes SIG Apps 2020 年度报告解读Workloads API 演进、社区治理与贡献者生态Kubernetes SIG Apps 2020 年度报告解读Workloads API 演进、社区治理与贡献者生态 导读 本文以 Kubernetes Co开源治理文档研发协作上一篇ComfyUI-KJNodes专业级AI工作流效率提升与数据流管理革命下一篇如何在Windows 10上完整安装Android子系统跨平台应用运行终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考