Next.js預期錯誤與未捕獲異常的處理方法
一、錯誤的分類
錯誤可以分為兩類：預期錯誤和未捕獲的異常。
- 預期錯誤：在應用程序正常運行過程中可能會遇到的錯誤，例如用戶輸入的錯誤數(shù)據(jù)或請求失敗。
- 未捕獲的異常：程序中的意外錯誤，通常表示代碼中存在 bug 或其他不應出現(xiàn)的異常。
二、處理預期錯誤
預期錯誤是可以預見的錯誤，這類錯誤應該被明確處理，而不是讓它們未捕獲或拋出異常。常見的預期錯誤場景包括服務端驗證錯誤或請求失敗等。
1. 處理來自 Server Actions 的預期錯誤
當在 Server Actions 中發(fā)生預期錯誤時，建議使用 useFormState hook 來管理這些錯誤并返回給客戶端，而不是通過 try/catch 語句塊來捕獲它們。
示例：創(chuàng)建用戶時處理錯誤
// app/actions.js
'use server'
import { redirect } from 'next/navigation'
export async function createUser(prevState, formData) {
const res = await fetch('https://...')
const json = await res.json()
if (!res.ok) {
return { message: '請輸入有效的郵箱' }
}
redirect('/dashboard')
}
在這個例子中，如果請求失敗，createUser 將返回一個錯誤消息，而不是拋出異常。
然后，在客戶端組件中，可以通過 useFormState 來處理返回的狀態(tài)，展示錯誤消息。
// app/ui/signup.js
'use client'
import { useFormState } from 'react'
import { createUser } from '@/app/actions'
const initialState = {
message: '',
}
export function Signup() {
const [state, formAction] = useFormState(createUser, initialState)
return (
<form action={formAction}>
<label htmlFor="email">郵箱</label>
<input type="text" id="email" name="email" required />
<p aria-live="polite">{state?.message}</p>
<button>注冊</button>
</form>
)
}
重要提示
- 上述示例中使用的
useFormStatehook 已包含在 Next.js App Router 中。如果使用的是 React 19，請使用useActionState。 useFormState提供的state可用于在客戶端組件中顯示錯誤消息，提升用戶體驗。
2. 處理來自 Server Components 的預期錯誤
在 Server Component 中獲取數(shù)據(jù)時，可以根據(jù)請求的響應結果決定是否渲染錯誤消息或進行頁面重定向。
// app/page.js
export default async function Page() {
const res = await fetch(`https://...`)
const data = await res.json()
if (!res.ok) {
return '發(fā)生了錯誤。'
}
return '...'
}
三、處理未捕獲的異常
未捕獲的異常是指程序中不應發(fā)生的錯誤，通常表明存在 bug。對于這些異常，我們應使用錯誤邊界進行捕獲并提供備用 UI。
1. 使用錯誤邊界
錯誤邊界允許我們捕獲子組件中的異常，并顯示一個備用的 UI，而不是讓整個組件樹崩潰。
在 Next.js 中，可以通過在路由段中添加 error.tsx 文件來創(chuàng)建錯誤邊界。
// app/dashboard/error.js
'use client'
import { useEffect } from 'react'
export default function Error({ error, reset }) {
useEffect(() => {
// 將錯誤記錄到錯誤報告服務
console.error(error)
}, [error])
return (
<div>
<h2>出現(xiàn)了問題！</h2>
<button onClick={reset}>重試</button>
</div>
)
}
錯誤冒泡
如果希望錯誤冒泡到父級錯誤邊界，可以在渲染 Error 組件時使用 throw 拋出錯誤。
2. 處理嵌套路由中的錯誤
錯誤會冒泡到最近的父級錯誤邊界。因此，可以在不同級別的路由段中放置 error.tsx 文件，以實現(xiàn)更細粒度的錯誤處理。
// app/dashboard/error.js // 錯誤邊界組件
四、處理全局錯誤
雖然不常見，但我們可以使用位于根 app 目錄中的 app/global-error.js 來處理根布局中的錯誤，確保即使在國際化場景下也能正常處理錯誤。
示例：處理全局錯誤
// app/global-error.js
'use client'
export default function GlobalError({ error, reset }) {
return (
<html>
<body>
<h2>出現(xiàn)了問題！</h2>
<button onClick={() => reset()}>重試</button>
</body>
</html>
)
}
重要提示
- 全局錯誤 UI 必須包含
<html>和<body>標簽，因為它會在激活時替換根布局或模板。 global-error.js文件提供了全局錯誤處理的能力，確保在整個應用中能夠優(yōu)雅地處理未捕獲的異常。
到此這篇關于Next.js預期錯誤與未捕獲異常的處理方法的文章就介紹到這了,更多相關Next.js預期錯誤與未捕獲異常內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
實現(xiàn)token無感刷新對于前端來說是一項十分常用的技術,這篇文章主要給大家介紹了關于前端雙token無感刷新的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)收縮式菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關于Webpack按需加載打包chunk命名的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Webpack具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
react-router-dom?v6?通過outlet實現(xiàn)keepAlive?功能的實現(xiàn)
本文主要介紹了react-router-dom?v6?通過outlet實現(xiàn)keepAlive功能，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
ES6學習筆記之Set和Map數(shù)據(jù)結構詳解
這篇文章主要介紹了ES6學習筆記之Set和Map數(shù)據(jù)結構,結合實例形式詳細分析了ECMAScript中基本數(shù)據(jù)結構Set和Map的常用屬性與方法的功能、用法及相關注意事項,需要的朋友可以參考下2017-04-04![無阻塞加載腳本分析[全]](http://img.jbzj.com/images/xgimg/bcimg5.png)
script標簽的阻塞行為會對頁面性能產生負面影響，大多數(shù)瀏覽器在下載或執(zhí)行腳本的同時，會阻塞下載位于它之后的資源，也會阻塞渲染位于它之后的元素。2011-01-01
本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新2018-07-07
這篇文章給大家介紹了greenbrower用到的function.js代碼集合，感興趣的朋友一起看看吧2007-12-12
這篇文章主要介紹了微信小程序 如何保持登錄狀態(tài),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
JavaScript大數(shù)ID精度丟失問題的解決方案
在前后端分離的Web應用開發(fā)中,經常會遇到一個令人頭疼的問題：JavaScript數(shù)字精度丟失,當后端使用Long類型生成的大數(shù)ID傳遞到前端時,會出現(xiàn)精度丟失,所以本文給大家介紹了JavaScript大數(shù)ID精度丟失問題解決方案,需要的朋友可以參考下2025-09-09