error.js

error 檔案允許您處理非預期的執行階段錯誤並顯示備用 UI。

app/dashboard/error.tsx

'use client' // Error boundaries must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

`error.js` 的運作方式

error.js 將路由區段及其巢狀子項包裝在 React 錯誤邊界中。當邊界內發生錯誤時，error 組件會顯示為備用 UI。

注意事項:

React 開發者工具可讓您切換錯誤邊界以測試錯誤狀態。

屬性

`error`

注意事項：在開發過程中，傳遞到客戶端的 `Error` 物件會被序列化，並包含原始錯誤的 `message`，以便更容易除錯。然而，此行為在正式環境中不同，以避免將錯誤中可能包含的敏感資訊洩漏給客戶端。

`error.messageerror.digestreset`

錯誤的原因有時可能是暫時的。在這些情況下，再次嘗試或許能解決問題。

錯誤組件可以使用 reset() 函式來提示使用者嘗試從錯誤中恢復。執行時，該函式將嘗試重新渲染錯誤邊界的內容。如果成功，則後備錯誤組件將被重新渲染的結果取代。

app/dashboard/error.tsx

'use client' // Error boundaries must be Client Components
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

global-error.js功能時也是如此。全域錯誤 UI 必須定義自己的 <html> 和 <body> 標籤。當啟用時，此檔案會取代根佈局或模板。

app/global-error.tsx

'use client' // Error boundaries must be Client Components
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    // global-error must include html and body tags
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}