Menguasai Pengendalian Kesalahan Seterusnya.js Dengan Penghala App

next.js 13.4 Panduan pengendalian ralat untuk penghala aplikasi

Artikel ini akan menerangkan cara menggunakan konvensyen fail ralat baru untuk mengendalikan ralat dalam penghala aplikasi di Next.Js.

Pengendalian ralat adalah aspek utama dari mana -mana pembangunan aplikasi web. Pada masa lalu, Next.js membantu pemaju mengendalikan kesilapan dengan menyesuaikan halaman ralat seperti 404 dan 500 muka surat. Walau bagaimanapun, halaman ini mempunyai batasan dalam penghala halaman, seperti sokongan terhad untuk integrasi UI tertentu, sokongan ketinggalan zaman untuk sempadan ralat reaksi, dan fungsi aplikasi terhad apabila ralat berlaku.

Selepas pelepasan versi Next.js 13.4, penghala aplikasi baru telah dimasukkan secara rasmi ke dalam pengeluaran. Router App meningkatkan pengalaman sokongan dan pemaju untuk pengendalian ralat dan bahagian asas bangunan aplikasi web yang lain.

mata utama

• Next.js Versi 13.4 Memperkenalkan App Router, yang meningkatkan pengalaman sokongan dan pemaju untuk pengendalian ralat dan bahagian penting lain aplikasi web anda.
Fail
• app dalam direktori error.tsx membuat sempadan ralat React untuk mengelakkan permohonan daripada terhempas apabila ralat berlaku. Ia juga boleh bertindak sebagai komponen sandaran, membuat kesilapan dilemparkan dalam sempadan.
• Pengecualian adat boleh dibuat untuk mesej ralat abstrak merentasi pelbagai laluan dalam aplikasi anda. Sebagai contoh, anda boleh menggunakan Custom AuthRequiredError untuk mengendalikan kesilapan pengesahan dalam pelbagai laluan.
• ralat boleh berlaku di mana sahaja di aplikasi seterusnya.js. Mereka akan gelembung ke sempadan ralat ibu bapa yang terdekat. Untuk susun atur akar atau kesilapan templat, fail global-error.tsx hendaklah digunakan. Jika ralat berlaku dalam komponen pelayan atau semasa pemerolehan data, Next.js meneruskan objek ralat yang sepadan dengan sempadan error.tsx yang terdekat.

Adegan dan Tetapan

Untuk memudahkan pemahaman mengenai API pengendalian ralat baru, kami akan meneroka pelaksanaannya dalam aplikasi Pengesahan Pengguna Seterusnya.

Pengesahan Pengguna terdedah kepada banyak kesilapan, jadi apabila membina aplikasi lain, ia akan memberi manfaat yang besar untuk mempelajari cara menangani kesilapan dalam keadaan ini.

Sebelum memulakan, sila dapatkan kod untuk aplikasi demo yang akan kami gunakan dalam artikel ini dengan mengkloning repositori yang dipautkan di sini (cawangan utama). Selepas menjalankan aplikasi, anda harus melihat ralat yang ditunjukkan dalam imej di bawah.

Dalam aplikasi demo ini, halaman utama (memaparkan borang) hanya boleh diakses oleh pengguna log masuk, tetapi beberapa kesilapan telah berlaku (dalam hal ini ia adalah buatan, tetapi ia juga boleh berlaku secara sah), menyebabkan sesi pembolehubah untuk ditugaskan untuk NULL.

Nota: Untuk kesederhanaan, pengesahan tidak akan dilaksanakan dalam aplikasi demo.

Ini tentu saja membawa kepada kesilapan, dan sekarang, aplikasi itu benar -benar terhempas kerana ia tidak tahu bagaimana untuk mengendalikan ralat!

Sekarang, kita akan belajar bagaimana menangani kesilapan ini untuk mengelakkan permohonan kami terhempas, dengan itu meningkatkan pengalaman pengguna aplikasi dengan ketara.

Buat halaman ralat

3 Mewujudkan fail ini secara automatik mencipta sempadan ralat React yang membungkus halaman utama. Kemudian, dalam fail

, eksport fungsi berikut: app/ error.tsx error.tsx

NOTA: Komponen ralat mestilah komponen klien! Pastikan untuk menandakan mereka sebagai komponen pelanggan.

"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">
          未授权！
        </p>
        <p className="mt-4 text-gray-500">
          您必须登录才能访问此页面
        </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"
        >
          重试
        </button>
      </div>
    </div>
  );
}

Fungsi yang dieksport akan bertindak sebagai komponen sandaran. Sekiranya ralat dilemparkan dalam sempadan, kesilapan ditangkap dan komponen sandaran diberikan, yang sepatutnya kelihatan seperti di bawah.

Apabila ralat berlaku, dua alat prop disalurkan ke komponen ralat ralat -objek ralat itu sendiri dan fungsi (biasanya dipanggil semula) yang cuba pulih dari kesilapan:

sekarang kita boleh mengakses mesej ralat melalui ralat prop dan memaparkannya pada skrin seperti berikut:

"use client";

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

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

Apabila fungsi ini dipanggil, fungsi reset akan cuba untuk mengubah kandungan asal yang dikelilingi oleh sempadan ralat. Sekiranya berjaya, komponen ralat sandaran akan digantikan dengan kandungan yang diberikan semula.

kami boleh melaksanakan panggilan fungsi semula dalam butang kami menggunakan pengendali onclick:

<p className="mt-4 text-gray-500">
  {error.message || "您必须登录才能访问此页面"}
</p>

Dengan cara ini, kami berjaya mengendalikan kesilapan kami!

Mesej ralat abstrak

<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"
>
  重试
</button>

Dalam aplikasi pengesahan pengguna sebenar, mungkin terdapat banyak laluan yang mesti dilindungi, dan jika ralat pengesahan berlaku, anda perlu menggunakan mesej ralat pengesahan yang sama dalam beberapa keadaan.

Untuk mesej ralat abstrak (dan tidak ditulis berulang kali), kita dapat dengan mudah membuat pengecualian tersuai yang berkaitan dengan pengesahan.

Untuk melakukan ini, buat direktori yang dipanggil

dan buat fail yang dipanggil

dalam direktori itu. Dalam fail ini, kita boleh membuat dan mengeksport pengecualian ralat pengesahan tersuai seperti berikut:

lib Sekarang, kita boleh membuang adat baru exceptions.ts di halaman utama dan bukannya biasa

:

export class AuthRequiredError extends Error {
  constructor(message = "需要身份验证才能访问此页面") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

AuthRequiredError Ralat ini akan memberi kita mesej lalai yang diluluskan dalam pembina, atau ralat yang lebih spesifik yang mungkin perlu kita lalui kemudian. Error

Maklumat lanjut mengenai pengendalian ralat

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

Akhirnya, mari kita lihat beberapa tambahan untuk kesilapan susun atur dan pelayan.

ralat dalam susun atur

Kesalahan boleh berlaku di mana sahaja dalam aplikasi (bukan hanya

fail), dan sistem penghalaan fail yang digunakan oleh Next.js mempengaruhi bagaimana

sempadan berfungsi dalam penghalaan dan susun atur bersarang.

ralat akan gelembung ke sempadan ralat ibu bapa yang terdekat, yang dapat dilihat dalam imej di bawah.

page.tsx error.tsx

Sifat kesilapan ini menggelegak bermakna sempadan error.tsx tidak menangkap kesilapan dalam fail susun atur di bahagian yang sama, kerana sempadan ralat membungkus fail susun atur.

Jika ralat berlaku dalam susun atur akar atau templat, gunakan fail

seperti yang ditunjukkan dalam angka di bawah. global-error.tsx

Batasan Balut keseluruhan aplikasi, jadi pastikan untuk menambah tag

dan global-error.tsx anda sendiri apabila menggunakan fail ini. Batasan ralat ini menangkap sebarang kesilapan yang bersarang sempadan lain tidak ditangkap, jadi ia tidak akan sering diaktifkan. error.tsx Ralat pelayan

Jika ralat berlaku dalam komponen pelayan atau semasa pemerolehan data, Next.js meneruskan objek ralat yang sepadan dengan sempadan

yang terdekat.

error.tsx

kesimpulan dan langkah seterusnya

Walaupun ramai pemaju berpendapat bahawa ia adalah rumit untuk melaksanakan pengendalian ralat, ia merupakan bahagian penting dalam aplikasi dan berjaya melaksanakan pengendalian ralat akan meningkatkan pengalaman pengguna dengan ketara.

next.js menjadikan ini sangat mudah dengan penghala aplikasi dan

konvensyen fail.

Anda boleh berunding dengan dokumentasi Next.js mengenai pengendalian ralat untuk maklumat lanjut mengenai pengendalian ralat, dan anda juga boleh melihat kod penyelesaian untuk artikel ini di GitHub. error.tsx

Soalan Lazim Menguasai Pengendalian Ralat di Next.js Menggunakan App Router

(bahagian Soalan Lazim ditinggalkan di sini kerana bahagian Soalan Lazim dari teks asal mempunyai tahap duplikasi yang tinggi dengan kandungan artikel, dan beberapa masalah lemah dikaitkan dengan mekanisme pengendalian ralat penghala aplikasi. Jika perlu, anda boleh menambah mengikut teks asal.)

Atas ialah kandungan terperinci Menguasai Pengendalian Kesalahan Seterusnya.js Dengan Penghala App. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!