Next.js App Router માં Error Boundaries

જ્યારે બધું બરાબર ચાલે છે ત્યારે મોટાભાગની Next.js એપ્સ સારી રીતે કામ કરે છે. જ્યારે કંઈક ખોટું થાય છે ત્યારે તે નિષ્ફળ જાય છે. ઉચ્ચ ગુણવત્તાવાળી એપ્સ આ નિષ્ફળતાઓને યોગ્ય રીતે હેન્ડલ કરવા માટે error boundaries નો ઉપયોગ કરે છે.

App Router એ Pages Router કરતા અલગ મોડેલનો ઉપયોગ કરે છે. તે React Error Boundaries પર આધારિત છે. તમે તમારા રૂટના કોઈપણ સ્તરે સમસ્યાઓને પકડવા માટે error.js ફાઇલોનો ઉપયોગ કરી શકો છો.

તે કેવી રીતે કામ કરે છે:

• ભૂલો (Errors) નજીકની error.js boundary ની અંદર જ રહે છે. • જ્યાં સુધી તમે ન ઈચ્છો ત્યાં સુધી ભૂલો global handler માં જતી નથી. • તમે તમારી એપ્લિકેશનના વિવિધ ભાગો માટે અલગ-અલગ error screens બતાવી શકો છો.

error.js ફાઇલના નિયમો:

  • તે Client Component હોવું જોઈએ. ઉપર 'use client' નો ઉપયોગ કરો.
  • તે તે સેગમેન્ટ અને તેના તમામ ચિલ્ડ્રન (children) માં ભૂલો પકડે છે.
  • તમને નિષ્ફળ થયેલ render ને ફરીથી પ્રયાસ કરવા માટે reset function મળે છે.

નેટવર્ક ડ્રોપ જેવી કામચલાઉ સમસ્યાઓ માટે reset function નો ઉપયોગ કરો. કાયમી ભૂલો માટે તેનો ઉપયોગ કરશો નહીં.

root layout માટે global-error.js નો ઉપયોગ કરો. પ્રમાણભૂત error.js એ root layout.js માં ભૂલો પકડી શકતું નથી. global-error.js એ તમારો છેલ્લો વિકલ્પ છે. તે root layout ને રિપ્લેસ કરે છે, તેથી તેને તેના પોતાના અને ટેગ્સની જરૂર છે.

વિવિધ પ્રકારની ભૂલોનું સંચાલન:

  • ખૂટતા ડેટા માટે notFound() નો ઉપયોગ કરો. આ not-found.js ને ટ્રિગર કરે છે.
  • અણધારી નિષ્ફળતા માટે throw Error() નો ઉપયોગ કરો. આ error.js ને ટ્રિગર કરે છે.

આ વિભાજન તમારી એપ્લિકેશનને ક્લીન રાખે છે. ખૂટતી બ્લોગ પોસ્ટ શોધી રહેલા વપરાશકર્તાને 404 પેજ દેખાય છે. ડેટાબેઝ ક્રેશનો સામનો કરી રહેલા વપરાશકર્તાને error message દેખાય છે.

હું એક AI image generator માટે આ પેટર્નનો ઉપયોગ કરું છું. આ પ્રક્રિયામાં API calls અને file uploads જેવા ઘણા સ્ટેપ્સ હોય છે. જો એક સ્ટેપ નિષ્ફળ જાય, તો error boundary એક ચોક્કસ મેસેજ બતાવે છે. reset બટન વપરાશકર્તાને તેમનો prompt ગુમાવ્યા વિના ફરીથી પ્રયાસ કરવાની મંજૂરી આપે છે.

એક સારી રચના (structure) આ મુજબ દેખાય છે:

• global-error.js: અંતિમ સેફ્ટી નેટ. • error.js: root-level ભૂલો હેન્ડલ કરે છે. • dashboard/error.js: ડેશબોર્ડની અંદરની ભૂલો હેન્ડલ કરે છે. • auth/error.js: લોગિન અથવા સેશન ભૂલો હેન્ડલ કરે છે.

આ અભિગમ એક નાની ભૂલને તમારી આખી વેબસાઇટ બગાડતા અટકાવે છે.

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