6 સપ્ટેમ્બર, 2025ગુજરાતી

વપરાશકર્તા અનુભવ અને એપ્લિકેશન સ્થિરતામાં સુધારો કરીને, રિસોર્સ લોડિંગ ભૂલોને સરળતાથી સંભાળવા માટે Hooks સાથે React Error Boundaries કેવી રીતે લાગુ કરવું તે શીખો.

React માં મજબૂત રિસોર્સ લોડિંગ: Hooks સાથે Error Boundaries માં નિપુણતા મેળવો

આધુનિક વેબ એપ્લિકેશન્સમાં, એસિંક્રોનસ રીતે રિસોર્સ લોડ કરવું એ એક સામાન્ય પ્રથા છે. ભલે તે API માંથી ડેટા મેળવવો હોય, ઇમેજ લોડ કરવી હોય, અથવા મોડ્યુલ્સ આયાત કરવા હોય, રિસોર્સ લોડિંગ દરમિયાન સંભવિત ભૂલોને સંભાળવી એ એક સરળ વપરાશકર્તા અનુભવ માટે નિર્ણાયક છે. React Error Boundaries તેમના ચાઈલ્ડ કમ્પોનન્ટ ટ્રીમાં ગમે ત્યાં JavaScript ભૂલોને પકડવા, તે ભૂલોને લોગ કરવા અને સમગ્ર એપ્લિકેશનને ક્રેશ કરવાને બદલે ફોલબેક UI પ્રદર્શિત કરવાની એક પદ્ધતિ પ્રદાન કરે છે. આ લેખ રિસોર્સ લોડિંગ ભૂલોને સંચાલિત કરવા માટે React Hooks સાથે Error Boundaries નો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે શોધે છે.

Error Boundaries ને સમજવું

React 16 પહેલા, કમ્પોનન્ટ રેન્ડરિંગ દરમિયાન અનહેન્ડલ્ડ JavaScript ભૂલો React ની આંતરિક સ્થિતિને ભ્રષ્ટ કરતી હતી અને પછીના રેન્ડર્સ પર ગૂઢ ભૂલોનું કારણ બનતી હતી. Error Boundaries તેમના ચાઈલ્ડ કમ્પોનન્ટ્સમાં થતી ભૂલો માટે કેચ-ઓલ બ્લોક્સ તરીકે કાર્ય કરીને આને સંબોધિત કરે છે. તે React કમ્પોનન્ટ્સ છે જે નીચેની બંને અથવા કોઈપણ એક લાઇફસાયકલ પદ્ધતિઓ લાગુ કરે છે:

static getDerivedStateFromError(error): આ સ્ટેટિક પદ્ધતિ ડિસેન્ડન્ટ કમ્પોનન્ટ દ્વારા ભૂલ ફેંકાયા પછી બોલાવવામાં આવે છે. તે ફેંકવામાં આવેલી ભૂલને દલીલ તરીકે મેળવે છે અને કમ્પોનન્ટની સ્થિતિને અપડેટ કરવા માટે એક મૂલ્ય પરત કરે છે.
componentDidCatch(error, info): આ લાઇફસાયકલ પદ્ધતિ ડિસેન્ડન્ટ કમ્પોનન્ટ દ્વારા ભૂલ ફેંકાયા પછી બોલાવવામાં આવે છે. તે ફેંકવામાં આવેલી ભૂલને દલીલ તરીકે, તેમજ કયા કમ્પોનન્ટે ભૂલ ફેંકી છે તેની માહિતી ધરાવતા ઓબ્જેક્ટને મેળવે છે. તમે તેનો ઉપયોગ ભૂલ માહિતી લોગ કરવા માટે કરી શકો છો.

મહત્વપૂર્ણ રીતે, Error Boundaries ફક્ત રેન્ડરિંગ તબક્કામાં, લાઇફસાયકલ પદ્ધતિઓમાં, અને તેમની નીચેના સમગ્ર ટ્રીના કન્સ્ટ્રક્ટર્સમાં જ ભૂલો પકડે છે. તેઓ આના માટે ભૂલો પકડતા નથી:

ઇવેન્ટ હેન્ડલર્સ (નીચેના વિભાગમાં વધુ જાણો)
એસિંક્રોનસ કોડ (દા.ત., setTimeout અથવા requestAnimationFrame કોલબેક્સ)
સર્વર-સાઇડ રેન્ડરિંગ
Error Boundary માં જ ફેંકાયેલી ભૂલો (તેના ચિલ્ડ્રનને બદલે)

Error Boundaries અને React Hooks: એક શક્તિશાળી સંયોજન

જ્યારે ક્લાસ કમ્પોનન્ટ્સનો પરંપરાગત રીતે Error Boundaries લાગુ કરવા માટે ઉપયોગ થતો હતો, ત્યારે React Hooks વધુ સંક્ષિપ્ત અને કાર્યાત્મક અભિગમ પ્રદાન કરે છે. આપણે એક ફરીથી વાપરી શકાય તેવું useErrorBoundary hook બનાવી શકીએ છીએ જે એરર હેન્ડલિંગ લોજિકને સમાવે છે અને રિસોર્સ લોડિંગ દરમિયાન ભૂલો ફેંકી શકે તેવા કમ્પોનન્ટ્સને લપેટવાની અનુકૂળ રીત પ્રદાન કરે છે.

એક કસ્ટમ `useErrorBoundary` Hook બનાવવું

અહીં useErrorBoundary hook નું ઉદાહરણ છે:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : An error occurred: {error.message || String(error)};
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

સમજૂતી:

useState: આપણે એરર સ્ટેટનું સંચાલન કરવા માટે useState નો ઉપયોગ કરીએ છીએ. તે શરૂઆતમાં એરરને null પર સેટ કરે છે.
useCallback: આપણે resetError અને captureError ફંક્શન્સને મેમોઇઝ કરવા માટે useCallback નો ઉપયોગ કરીએ છીએ. જો આ ફંક્શન્સ પ્રોપ્સ તરીકે નીચે મોકલવામાં આવે તો બિનજરૂરી રી-રેન્ડર્સ અટકાવવા માટે આ એક સારી પ્રથા છે.
ErrorBoundary કમ્પોનન્ટ: આ useCallback સાથે બનાવેલ એક ફંક્શનલ કમ્પોનન્ટ છે જે children અને વૈકલ્પિક fallback પ્રોપ લે છે. જો સ્ટેટમાં કોઈ એરર હોય, તો તે પૂરા પાડવામાં આવેલ fallback કમ્પોનન્ટ અથવા ડિફોલ્ટ એરર સંદેશ રેન્ડર કરે છે. નહિંતર, તે ચિલ્ડ્રનને રેન્ડર કરે છે. આ આપણી Error Boundary તરીકે કાર્ય કરે છે. ડિપેન્ડન્સી એરે `[error]` ખાતરી કરે છે કે જ્યારે `error` સ્ટેટ બદલાય ત્યારે તે રી-રેન્ડર થાય છે.
captureError ફંક્શન: આ ફંક્શનનો ઉપયોગ એરર સ્ટેટ સેટ કરવા માટે થાય છે. તમે રિસોર્સ લોડ કરતી વખતે આને try...catch બ્લોકમાં કૉલ કરશો.
resetError ફંક્શન: આ ફંક્શન એરર સ્ટેટને સાફ કરે છે, જેનાથી કમ્પોનન્ટ તેના ચિલ્ડ્રનને રી-રેન્ડર કરી શકે છે (સંભવતઃ રિસોર્સ લોડિંગનો ફરીથી પ્રયાસ કરીને).

એરર હેન્ડલિંગ સાથે રિસોર્સ લોડિંગનું અમલીકરણ

હવે, ચાલો જોઈએ કે રિસોર્સ લોડિંગ ભૂલોને સંભાળવા માટે આ hook નો ઉપયોગ કેવી રીતે કરવો. એક કમ્પોનન્ટનો વિચાર કરો જે API માંથી વપરાશકર્તા ડેટા મેળવે છે:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data.

}>
        An error occurred. This won't be shown because of fallback.
      
    );
  }

  if (!user) {
    return Loading user data...;
  }

  return (
    
      {user.name}
      Email: {user.email}
      {/* Other user details */}
    
  );
}

export default UserProfile;

સમજૂતી:

આપણે useErrorBoundary hook ને આયાત કરીએ છીએ.
આપણે ErrorBoundary કમ્પોનન્ટ, captureError ફંક્શન, error સ્ટેટ, અને resetError ફંક્શન મેળવવા માટે hook ને કૉલ કરીએ છીએ.
useEffect hook ની અંદર, આપણે API કૉલને try...catch બ્લોકમાં લપેટીએ છીએ.
જો API કૉલ દરમિયાન કોઈ ભૂલ થાય, તો આપણે એરર સ્ટેટ સેટ કરવા માટે captureError(e) ને કૉલ કરીએ છીએ.
જો error સ્ટેટ સેટ થયેલ હોય, તો આપણે ErrorBoundary કમ્પોનન્ટ રેન્ડર કરીએ છીએ. આપણે એક કસ્ટમ fallback પ્રોપ પ્રદાન કરીએ છીએ જે એરર સંદેશ અને "Retry" બટન દર્શાવે છે. બટન પર ક્લિક કરવાથી એરર સ્ટેટ સાફ કરવા માટે resetError કૉલ થાય છે, જે રી-રેન્ડરને ટ્રિગર કરે છે અને ડેટા મેળવવાનો બીજો પ્રયાસ કરે છે.
જો કોઈ ભૂલ ન થઈ હોય અને વપરાશકર્તા ડેટા લોડ થઈ ગયો હોય, તો આપણે વપરાશકર્તા પ્રોફાઇલ વિગતો રેન્ડર કરીએ છીએ.

વિવિધ પ્રકારની રિસોર્સ લોડિંગ ભૂલોને સંભાળવી

વિવિધ પ્રકારની રિસોર્સ લોડિંગ ભૂલો માટે વિવિધ સંચાલન વ્યૂહરચનાઓની જરૂર પડી શકે છે. અહીં કેટલાક સામાન્ય દૃશ્યો અને તેમને કેવી રીતે સંબોધિત કરવા તે આપેલ છે:

નેટવર્ક ભૂલો

નેટવર્ક ભૂલો ત્યારે થાય છે જ્યારે ક્લાયન્ટ સર્વર સાથે કનેક્ટ થવામાં અસમર્થ હોય છે (દા.ત., નેટવર્ક આઉટેજ અથવા સર્વર ડાઉનટાઇમને કારણે). ઉપરોક્ત ઉદાહરણ `response.ok` નો ઉપયોગ કરીને મૂળભૂત નેટવર્ક ભૂલોને પહેલેથી જ સંભાળે છે. તમે વધુ સુસંસ્કૃત એરર ડિટેક્શન ઉમેરવા માગી શકો છો, ઉદાહરણ તરીકે:

            //Inside the fetchData function
try {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    // Consider adding specific error code handling
    if (response.status === 404) {
      throw new Error("User not found");
    } else if (response.status >= 500) {
      throw new Error("Server error. Please try again later.");
    } else {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
  }
  const data = await response.json();
  setUser(data);
} catch (error) {
  if (error.message === 'Failed to fetch') {
    // Likely a network error
    captureError(new Error('Network error. Please check your internet connection.'));
  } else {
    captureError(error);
  }
}

આ કિસ્સામાં, તમે વપરાશકર્તાને એક સંદેશ પ્રદર્શિત કરી શકો છો જે દર્શાવે છે કે નેટવર્ક કનેક્ટિવિટી સમસ્યા છે અને તેમને તેમનું ઇન્ટરનેટ કનેક્શન તપાસવાનું સૂચન કરી શકો છો.

API ભૂલો

API ભૂલો ત્યારે થાય છે જ્યારે સર્વર એરર પ્રતિસાદ પરત કરે છે (દા.ત., 400 Bad Request અથવા 500 Internal Server Error). ઉપર બતાવ્યા પ્રમાણે, તમે `response.status` ચકાસી શકો છો અને આ ભૂલોને યોગ્ય રીતે સંભાળી શકો છો.

ડેટા પાર્સિંગ ભૂલો

ડેટા પાર્સિંગ ભૂલો ત્યારે થાય છે જ્યારે સર્વર તરફથી પ્રતિસાદ અપેક્ષિત ફોર્મેટમાં ન હોય અને તેને પાર્સ કરી શકાતો નથી (દા.ત., અમાન્ય JSON). તમે response.json() કૉલને try...catch બ્લોકમાં લપેટીને આ ભૂલોને સંભાળી શકો છો:

            //Inside the fetchData function
try {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const data = await response.json();
  setUser(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    captureError(new Error('Failed to parse data from server.'));
  } else {
    captureError(error);
  }
}

ઇમેજ લોડિંગ ભૂલો

ઇમેજ લોડિંગ માટે, તમે <img> ટેગ પર onError ઇવેન્ટ હેન્ડલરનો ઉપયોગ કરી શકો છો:

            function MyImage({ src, alt }) {
  const { ErrorBoundary, captureError } = useErrorBoundary();
  const [imageLoaded, setImageLoaded] = useState(false);

  const handleImageLoad = () => {
    setImageLoaded(true);
  };

  const handleImageError = (e) => {
    captureError(new Error(`Failed to load image: ${src}`));
  };

  return (
    Failed to load image.

}>
      
      {!imageLoaded && Loading image...}
    
  );
}

React માં મજબૂત રિસોર્સ લોડિંગ: Hooks સાથે Error Boundaries માં નિપુણતા મેળવો

Error Boundaries ને સમજવું

Error Boundaries અને React Hooks: એક શક્તિશાળી સંયોજન

એક કસ્ટમ `useErrorBoundary` Hook બનાવવું

એરર હેન્ડલિંગ સાથે રિસોર્સ લોડિંગનું અમલીકરણ

{user.name}

વિવિધ પ્રકારની રિસોર્સ લોડિંગ ભૂલોને સંભાળવી

નેટવર્ક ભૂલો

API ભૂલો

ડેટા પાર્સિંગ ભૂલો

ઇમેજ લોડિંગ ભૂલો

Error Boundaries નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

કસ્ટમ Hooks ના વિકલ્પો

ગ્લોબલ એરર હેન્ડલિંગ

ઍક્સેસિબિલિટીની બાબતો

નિષ્કર્ષ

React માં મજબૂત રિસોર્સ લોડિંગ: Hooks સાથે Error Boundaries માં નિપુણતા મેળવો

Error Boundaries ને સમજવું

Error Boundaries અને React Hooks: એક શક્તિશાળી સંયોજન

એક કસ્ટમ useErrorBoundary Hook બનાવવું

એરર હેન્ડલિંગ સાથે રિસોર્સ લોડિંગનું અમલીકરણ

{user.name}

વિવિધ પ્રકારની રિસોર્સ લોડિંગ ભૂલોને સંભાળવી

નેટવર્ક ભૂલો

API ભૂલો

ડેટા પાર્સિંગ ભૂલો

ઇમેજ લોડિંગ ભૂલો

Error Boundaries નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

કસ્ટમ Hooks ના વિકલ્પો

ગ્લોબલ એરર હેન્ડલિંગ

ઍક્સેસિબિલિટીની બાબતો

નિષ્કર્ષ

એક કસ્ટમ `useErrorBoundary` Hook બનાવવું