Hataları Yönetme

Yüklemeler başarısız olur. Veritabanı çöker, kayıt kaybolur, bir şey hata fırlatır. Bir planınız yoksa, tek bir kötü await tüm ekranı beraberinde götürür.

error.jsx, loading.jsx dosyasının ayna görüntüsüdür: aynı fikir, zıt sonuç. Bir sayfanın yanına koyduğunuzda, o sayfanın işlenirken (rendering) fırlattığı her şeyi yakalar:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

loading.jsx aksine, bunun tek bir katı gereksinimi vardır:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx bir client bileşeni olmalıdır. Nedeni tam olarak JSX içindedir: onClick. Yeniden deneme düğmesi etkileşimdir ve etkileşim, tarayıcıya gönderilen bir bileşene ihtiyaç duyar. 'use client' ifadesini çıkarırsanız, tam da görevi hataları yakalamak olan sayfada, son bölümdeki olay işleyici hatasını alırsınız.

İki prop alır:

• error: fırlatılan Error, böylece bunu loglayabilirsiniz
• reset: başarısız olan bölümü yeniden render eden bir function. Onu çağırın ve page tekrar dener

reset, bu ekranı sadece hoş bir çökme ekranı olmaktan öteye taşıyan şeydir. Bir kez başarısız olan anlık bir aksaklık genellikle ikinci kez çalışacaktır ve kullanıcının hiçbir şeyi yeniden yüklemesi gerekmez.

Diğer özel dosyalar gibi, error.jsx da kendi klasörünü ve altındaki tüm yuvalanmış yapıları kapsar; böylece kök dizine yakın tek bir dosya, sitenin tüm bir bölümü için bir güvenlik ağı oluşturur.