error.js

Bir hata dosyası, bir rota segmenti için bir hata UI sınırı tanımlar.

Sunucu Bileşenlerinde ve İstemci Bileşenlerinde meydana gelen beklenmedik hataları yakalamak ve bir geri dönüş kullanıcı arayüzü görüntülemek için kullanışlıdır.

app/dashboard/error.tsx
'use client' // Error components 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>
  )
}

Props

error

Bir örnek Error nesnesi error.js İstemci Bileşenine iletilir.

error.message

Hata mesajı.

error.digest

Bir Sunucu Bileşeninde atılan hatanın otomatik olarak oluşturulan bir karması. Sunucu tarafı günlüklerindeki ilgili hatayı eşleştirmek için kullanılabilir.

reset

Hata sınırını sıfırlayan bir işlev. Fonksiyon çalıştırıldığında, Hata sınırının içeriğini yeniden oluşturmaya çalışır. Başarılı olursa, yedek hata bileşeni yeniden oluşturma işleminin sonucuyla değiştirilir.

Kullanıcıdan hatadan kurtulmayı denemesini istemek için kullanılabilir.

Bildiğim iyi oldu:

  • error.js sınırlar İstemci Bileşenleri olmalıdır.
  • Üretim derlemelerinde, Sunucu Bileşenlerinden iletilen hatalar, hassas bilgilerin sızdırılmasını önlemek için belirli hata ayrıntılarından arındırılacaktır.
  • Bir error.js sınırı, aynı segmentteki bir layout.js bileşeninde atılan hataları işlemez, çünkü hata sınırı bu düzen bileşeninin içinde yuvalanmıştır.
    • Belirli bir düzene ilişkin hataları ele almak için, düzenlerin üst segmentine bir error.js dosyası yerleştirin.
    • Kök düzen veya şablon içindeki hataları ele almak için error.js 'un app/global-error.js adlı bir varyasyonunu kullanın.

global-error.js

Özellikle layout.js kök dizinindeki hataları ele almak için, app kök dizininde bulunan app/global-error.js adlı error.js varyasyonunu kullanın.

app/global-error.tsx
'use client'
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

Bildiğim iyi oldu:

  • global-error.js etkin olduğunda layout.js kökünün yerini alır ve bu nedenle kendi <html> ve <body> etiketlerini tanımlamalıdır.
  • Hata kullanıcı arayüzünü tasarlarken, Hata sınırlarını manuel olarak değiştirmek için React Geliştirici Araçlarını kullanmayı yararlı bulabilirsiniz.

not-found.js

Bu not-found dosyası, notFound() işlevi bir rota segmenti içinde atıldığında kullanıcı arayüzünü oluşturmak için kullanılır.

Version History

VersionChanges
v13.1.0global-error introduced.
v13.0.0error introduced.