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 istemci bileşeni olmalıdır. Bunun nedeni JSX'in içinde açıkça görülüyor: onClick. Yeniden deneme düğmesi etkileşimlidir ve etkileşim, tarayıcıya gönderilen bir bileşen gerektirir. 'use client' ifadesini eklemezsen, görevi hataları ele almak olan sayfanın ta kendisinde, son bölümdeki olay işleyicisi hatasını alırsın.

İki prop alır:

• error: günlüğe kaydedebilmeniz için fırlatılan Error
• reset: başarısız olan bölümü yeniden oluşturan bir işlev. Bu işlevi çağırdığınızda sayfa yeniden 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.