如何在 Next.js 應用程序中處理錯誤
如何處理錯誤
錯誤可分為兩類：預期錯誤和未捕獲異常。本頁將指導你如何在 Next.js 應用程序中處理這些錯誤。
處理預期錯誤
預期錯誤是指在應用程序正常運行過程中可能發(fā)生的情況，例如服務器端表單驗證錯誤或請求失敗。這些錯誤應顯式處理并返回給客戶端。
服務器操作
你可以使用 useActionState 鉤子來管理服務器函數(shù)的狀態(tài)并處理預期錯誤。對于預期錯誤，避免使用 try/catch 塊。相反，可以將預期錯誤建模為返回值，而不是拋出異常。
'use server'export async function createPost(prevState: any, formData: FormData) {const title = formData.get('title')const content = formData.get('content')const res = await fetch('https://api.vercel.app/posts', {method: 'POST',body: { title, content },})const json = await res.json()if (!res.ok) {return { message: 'Failed to create post' }}}
然后，你可以將操作傳遞給 useActionState 鉤子，并使用返回的 state 顯示錯誤消息。
'use client'import { useActionState } from 'react'import { createPost } from '@/app/actions'const initialState = {message: '',}export function Form() {const [state, formAction, pending] = useActionState(createPost, initialState)return (<form action={formAction}><label htmlFor="title">標題</label><input type="text" id="title" name="title" required /><label htmlFor="content">內(nèi)容</label><textarea id="content" name="content" required />{state?.message && <p aria-live="polite">{state.message}</p>}<button disabled={pending}>創(chuàng)建帖子</button></form>)}
服務器組件
在服務器組件中獲取數(shù)據(jù)時，可以使用響應來條件渲染錯誤消息或 redirect。
export default async function Page() {const res = await fetch(`https://...`)const data = await res.json()if (!res.ok) {return '發(fā)生錯誤'}return '...'}
未找到
你可以在路由段中調(diào)用 notFound 函數(shù)，并使用 not-found.js 文件顯示 404 UI。
import { getPostBySlug } from '@/lib/posts'export default async function Page({ params }: { params: { slug: string } }) {const { slug } = await paramsconst post = getPostBySlug(slug)if (!post) {notFound()}return <div>{post.title}</div>}
export default function NotFound() {return <div>404 - 未找到頁面</div>}
處理未捕獲異常
未捕獲異常是意料之外的錯誤，表示在應用程序的正常流程中不應發(fā)生的錯誤。這些錯誤應通過拋出錯誤來處理，然后由錯誤邊界捕獲。
嵌套錯誤邊界
Next.js 使用錯誤邊界來處理未捕獲異常。錯誤邊界捕獲子組件中的錯誤，并顯示備用 UI 而不是崩潰的組件樹。
通過在路由段中添加 error.js 文件并導出 React 組件來創(chuàng)建錯誤邊界：
'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><buttononClick={// 嘗試通過重新渲染段來恢復() => reset()}>重試</button></div>)}
錯誤將冒泡到最近的父級錯誤邊界。這允許在路由層次結構的不同級別放置 error.tsx 文件，從而實現(xiàn)細粒度的錯誤處理。
全局錯誤
雖然不常見，但你可以在根布局中使用 global-error.js 文件處理錯誤，即使在使用國際化的情況下。全局錯誤 UI 必須定義自己的 <html> 和 <body> 標簽，因為它在活動時會替換根布局或模板。
'use client' // 錯誤邊界必須是客戶端組件export default function GlobalError({error,reset,}: {error: Error & { digest?: string }reset: () => void}) {return (// 全局錯誤必須包含 html 和 body 標簽<html><body><h2>出錯了！</h2><button onClick={() => reset()}>重試</button></body></html>)}
API 參考
閱讀 API 參考 ，了解有關本頁中提到的功能的更多信息。
- 重定向 重定向函數(shù)的 API 參考。
- error.js error.js 特殊文件的 API 參考。
- 未找到 notFound 函數(shù)的 API 參考。
- not-found.js not-found.js 文件的 API 參考。
更多建議：