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ù)請求的響應結(jié)果決定是否渲染錯誤消息或進行頁面重定向。
// 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)雅地處理未捕獲的異常。
到此這篇關(guān)于Next.js預期錯誤與未捕獲異常的處理方法的文章就介紹到這了,更多相關(guān)Next.js預期錯誤與未捕獲異常內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS如何修改對象數(shù)組的key值,使用map循環(huán),在map循環(huán)內(nèi)創(chuàng)建一個新對象,將item要改變的key賦給新創(chuàng)建的對象里面新key值,然后push給一個新創(chuàng)建的數(shù)組dataNew即可,需要的朋友可以參考下2024-02-02
下面小編就為大家?guī)硪黄厝恋脑O(shè)置與監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Javascript實現(xiàn)表單檢驗，以注冊界面為例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拍照打卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
用瀏覽器無法調(diào)試異步加載頁面里包含的js文件。簡單的說就是在調(diào)試工具里面看不到異步加載頁面里包含的js文件2014-10-10
JavaScript 不只是腳本...2007-05-05
拖動后怎么把布局結(jié)果保存呢？？我開始考慮是記錄每個拖動對象的的坐標，可做起來我感覺好麻煩，所以就沒有采用這種方法。2010-10-10
JS實現(xiàn)保留n位小數(shù)的四舍五入問題示例
這篇文章主要介紹了JS實現(xiàn)保留n位小數(shù)的四舍五入問題,結(jié)合完整實例形式分析了javascript針對小數(shù)四舍五入操作技巧,需要的朋友可以參考下2016-08-08
JS高級拖動技術(shù) setCapture，releaseCapture
setCapture 的意思就是設(shè)置一個對象的方法被觸發(fā)的范圍，或者作用域。2011-07-07
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖全屏顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09