𝗘𝗿𝗿𝗼𝗿 𝗕𝗼𝘂𝗻𝗱𝗮𝗿𝗶𝗲𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿
എല്ലാം ശരിയായി നടക്കുമ്പോൾ മിക്ക Next.js ആപ്പുകളും നന്നായി പ്രവർത്തിക്കുന്നു. എന്നാൽ എന്തെങ്കിലും പിഴവുകൾ സംഭവിക്കുമ്പോൾ അവ പരാജയപ്പെടുന്നു. ഉയർന്ന നിലവാരമുള്ള ആപ്പുകൾ ഇത്തരം പരാജയങ്ങളെ സുഗമമായി കൈകാര്യം ചെയ്യാൻ Error Boundaries ഉപയോഗിക്കുന്നു.
Pages Router-ൽ നിന്നും വ്യത്യസ്തമായ ഒരു മോഡലാണ് App Router ഉപയോഗിക്കുന്നത്. ഇത് React Error Boundaries-നെ ആശ്രയിച്ചാണ് പ്രവർത്തിക്കുന്നത്. നിങ്ങളുടെ റൂട്ടിന്റെ ഏത് തലത്തിലും പ്രശ്നങ്ങൾ കണ്ടെത്താൻ error.js ഫയലുകൾ ഉപയോഗിക്കാം.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:
• പിഴവുകൾ (Errors) ഏറ്റവും അടുത്തുള്ള error.js ബൗണ്ടറിയിൽ തന്നെ നിൽക്കുന്നു.
• നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടെങ്കിൽ മാത്രമേ പിഴവുകൾ ഒരു ഗ്ലോബൽ ഹാൻഡ്ലറിലേക്ക് (global handler) മാറുന്നുള്ളൂ.
• നിങ്ങളുടെ ആപ്പിന്റെ വിവിധ ഭാഗങ്ങൾക്കായി വ്യത്യസ്ത എറർ സ്ക്രീനുകൾ കാണിക്കാൻ നിങ്ങൾക്ക് കഴിയും.
error.js ഫയൽ നിയമങ്ങൾ:
- ഇതൊരു Client Component ആയിരിക്കണം. മുകളിൽ 'use client' എന്ന് ഉപയോഗിക്കുക.
- ഇത് ആ സെഗ്മെന്റിലും അതിലെ എല്ലാ ചൈൽഡ് കംപോണന്റുകളിലും (children) സംഭവിക്കുന്ന പിഴവുകൾ കണ്ടെത്തുന്നു.
- പരാജയപ്പെട്ട റെൻഡർ (render) വീണ്ടും ശ്രമിക്കുന്നതിനായി നിങ്ങൾക്ക് ഒരു reset function ലഭിക്കുന്നു.
നെറ്റ്വർക്ക് തകരാറുകൾ പോലുള്ള താൽക്കാലിക പ്രശ്നങ്ങൾക്ക് reset function ഉപയോഗിക്കുക. സ്ഥിരമായ പിഴവുകൾക്കായി ഇത് ഉപയോഗിക്കരുത്.
റൂട്ട് ലേഔട്ടിനായി (root layout) global-error.js ഉപയോഗിക്കുക. സാധാരണ error.js-ന് റൂട്ട് layout.js-ലെ പിഴവുകൾ കണ്ടെത്താൻ കഴിയില്ല. global-error.js ആണ് നിങ്ങളുടെ അവസാന മാർഗ്ഗം. ഇത് റൂട്ട് ലേഔട്ടിനെ മാറ്റിസ്ഥാപിക്കുന്നതിനാൽ, ഇതിന് സ്വന്തമായി <html>, <body> ടാഗുകൾ ആവശ്യമാണ്.
വിവിധതരം പിഴവുകൾ കൈകാര്യം ചെയ്യൽ:
- ഡാറ്റ ലഭ്യമല്ലെങ്കിൽ
notFound()ഉപയോഗിക്കുക. ഇത്not-found.jsപ്രവർത്തിപ്പിക്കുന്നു. - അപ്രതീക്ഷിതമായ പരാജയങ്ങൾക്ക്
throw Error()ഉപയോഗിക്കുക. ഇത്error.jsപ്രവർത്തിപ്പിക്കുന്നു.
ഈ വേർതിരിക്കൽ നിങ്ങളുടെ ആപ്പിനെ വൃത്തിയായി സൂക്ഷിക്കുന്നു. കാണാതായ ഒരു ബ്ലോഗ് പോസ്റ്റ് തിരയുന്ന ഉപയോക്താവിന് ഒരു 404 പേജ് കാണാം. ഡാറ്റാബേസ് ക്രാഷ് നേരിടുന്ന ഉപയോക്താവിന് ഒരു എറർ മെസ്സേജ് കാണാം.
ഒരു AI ഇമേജ് ജനറേറ്ററിനായി ഞാൻ ഈ രീതിയാണ് ഉപയോഗിക്കുന്നത്. API കോളുകൾ, ഫയൽ അപ്ലോഡുകൾ എന്നിങ്ങനെ ഈ പ്രക്രിയയിൽ നിരവധി ഘട്ടങ്ങളുണ്ട്. ഒരു ഘട്ടം പരാജയപ്പെട്ടാൽ, error boundary ഒരു പ്രത്യേക സന്ദേശം കാണിക്കുന്നു. റീസെറ്റ് ബട്ടൺ ഉപയോഗിച്ച് ഉപയോക്താവിന് അവരുടെ പ്രോംപ്റ്റ് (prompt) നഷ്ടപ്പെടാതെ തന്നെ വീണ്ടും ശ്രമിക്കാവുന്നതാണ്.
ഒരു നല്ല ഘടന ഇപ്രകാരമാണ്:
• global-error.js: അവസാനത്തെ സുരക്ഷാ വലയം (safety net). • error.js: റൂട്ട് ലെവൽ പിഴവുകൾ കൈകാര്യം ചെയ്യുന്നു. • dashboard/error.js: ഡാഷ്ബോർഡിനുള്ളിലെ പിഴവുകൾ കൈകാര്യം ചെയ്യുന്നു. • auth/error.js: ലോഗിൻ അല്ലെങ്കിൽ സെഷൻ പിഴവുകൾ കൈകാര്യം ചെയ്യുന്നു.
ഈ സമീപനം ഒരു ചെറിയ പിഴവ് കാരണം നിങ്ങളുടെ മുഴുവൻ വെബ്സൈറ്റും തകരാതിരിക്കാൻ സഹായിക്കുന്നു.