Menguasai Penanganan Error Next.js dengan App Router – beragampengetahuan – Beragampengetahuan

Pada artikel ini, kita akan mempelajari cara menangani error di Next.js menggunakan App Router dan konvensi file error baru di Next.js.

Penanganan error adalah aspek kunci dalam mengembangkan aplikasi web apa pun, dan di masa lalu Next.js telah membantu developer mencapai pengalaman ini melalui halaman error kustom seperti halaman 404 dan 500.

Namun, halaman ini memiliki keterbatasan di router halaman, seperti dukungan terbatas untuk integrasi UI tertentu, dukungan lama untuk batas kesalahan React, dan fungsionalitas aplikasi terbatas saat terjadi kesalahan.

Namun dengan dirilisnya Next.js versi 13.4, App Router baru telah ditandai sebagai stabil untuk penggunaan produksi. App Router telah meningkatkan dukungan dan pengalaman pengembang untuk penanganan kesalahan dan bagian penting lainnya dalam membuat aplikasi web.

adegan dan pengaturan

Untuk memudahkan pemahaman tentang API penanganan kesalahan yang baru, kami akan menjelajahi penerapannya di aplikasi Next.js untuk autentikasi pengguna.

Autentikasi pengguna rentan terhadap banyak kesalahan, jadi mempelajari cara menangani kesalahan dalam situasi ini akan bermanfaat bagi Anda saat membuat aplikasi lain.

Sebelum kita mulai, dapatkan kode untuk aplikasi demo yang akan kita gunakan di artikel ini dengan mengkloning repositori yang ditautkan di sini (di cabang master). Setelah menjalankan aplikasi, Anda akan melihat kesalahan yang ditunjukkan pada gambar di bawah ini.

Pada aplikasi demo ini, halaman utama tempat form ditampilkan hanya dapat diakses oleh pengguna yang sudah login, namun terjadi kesalahan (dibikin dalam hal ini, namun bisa terjadi secara hukum), dan mengakibatkan session variabel ditugaskan sebagai null.

Catatan: Untuk penyederhanaan, tidak ada autentikasi yang akan diterapkan di aplikasi demo.

Ini tentu saja menyebabkan kesalahan, dan sekarang, aplikasi benar-benar macet karena tidak tahu cara menangani kesalahan!

Sekarang kita akan belajar bagaimana menangani kesalahan ini untuk mencegah aplikasi kita mogok dan dengan demikian meningkatkan pengalaman pengguna aplikasi secara signifikan.

Membuat halaman kesalahan

Untuk mencegah aplikasi mogok, file app/ direktori, buat a error.tsx dokumen. Pembuatan file ini secara otomatis membuat batas kesalahan React yang mencakup halaman utama.Lalu, di error.tsx file, mengekspor fungsi-fungsi berikut:

"use client";

export default function Error() {
  return (
    <div className="grid h-screen px-4 bg-white place-content-center">
      <div className="text-center">
        <h1 className="font-black text-gray-200 text-9xl">401</h1>

        <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          Unauthroized!
        </p>

        <p className="mt-4 text-gray-500">
          You must be logged in to access the page
        </p>

        <button
          type="button"
          className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring"
        >
          Try Again
        </a>
      </div>
    </div>
  );
}

Catatan: Komponen kesalahan harus berupa komponen klien! Pastikan untuk menandai mereka seperti itu.

Fungsi yang diekspor akan bertindak sebagai komponen fallback. Jika kesalahan dilontarkan di dalam batas, kesalahan akan ditangkap dan komponen cadangan akan dirender seperti yang ditunjukkan di bawah ini.

Saat terjadi kesalahan, dua prop diteruskan ke komponen fallback kesalahan – objek kesalahan itu sendiri, dan fungsi yang mencoba untuk pulih dari kesalahan (sering disebut reset):

"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  
}

kita sekarang bisa lulus error prop dan tampilkan di layar seperti ini:

<p className="mt-4 text-gray-500">
  {error.message || "You must be logged in to access the page"}
</p>

Fungsi reset akan mencoba merender ulang konten asli yang dikelilingi oleh batas kesalahan saat fungsi dipanggil. Jika berhasil, komponen error fallback akan diganti dengan konten yang dirender ulang.

Kami dapat mengimplementasikan panggilan fungsi reset di tombol kami onClick Pawang:

<button
  type="button"
  onClick={() => reset()}
  className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring cursor-pointer"
>
  Try Again
</button>

Dengan itu, kami telah berhasil menangani kesalahan kami!

pesan kesalahan abstrak

Dalam aplikasi nyata dengan autentikasi pengguna, mungkin ada banyak rute yang harus diamankan, yang memerlukan beberapa contoh pesan kesalahan autentikasi yang sama jika terjadi kesalahan autentikasi.

Untuk meringkas pesan kesalahan (alih-alih menulisnya berkali-kali), kita dapat dengan mudah membuat pengecualian khusus yang terkait dengan autentikasi.

Untuk melakukan ini, buat file bernama lib dan di direktori itu buat file bernama exceptions.tsDalam file ini kita dapat membuat dan mengekspor pengecualian kesalahan autentikasi khusus sebagai berikut:

export class AuthRequiredError extends Error {
  constructor(message = "Auth is required to access this page") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

Kami sekarang dapat membuang kebiasaan baru ini AuthRequiredError Di beranda, bukan halaman biasa Error:

export default function Home() {
  if (!session) throw new AuthRequiredError();
  
}

Kesalahan akan memberi kita pesan default yang diteruskan di konstruktor atau kesalahan yang lebih spesifik yang mungkin perlu kita sampaikan nanti.

Lebih lanjut tentang penanganan kesalahan

Mari kita akhiri dengan beberapa catatan tambahan tentang kesalahan tata letak dan kesalahan server.

kesalahan tata letak

Kesalahan dapat terjadi di mana saja dalam aplikasi (tidak hanya page.tsx file), dan bagaimana sistem perutean file yang digunakan oleh Next.js memengaruhi error.tsx Batas bekerja melintasi rute dan tata letak bersarang.

Gelembung kesalahan hingga batas kesalahan induk terdekat, seperti yang ditunjukkan pada gambar di bawah ini.

Sifat menggelegak kesalahan ini berarti bahwa error.tsx batas tidak akan menangkap kesalahan dalam file tata letak pada paragraf yang sama, karena batas kesalahan membungkus file tata letak.

Jika ada kesalahan dalam tata letak atau templat root, gunakan global-error.tsx berkas, seperti yang ditunjukkan di bawah ini.

ini global-error.tsx Perbatasan membungkus seluruh aplikasi, jadi pastikan untuk menambahkan keunikan Anda sendiri <html> Dan <body> Label saat menggunakan file ini.

Batas kesalahan ini menangkap setiap kesalahan yang tidak ditangkap oleh sarang lainnya error.tsx border sehingga tidak terlalu sering diaktifkan.

server error

Jika terjadi kesalahan selama komponen server atau pengambilan data, Next.js akan meneruskannya Error objek terdekat error.tsx batas.

Kesimpulan dan langkah selanjutnya

Meskipun banyak pengembang menganggap penerapan penanganan kesalahan tidak praktis, ini adalah bagian penting dari aplikasi dan penerapan yang berhasil akan meningkatkan pengalaman pengguna aplikasi Anda secara signifikan.

Next.js dengan App Router dan error.tsx konvensi dokumen.

Anda dapat merujuk ke dokumentasi penanganan kesalahan Next.js untuk mempelajari lebih lanjut tentang penanganan kesalahan, dan Anda dapat melihat kode lengkap untuk artikel ini di GitHub.