Error Boundaries katika Next.js App Router

Programu nyingi za Next.js hufanya kazi vizuri wakati kila kitu kinapoenda sawa. Zinashindwa wakati mambo yanapoharibika. Programu zenye ubora wa juu hutumia error boundaries kushughulikia kushindwa huku kwa ustadi.

App Router hutumia mfumo tofauti kuliko Pages Router. Inategemea React Error Boundaries. Unatumia faili za error.js kukamata matatizo katika kiwango chochote cha route yako.

Jinsi inavyofanya kazi:

• Makosa hubaki ndani ya mipaka (boundary) ya error.js iliyo karibu zaidi. • Makosa hayahamii kwenye kishughulikiaji wa jumla (global handler) isipokuwa kama unataka yafanyike hivyo. • Unaweza kuonyesha skrini tofauti za makosa kwa sehemu tofauti za programu yako.

Kanuni za faili ya error.js:

  • Lazima iwe Client Component. Tumia 'use client' juu kabisa.
  • Inakamata makosa katika sehemu hiyo na watoto (children) wake wote.
  • Unapata reset function ili kujaribu tena render iliyofeli.

Tumia reset function kwa matatizo ya muda mfupi kama vile kukatika kwa mtandao. Usitumie kwa makosa ya kudumu.

Tumia global-error.js kwa root layout. error.js ya kawaida haikamatwi makosa katika root layout.js. global-error.js ndiyo chaguo lako la mwisho. Inachukua nafasi ya root layout, hivyo inahitaji vitambulisho vyake vya na .

Kusimamia aina tofauti za makosa:

  • Tumia notFound() kwa data iliyopotea. Hii huamsha not-found.js.
  • Tumia throw Error() kwa kushindwa kutarajiwa. Hii huamsha error.js.

Mgawanyo huu unaweka programu yako katika hali safi. Mtumiaji anayetafuta chapisho la blogu lililopotea huona ukurasa wa 404. Mtumiaji anayekabiliwa na hitilafu ya hifadhidata (database crash) huona ujumbe wa kosa.

Ninatumia mfumo huu kwa jeneta ya picha ya AI. Mchakato huo una hatua nyingi kama vile API calls na upakiaji wa faili (file uploads). Hatua moja ikifeli, error boundary huonyesha ujumbe maalum. Kitufe cha reset kinamruhusu mtumiaji kujaribu tena bila kupoteza prompt yake.

Muundo mzuri unaonekana hivi:

• global-error.js: Kinga ya mwisho ya usalama. • error.js: Inashughulikia makosa ya kiwango cha juu (root-level). • dashboard/error.js: Inashughulikia makosa ndani ya dashboard. • auth/error.js: Inashughulikia makosa ya kuingia (login) au kikao (session).

Mtazamo huu huzuia kosa moja dogo lisiiharibu tovuti yako nzima.

Chanzo: https://dev.to/aon_infotech_3a1b6ff525fc/error-boundaries-in-nextjs-app-router-handling-failures-gracefully-3mif