Next.js App Router ਵਿੱਚ Error Boundaries
ਜ਼ਿਆਦਾਤਰ Next.js ਐਪਸ ਉਦੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੀਆਂ ਹਨ ਜਦੋਂ ਸਭ ਕੁਝ ਸਹੀ ਚੱਲਦਾ ਹੈ। ਜਦੋਂ ਚੀਜ਼ਾਂ ਗਲਤ ਹੋ ਜਾਂਦੀਆਂ ਹਨ, ਤਾਂ ਉਹ ਫੇਲ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਉੱਚ ਗੁਣਵੱਤਾ ਵਾਲੀਆਂ ਐਪਸ ਇਹਨਾਂ ਅਸਫਲਤਾਵਾਂ ਨੂੰ ਸੁਚੱਜੇ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣ ਲਈ error boundaries ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ।
App Router, Pages Router ਨਾਲੋਂ ਵੱਖਰਾ ਮਾਡਲ ਵਰਤਦਾ ਹੈ। ਇਹ React Error Boundaries 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਰੂਟ ਦੇ ਕਿਸੇ ਵੀ ਪੱਧਰ 'ਤੇ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜਨ ਲਈ error.js ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।
ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
• Errors ਸਭ ਤੋਂ ਨੇੜਲੇ error.js boundary ਦੇ ਅੰਦਰ ਹੀ ਰਹਿੰਦੇ ਹਨ। • Errors ਕਿਸੇ global handler ਵੱਲ ਨਹੀਂ ਜਾਂਦੇ, ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਅਜਿਹਾ ਨਹੀਂ ਚਾਹੁੰਦੇ। • ਤੁਸੀਂ ਆਪਣੀ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਲਈ ਵੱਖ-ਵੱਖ error screens ਦਿਖਾ ਸਕਦੇ ਹੋ।
error.js ਫਾਈਲ ਦੇ ਨਿਯਮ:
- ਇਹ ਇੱਕ Client Component ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਉੱਪਰ 'use client' ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਇਹ ਉਸ segment ਅਤੇ ਉਸਦੇ ਸਾਰੇ children ਵਿੱਚ ਹੋਣ ਵਾਲੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਫੜਦਾ ਹੈ।
- ਤੁਹਾਨੂੰ ਫੇਲ ਹੋਏ render ਨੂੰ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਇੱਕ reset function ਮਿਲਦਾ ਹੈ।
ਨੈੱਟਵਰਕ ਡਿੱਗਣ ਵਰਗੀਆਂ ਅਸਥਾਈ ਸਮੱਸਿਆਵਾਂ ਲਈ reset function ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਸਦੀ ਵਰਤੋਂ ਸਥਾਈ ਗਲਤੀਆਂ ਲਈ ਨਾ ਕਰੋ।
root layout ਲਈ global-error.js ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸਟੈਂਡਰਡ error.js, root layout.js ਵਿੱਚ ਹੋਣ ਵਾਲੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਨਹੀਂ ਫੜਦਾ। global-error.js ਤੁਹਾਡਾ ਆਖਰੀ ਵਿਕਲਪ ਹੈ। ਇਹ root layout ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਸਨੂੰ ਆਪਣੇ ਖੁਦ ਦੇ ਅਤੇ
tags ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।ਵੱਖ-ਵੱਖ error types ਨੂੰ ਸੰਭਾਲਣਾ:
- ਗੁੰਮ ਹੋਏ ਡੇਟਾ ਲਈ notFound() ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ not-found.js ਨੂੰ trigger ਕਰਦਾ ਹੈ।
- ਅਚਾਨਕ ਅਸਫਲਤਾਵਾਂ ਲਈ throw Error() ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ error.js ਨੂੰ trigger ਕਰਦਾ ਹੈ।
ਇਹ ਵੱਖਰੇਵੇਂ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਸਾਫ਼ ਰੱਖਦਾ ਹੈ। ਇੱਕ ਉਪਭੋਗਤਾ ਜੋ ਗੁੰਮ ਹੋਏ ਬਲੌਗ ਪੋਸਟ ਦੀ ਭਾਲ ਕਰ ਰਿਹਾ ਹੈ, ਉਹ 404 ਪੇਜ ਦੇਖਦਾ ਹੈ। ਇੱਕ ਉਪਭੋਗਤਾ ਜੋ ਡੇਟਾਬੇਸ ਕ੍ਰੈਸ਼ ਦਾ ਸਾਹਮਣਾ ਕਰ ਰਿਹਾ ਹੈ, ਉਹ error message ਦੇਖਦਾ ਹੈ।
ਮੈਂ ਇੱਕ AI image generator ਲਈ ਇਸ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ API calls ਅਤੇ file uploads ਵਰਗੇ ਕਈ ਪੜਾਅ ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਇੱਕ ਪੜਾਅ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ error boundary ਇੱਕ ਖਾਸ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦੀ ਹੈ। Reset ਬਟਨ ਉਪਭੋਗਤਾ ਨੂੰ ਆਪਣਾ prompt ਗੁਆਏ ਬਿਨਾਂ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਇੱਕ ਵਧੀਆ structure ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
• global-error.js: ਆਖਰੀ ਸੁਰੱਖਿਆ ਜਾਲ (safety net)। • error.js: root-level errors ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। • dashboard/error.js: dashboard ਦੇ ਅੰਦਰ ਹੋਣ ਵਾਲੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। • auth/error.js: login ਜਾਂ session errors ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
ਇਹ ਤਰੀਕਾ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਗਲਤੀ ਨੂੰ ਤੁਹਾਡੀ ਪੂਰੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਖਰਾਬ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ।