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

મજબૂત એરર હેન્ડલિંગ અને સુંદર UI ડિગ્રેડેશન માટે રિએક્ટમાં જાવાસ્ક્રિપ્ટ એરર બાઉન્ડ્રીઝને સમજવા અને અમલમાં મૂકવા માટેની એક વ્યાપક માર્ગદર્શિકા.

જાવાસ્ક્રિપ્ટ એરર બાઉન્ડ્રી: રિએક્ટ એરર હેન્ડલિંગ માટે અમલીકરણ માર્ગદર્શિકા

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

એરર બાઉન્ડ્રી શું છે?

એરર બાઉન્ડ્રી એ એક રિએક્ટ કમ્પોનન્ટ છે જે તેના ચાઇલ્ડ કમ્પોનન્ટ ટ્રીમાં ગમે ત્યાં જાવાસ્ક્રિપ્ટ ભૂલોને પકડે છે, તે ભૂલોને લોગ કરે છે, અને ક્રેશ થયેલા કમ્પોનન્ટ ટ્રીને બદલે ફોલબેક UI પ્રદર્શિત કરે છે. એરર બાઉન્ડ્રીઝ રેન્ડરિંગ દરમિયાન, લાઇફસાયકલ મેથડ્સમાં, અને તેમની નીચેના સમગ્ર ટ્રીના કન્સ્ટ્રક્ટર્સમાં ભૂલોને પકડે છે.

એરર બાઉન્ડ્રીને રિએક્ટ કમ્પોનન્ટ્સ માટે try...catch બ્લોક તરીકે વિચારો. જેમ try...catch બ્લોક તમને સિંક્રનસ જાવાસ્ક્રિપ્ટ કોડમાં એક્સેપ્શન્સને હેન્ડલ કરવાની મંજૂરી આપે છે, તેમ એરર બાઉન્ડ્રી તમને તમારા રિએક્ટ કમ્પોનન્ટ્સના રેન્ડરિંગ દરમિયાન થતી ભૂલોને હેન્ડલ કરવાની મંજૂરી આપે છે.

મહત્વપૂર્ણ નોંધ: એરર બાઉન્ડ્રીઝ નથી આ માટે ભૂલો પકડતી:

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

એરર બાઉન્ડ્રીઝનો ઉપયોગ શા માટે કરવો?

એરર બાઉન્ડ્રીઝનો ઉપયોગ કરવાથી ઘણા નોંધપાત્ર ફાયદાઓ મળે છે:

વપરાશકર્તા અનુભવમાં સુધારો: ખાલી સફેદ સ્ક્રીન અથવા ગૂઢ એરર સંદેશ પ્રદર્શિત કરવાને બદલે, તમે વપરાશકર્તા-મૈત્રીપૂર્ણ ફોલબેક UI બતાવી શકો છો, જે વપરાશકર્તાને જાણ કરે છે કે કંઈક ખોટું થયું છે અને સંભવિતપણે પુનઃપ્રાપ્ત કરવાનો માર્ગ ઓફર કરે છે (દા.ત., પેજને ફરીથી લોડ કરવું અથવા અલગ વિભાગમાં નેવિગેટ કરવું).
એપ્લિકેશન સ્થિરતા: એરર બાઉન્ડ્રીઝ તમારી એપ્લિકેશનના એક ભાગમાંની ભૂલોને સમગ્ર એપ્લિકેશનને ક્રેશ થતી અટકાવે છે. આ ખાસ કરીને ઘણા આંતરસંબંધિત કમ્પોનન્ટ્સવાળી જટિલ એપ્લિકેશનો માટે મહત્વપૂર્ણ છે.
કેન્દ્રિય એરર હેન્ડલિંગ: એરર બાઉન્ડ્રીઝ ભૂલોને લોગ કરવા અને સમસ્યાઓના મૂળ કારણને શોધવા માટે એક કેન્દ્રિય સ્થાન પ્રદાન કરે છે. આ ડિબગીંગ અને જાળવણીને સરળ બનાવે છે.
ગ્રેસફુલ ડિગ્રેડેશન: તમે તમારી એપ્લિકેશનના જુદા જુદા ભાગોની આસપાસ વ્યૂહાત્મક રીતે એરર બાઉન્ડ્રીઝ મૂકી શકો છો જેથી ખાતરી કરી શકાય કે જો કેટલાક કમ્પોનન્ટ્સ નિષ્ફળ જાય, તો પણ બાકીની એપ્લિકેશન કાર્યરત રહે. આ ભૂલોના કિસ્સામાં ગ્રેસફુલ ડિગ્રેડેશનની મંજૂરી આપે છે.

રિએક્ટમાં એરર બાઉન્ડ્રીઝનો અમલ કરવો

એરર બાઉન્ડ્રી બનાવવા માટે, તમારે એક ક્લાસ કમ્પોનન્ટને વ્યાખ્યાયિત કરવાની જરૂર છે જે નીચેની લાઇફસાયકલ મેથડ્સમાંથી કોઈપણ (અથવા બંને) ને લાગુ કરે છે:

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

અહીં એરર બાઉન્ડ્રી કમ્પોનન્ટનું એક મૂળભૂત ઉદાહરણ છે:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // સ્ટેટ અપડેટ કરો જેથી આગામી રેન્ડર ફોલબેક UI બતાવે.
    return {
      hasError: true,
      error: error
    };
  }

  componentDidCatch(error, info) {
    // ઉદાહરણ "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in MyErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    console.error("Caught an error:", error, info);
    this.setState({
        errorInfo: info.componentStack
    });
    // તમે એરર રિપોર્ટિંગ સર્વિસમાં પણ એરર લોગ કરી શકો છો
    //logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // તમે કોઈપણ કસ્ટમ ફોલબેક UI રેન્ડર કરી શકો છો
      return (
        <div>
          <h2>કંઈક ખોટું થયું છે.</h2>
          <p>ભૂલ: {this.state.error ? this.state.error.message : "એક અજાણી ભૂલ આવી છે."}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

એરર બાઉન્ડ્રીનો ઉપયોગ કરવા માટે, ફક્ત તે કમ્પોનન્ટ ટ્રીને રેપ કરો જેને તમે સુરક્ષિત કરવા માંગો છો:


<ErrorBoundary>
  <MyComponentThatMightThrow/>
</ErrorBoundary>

એરર બાઉન્ડ્રીના ઉપયોગના વ્યવહારુ ઉદાહરણો

ચાલો કેટલાક વ્યવહારુ દૃશ્યોનું અન્વેષણ કરીએ જ્યાં એરર બાઉન્ડ્રીઝ ખાસ કરીને ઉપયોગી થઈ શકે છે:

૧. API ભૂલોને હેન્ડલ કરવી

API માંથી ડેટા મેળવતી વખતે, નેટવર્ક સમસ્યાઓ, સર્વર સમસ્યાઓ અથવા અમાન્ય ડેટાને કારણે ભૂલો થઈ શકે છે. તમે તે કમ્પોનન્ટને એરર બાઉન્ડ્રી સાથે રેપ કરી શકો છો જે ડેટા મેળવે છે અને પ્રદર્શિત કરે છે જેથી આ ભૂલોને સુંદર રીતે હેન્ડલ કરી શકાય.


function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/user');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        // ભૂલ ErrorBoundary દ્વારા પકડવામાં આવશે
        throw error; 
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>વપરાશકર્તા પ્રોફાઇલ લોડ થઈ રહી છે...</p>;
  }

  if (!user) {
    return <p>કોઈ વપરાશકર્તા ડેટા ઉપલબ્ધ નથી.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ઈમેલ: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
    </ErrorBoundary>
  );
}

આ ઉદાહરણમાં, જો API કોલ નિષ્ફળ જાય અથવા એરર રિટર્ન કરે, તો એરર બાઉન્ડ્રી એરરને પકડશે અને ફોલબેક UI (એરર બાઉન્ડ્રીની render મેથડમાં વ્યાખ્યાયિત) પ્રદર્શિત કરશે. આ સમગ્ર એપ્લિકેશનને ક્રેશ થતી અટકાવે છે અને વપરાશકર્તાને વધુ માહિતીપ્રદ સંદેશ પ્રદાન કરે છે. તમે વિનંતીને ફરીથી પ્રયાસ કરવાનો વિકલ્પ પ્રદાન કરવા માટે ફોલબેક UI ને વિસ્તૃત કરી શકો છો.

૨. થર્ડ-પાર્ટી લાઇબ્રેરીની ભૂલોને હેન્ડલ કરવી

થર્ડ-પાર્ટી લાઇબ્રેરીઓનો ઉપયોગ કરતી વખતે, તે શક્ય છે કે તેઓ અનપેક્ષિત ભૂલો ફેંકી શકે. આ લાઇબ્રેરીઓનો ઉપયોગ કરતા કમ્પોનન્ટ્સને એરર બાઉન્ડ્રીઝ સાથે રેપ કરવાથી તમને આ ભૂલોને સુંદર રીતે હેન્ડલ કરવામાં મદદ મળી શકે છે.

એક કાલ્પનિક ચાર્ટિંગ લાઇબ્રેરીનો વિચાર કરો જે ડેટાની અસંગતતા અથવા અન્ય સમસ્યાઓને કારણે ક્યારેક-ક્યારેક ભૂલો ફેંકે છે. તમે ચાર્ટિંગ કમ્પોનન્ટને આ રીતે રેપ કરી શકો છો:


function MyChartComponent() {
  try {
    // થર્ડ-પાર્ટી લાઇબ્રેરીનો ઉપયોગ કરીને ચાર્ટ રેન્ડર કરો
    return <Chart data={data} />;
  } catch (error) {
    // આ કેચ બ્લોક રિએક્ટ કમ્પોનન્ટ લાઇફસાયકલ ભૂલો માટે અસરકારક રહેશે નહીં
    // તે મુખ્યત્વે આ વિશિષ્ટ ફંક્શનની અંદરની સિંક્રનસ ભૂલો માટે છે.
    console.error("Error rendering chart:", error);
    // ErrorBoundary દ્વારા પકડવા માટે એરરને થ્રો કરવાનો વિચાર કરો
    throw error; // એરરને ફરીથી થ્રો કરવી
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyChartComponent />
    </ErrorBoundary>
  );
}

જો Chart કમ્પોનન્ટ એરર ફેંકે, તો એરર બાઉન્ડ્રી તેને પકડશે અને ફોલબેક UI પ્રદર્શિત કરશે. નોંધ લો કે MyChartComponent ની અંદરનો try/catch ફક્ત સિંક્રનસ ફંક્શનની અંદરની ભૂલોને જ પકડશે, કમ્પોનન્ટના લાઇફસાયકલને નહીં. તેથી, અહીં ErrorBoundary નિર્ણાયક છે.

૩. રેન્ડરિંગ ભૂલોને હેન્ડલ કરવી

રેન્ડરિંગ પ્રક્રિયા દરમિયાન અમાન્ય ડેટા, ખોટા પ્રોપ પ્રકારો અથવા અન્ય સમસ્યાઓને કારણે ભૂલો થઈ શકે છે. એરર બાઉન્ડ્રીઝ આ ભૂલોને પકડી શકે છે અને એપ્લિકેશનને ક્રેશ થતી અટકાવી શકે છે.


function DisplayName({ name }) {
  if (typeof name !== 'string') {
    throw new Error('Name must be a string');
  }

  return <h2>Hello, {name}!</h2>;
}

function App() {
  return (
    <ErrorBoundary>
      <DisplayName name={123} />  <!-- ખોટો પ્રોપ પ્રકાર -->
    </ErrorBoundary>
  );
}

આ ઉદાહરણમાં, DisplayName કમ્પોનન્ટ અપેક્ષા રાખે છે કે name પ્રોપ એક સ્ટ્રિંગ હોય. જો તેના બદલે કોઈ નંબર પાસ કરવામાં આવે, તો એક એરર ફેંકવામાં આવશે, અને એરર બાઉન્ડ્રી તેને પકડશે અને ફોલબેક UI પ્રદર્શિત કરશે.

એરર બાઉન્ડ્રીઝ અને ઇવેન્ટ હેન્ડલર્સ

પહેલાં ઉલ્લેખ કર્યો તેમ, એરર બાઉન્ડ્રીઝ ઇવેન્ટ હેન્ડલર્સની અંદર થતી ભૂલોને પકડતી નથી. આનું કારણ એ છે કે ઇવેન્ટ હેન્ડલર્સ સામાન્ય રીતે એસિંક્રોનસ હોય છે, અને એરર બાઉન્ડ્રીઝ ફક્ત રેન્ડરિંગ દરમિયાન, લાઇફસાયકલ મેથડ્સમાં અને કન્સ્ટ્રક્ટર્સમાં થતી ભૂલોને જ પકડે છે.

ઇવેન્ટ હેન્ડલર્સમાં ભૂલોને હેન્ડલ કરવા માટે, તમારે ઇવેન્ટ હેન્ડલર ફંક્શનની અંદર પરંપરાગત try...catch બ્લોકનો ઉપયોગ કરવાની જરૂર છે.


function MyComponent() {
  const handleClick = () => {
    try {
      // અમુક કોડ જે એરર ફેંકી શકે છે
      throw new Error('An error occurred in the event handler');
    } catch (error) {
      console.error('Caught an error in the event handler:', error);
      // એરરને હેન્ડલ કરો (દા.ત., વપરાશકર્તાને એરર સંદેશ પ્રદર્શિત કરો)
    }
  };

  return <button onClick={handleClick}>Click Me</button>;
}

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

જ્યારે એરર બાઉન્ડ્રીઝ રિએક્ટ કમ્પોનન્ટ ટ્રીની અંદર ભૂલોને હેન્ડલ કરવા માટે ઉત્તમ છે, ત્યારે તે તમામ સંભવિત એરર દૃશ્યોને આવરી લેતી નથી. ઉદાહરણ તરીકે, તેઓ રિએક્ટ કમ્પોનન્ટ્સની બહાર થતી ભૂલોને પકડતા નથી, જેમ કે ગ્લોબલ ઇવેન્ટ લિસનર્સમાં ભૂલો અથવા રિએક્ટ શરૂ થાય તે પહેલાં ચાલતા કોડમાં ભૂલો.

આ પ્રકારની ભૂલોને હેન્ડલ કરવા માટે, તમે window.onerror ઇવેન્ટ હેન્ડલરનો ઉપયોગ કરી શકો છો.


window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error handler:', message, source, lineno, colno, error);
  // સેન્ટ્રી અથવા બગસ્નેગ જેવી સેવામાં એરર લોગ કરો
  // વપરાશકર્તાને ગ્લોબલ એરર સંદેશ પ્રદર્શિત કરો (વૈકલ્પિક)
  return true; // ડિફોલ્ટ એરર હેન્ડલિંગ વર્તનને અટકાવો
};

window.onerror ઇવેન્ટ હેન્ડલરને જ્યારે પણ કોઈ અનકોટ જાવાસ્ક્રિપ્ટ એરર આવે ત્યારે કોલ કરવામાં આવે છે. તમે તેનો ઉપયોગ એરર લોગ કરવા, વપરાશકર્તાને ગ્લોબલ એરર સંદેશ પ્રદર્શિત કરવા, અથવા એરરને હેન્ડલ કરવા માટે અન્ય ક્રિયાઓ કરવા માટે કરી શકો છો.

મહત્વપૂર્ણ: window.onerror ઇવેન્ટ હેન્ડલરમાંથી true રિટર્ન કરવાથી બ્રાઉઝરને ડિફોલ્ટ એરર સંદેશ પ્રદર્શિત કરતા અટકાવે છે. જોકે, વપરાશકર્તા અનુભવનું ધ્યાન રાખો; જો તમે ડિફોલ્ટ સંદેશને દબાવો છો, તો ખાતરી કરો કે તમે એક સ્પષ્ટ અને માહિતીપ્રદ વિકલ્પ પ્રદાન કરો છો.

એરર બાઉન્ડ્રીઝનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

એરર બાઉન્ડ્રીઝનો ઉપયોગ કરતી વખતે ધ્યાનમાં રાખવા માટે અહીં કેટલીક શ્રેષ્ઠ પદ્ધતિઓ છે:

એરર બાઉન્ડ્રીઝને વ્યૂહાત્મક રીતે મૂકો: ભૂલોને અલગ કરવા અને તેમને કેસ્કેડિંગથી રોકવા માટે તમારી એપ્લિકેશનના જુદા જુદા ભાગોને એરર બાઉન્ડ્રીઝ સાથે રેપ કરો. સમગ્ર રૂટ્સ અથવા તમારા UI ના મુખ્ય વિભાગોને રેપ કરવાનું વિચારો.
માહિતીપ્રદ ફોલબેક UI પ્રદાન કરો: ફોલબેક UI એ વપરાશકર્તાને જાણ કરવી જોઈએ કે એક એરર આવી છે અને સંભવિતપણે પુનઃપ્રાપ્ત કરવાનો માર્ગ ઓફર કરવો જોઈએ. "કંઈક ખોટું થયું." જેવા સામાન્ય એરર સંદેશાઓ પ્રદર્શિત કરવાનું ટાળો.
ભૂલો લોગ કરો: સેન્ટ્રી અથવા બગસ્નેગ જેવી સેવામાં ભૂલો લોગ કરવા માટે componentDidCatch લાઇફસાયકલ મેથડનો ઉપયોગ કરો. આ તમને સમસ્યાઓના મૂળ કારણને શોધવામાં અને તમારી એપ્લિકેશનની સ્થિરતા સુધારવામાં મદદ કરશે.
અપેક્ષિત ભૂલો માટે એરર બાઉન્ડ્રીઝનો ઉપયોગ કરશો નહીં: એરર બાઉન્ડ્રીઝ અનપેક્ષિત ભૂલોને હેન્ડલ કરવા માટે ડિઝાઇન કરવામાં આવી છે. અપેક્ષિત ભૂલો (દા.ત., માન્યતા ભૂલો, API ભૂલો) માટે, વધુ વિશિષ્ટ એરર હેન્ડલિંગ પદ્ધતિઓનો ઉપયોગ કરો, જેમ કે try...catch બ્લોક્સ અથવા કસ્ટમ એરર હેન્ડલિંગ કમ્પોનન્ટ્સ.
એરર બાઉન્ડ્રીઝના બહુવિધ સ્તરોનો વિચાર કરો: તમે વિવિધ સ્તરોનું એરર હેન્ડલિંગ પ્રદાન કરવા માટે એરર બાઉન્ડ્રીઝને નેસ્ટ કરી શકો છો. ઉદાહરણ તરીકે, તમારી પાસે એક ગ્લોબલ એરર બાઉન્ડ્રી હોઈ શકે છે જે કોઈપણ અનહેન્ડલ્ડ ભૂલોને પકડે છે અને સામાન્ય એરર સંદેશ પ્રદર્શિત કરે છે, અને વધુ વિશિષ્ટ એરર બાઉન્ડ્રીઝ જે ચોક્કસ કમ્પોનન્ટ્સમાં ભૂલોને પકડે છે અને વધુ વિગતવાર એરર સંદેશાઓ પ્રદર્શિત કરે છે.
સર્વર-સાઇડ રેન્ડરિંગ વિશે ભૂલશો નહીં: જો તમે સર્વર-સાઇડ રેન્ડરિંગનો ઉપયોગ કરી રહ્યાં છો, તો તમારે સર્વર પર પણ ભૂલોને હેન્ડલ કરવાની જરૂર પડશે. એરર બાઉન્ડ્રીઝ સર્વર પર કામ કરે છે, પરંતુ પ્રારંભિક રેન્ડર દરમિયાન થતી ભૂલોને પકડવા માટે તમારે વધારાની એરર હેન્ડલિંગ પદ્ધતિઓનો ઉપયોગ કરવાની જરૂર પડી શકે છે.

એડવાન્સ્ડ એરર બાઉન્ડ્રી ટેકનિક્સ

૧. રેન્ડર પ્રોપનો ઉપયોગ કરવો

સ્થિર ફોલબેક UI રેન્ડર કરવાને બદલે, તમે ભૂલોને કેવી રીતે હેન્ડલ કરવામાં આવે છે તેમાં વધુ સુગમતા પ્રદાન કરવા માટે રેન્ડર પ્રોપનો ઉપયોગ કરી શકો છો. રેન્ડર પ્રોપ એ એક ફંક્શન પ્રોપ છે જેનો ઉપયોગ કમ્પોનન્ટ કંઈક રેન્ડર કરવા માટે કરે છે.


class ErrorBoundary extends React.Component {
  // ... (પહેલાંની જેમ)

  render() {
    if (this.state.hasError) {
      // ફોલબેક UI રેન્ડર કરવા માટે રેન્ડર પ્રોપનો ઉપયોગ કરો
      return this.props.fallbackRender(this.state.error, this.state.errorInfo);
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary fallbackRender={(error, errorInfo) => (
      <div>
        <h2>કંઈક ખોટું થયું છે!</h2>
        <p>ભૂલ: {error.message}</p>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {errorInfo.componentStack}
        </details>
      </div>
    )}>
      <MyComponentThatMightThrow/>
    </ErrorBoundary>
  );
}

આ તમને દરેક એરર બાઉન્ડ્રીના આધારે ફોલબેક UI ને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે. fallbackRender પ્રોપ એરર અને એરર માહિતીને આર્ગ્યુમેન્ટ તરીકે મેળવે છે, જે તમને વધુ વિશિષ્ટ એરર સંદેશાઓ પ્રદર્શિત કરવા અથવા એરરના આધારે અન્ય ક્રિયાઓ કરવાની મંજૂરી આપે છે.

૨. એરર બાઉન્ડ્રીને હાયર-ઓર્ડર કમ્પોનન્ટ (HOC) તરીકે

તમે એક હાયર-ઓર્ડર કમ્પોનન્ટ (HOC) બનાવી શકો છો જે બીજા કમ્પોનન્ટને એરર બાઉન્ડ્રી સાથે રેપ કરે છે. આ એક જ કોડને પુનરાવર્તિત કર્યા વિના બહુવિધ કમ્પોનન્ટ્સ પર એરર બાઉન્ડ્રીઝ લાગુ કરવા માટે ઉપયોગી થઈ શકે છે.


function withErrorBoundary(WrappedComponent) {
  return class WithErrorBoundary extends React.Component {
    render() {
      return (
        <ErrorBoundary>
          <WrappedComponent {...this.props} />
        </ErrorBoundary>
      );
    }
  };
}

// ઉપયોગ:
const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

withErrorBoundary ફંક્શન એક કમ્પોનન્ટને આર્ગ્યુમેન્ટ તરીકે લે છે અને એક નવું કમ્પોનન્ટ રિટર્ન કરે છે જે મૂળ કમ્પોનન્ટને એરર બાઉન્ડ્રી સાથે રેપ કરે છે. આ તમને તમારી એપ્લિકેશનમાં કોઈપણ કમ્પોનન્ટમાં સરળતાથી એરર હેન્ડલિંગ ઉમેરવાની મંજૂરી આપે છે.

એરર બાઉન્ડ્રીઝનું પરીક્ષણ

તમારી એરર બાઉન્ડ્રીઝ યોગ્ય રીતે કામ કરી રહી છે તેની ખાતરી કરવા માટે તેનું પરીક્ષણ કરવું મહત્વપૂર્ણ છે. તમે તમારી એરર બાઉન્ડ્રીઝનું પરીક્ષણ કરવા માટે જેસ્ટ અને રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી જેવી ટેસ્ટિંગ લાઇબ્રેરીઓનો ઉપયોગ કરી શકો છો.

અહીં રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરીનો ઉપયોગ કરીને એરર બાઉન્ડ્રીનું પરીક્ષણ કેવી રીતે કરવું તેનું એક ઉદાહરણ છે:


import { render, screen, fireEvent } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
  throw new Error('આ કમ્પોનન્ટ એક એરર ફેંકે છે');
}

test('જ્યારે એરર ફેંકાય ત્યારે ફોલબેક UI રેન્ડર કરે છે', () => {
  render(
    <ErrorBoundary>
      <ComponentThatThrows />
    </ErrorBoundary>
  );

  expect(screen.getByText('કંઈક ખોટું થયું છે.')).toBeInTheDocument();
});

આ ટેસ્ટ ComponentThatThrows કમ્પોનન્ટને રેન્ડર કરે છે, જે એક એરર ફેંકે છે. પછી ટેસ્ટ એ સુનિશ્ચિત કરે છે કે એરર બાઉન્ડ્રી દ્વારા રેન્ડર થયેલ ફોલબેક UI પ્રદર્શિત થાય છે.

એરર બાઉન્ડ્રીઝ અને સર્વર કમ્પોનન્ટ્સ (રિએક્ટ 18+)

રિએક્ટ 18 અને તે પછીના સર્વર કમ્પોનન્ટ્સની રજૂઆત સાથે, એરર બાઉન્ડ્રીઝ એરર હેન્ડલિંગમાં મહત્વપૂર્ણ ભૂમિકા ભજવવાનું ચાલુ રાખે છે. સર્વર કમ્પોનન્ટ્સ સર્વર પર એક્ઝિક્યુટ થાય છે અને ક્લાયન્ટને ફક્ત રેન્ડર થયેલ આઉટપુટ મોકલે છે. જ્યારે મૂળભૂત સિદ્ધાંતો સમાન રહે છે, ત્યારે ધ્યાનમાં લેવા જેવી કેટલીક બારીકાઈઓ છે:

સર્વર-સાઇડ એરર લોગિંગ: ખાતરી કરો કે તમે સર્વર પર સર્વર કમ્પોનન્ટ્સની અંદર થતી ભૂલોને લોગ કરી રહ્યાં છો. આમાં સર્વર-સાઇડ લોગિંગ ફ્રેમવર્કનો ઉપયોગ કરવો અથવા એરર ટ્રેકિંગ સર્વિસમાં ભૂલો મોકલવાનો સમાવેશ થઈ શકે છે.
ક્લાયન્ટ-સાઇડ ફોલબેક: ભલે સર્વર કમ્પોનન્ટ્સ સર્વર પર રેન્ડર થાય, તેમ છતાં તમારે ભૂલોના કિસ્સામાં ક્લાયન્ટ-સાઇડ ફોલબેક UI પ્રદાન કરવાની જરૂર છે. આ સુનિશ્ચિત કરે છે કે વપરાશકર્તાને સુસંગત અનુભવ મળે, ભલે સર્વર કમ્પોનન્ટને રેન્ડર કરવામાં નિષ્ફળ જાય.
સ્ટ્રીમિંગ SSR: સ્ટ્રીમિંગ સર્વર-સાઇડ રેન્ડરિંગ (SSR) નો ઉપયોગ કરતી વખતે, સ્ટ્રીમિંગ પ્રક્રિયા દરમિયાન ભૂલો થઈ શકે છે. એરર બાઉન્ડ્રીઝ અસરગ્રસ્ત સ્ટ્રીમ માટે ફોલબેક UI રેન્ડર કરીને આ ભૂલોને સુંદર રીતે હેન્ડલ કરવામાં તમારી મદદ કરી શકે છે.

સર્વર કમ્પોનન્ટ્સમાં એરર હેન્ડલિંગ એ એક વિકસતું ક્ષેત્ર છે, તેથી નવીનતમ શ્રેષ્ઠ પદ્ધતિઓ અને ભલામણો સાથે અપ-ટૂ-ડેટ રહેવું મહત્વપૂર્ણ છે.

ટાળવા જેવી સામાન્ય ભૂલો

એરર બાઉન્ડ્રીઝ પર વધુ પડતો આધાર: તમારા કમ્પોનન્ટ્સમાં યોગ્ય એરર હેન્ડલિંગના વિકલ્પ તરીકે એરર બાઉન્ડ્રીઝનો ઉપયોગ કરશો નહીં. હંમેશા મજબૂત અને વિશ્વસનીય કોડ લખવાનો પ્રયત્ન કરો જે ભૂલોને સુંદર રીતે હેન્ડલ કરે.
ભૂલોને અવગણવી: ખાતરી કરો કે તમે એરર બાઉન્ડ્રીઝ દ્વારા પકડાયેલી ભૂલોને લોગ કરો છો જેથી તમે સમસ્યાઓના મૂળ કારણને શોધી શકો. ફક્ત ફોલબેક UI પ્રદર્શિત કરીને એરરને અવગણશો નહીં.
માન્યતા ભૂલો માટે એરર બાઉન્ડ્રીઝનો ઉપયોગ કરવો: એરર બાઉન્ડ્રીઝ માન્યતા ભૂલોને હેન્ડલ કરવા માટે યોગ્ય સાધન નથી. તેના બદલે વધુ વિશિષ્ટ માન્યતા તકનીકોનો ઉપયોગ કરો.
એરર બાઉન્ડ્રીઝનું પરીક્ષણ ન કરવું: તમારી એરર બાઉન્ડ્રીઝ યોગ્ય રીતે કામ કરી રહી છે તેની ખાતરી કરવા માટે તેનું પરીક્ષણ કરો.

નિષ્કર્ષ

એરર બાઉન્ડ્રીઝ મજબૂત અને વિશ્વસનીય રિએક્ટ એપ્લિકેશનો બનાવવા માટે એક શક્તિશાળી સાધન છે. એરર બાઉન્ડ્રીઝને અસરકારક રીતે કેવી રીતે લાગુ કરવી અને તેનો ઉપયોગ કરવો તે સમજીને, તમે વપરાશકર્તા અનુભવને સુધારી શકો છો, એપ્લિકેશન ક્રેશને અટકાવી શકો છો અને ડિબગીંગને સરળ બનાવી શકો છો. એરર બાઉન્ડ્રીઝને વ્યૂહાત્મક રીતે મૂકવાનું, માહિતીપ્રદ ફોલબેક UI પ્રદાન કરવાનું, ભૂલો લોગ કરવાનું અને તમારી એરર બાઉન્ડ્રીઝનું સંપૂર્ણ પરીક્ષણ કરવાનું યાદ રાખો.

આ માર્ગદર્શિકામાં દર્શાવેલ માર્ગદર્શિકા અને શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે ખાતરી કરી શકો છો કે તમારી રિએક્ટ એપ્લિકેશનો ભૂલો સામે સ્થિતિસ્થાપક છે અને તમારા વપરાશકર્તાઓ માટે સકારાત્મક અનુભવ પ્રદાન કરે છે.