റിയാക്റ്റ് എറർ ബൗണ്ടറീസ്: മികച്ച എറർ ഹാൻഡ്ലിംഗിനുള്ള ഒരു സമഗ്ര ഗൈഡ്

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ ലോകത്ത്, സുഗമവും വിശ്വസനീയവുമായ ഒരു ഉപയോക്തൃ അനുഭവം പരമപ്രധാനമാണ്. കൈകാര്യം ചെയ്യാത്ത ഒരൊറ്റ പിശകിന് ഒരു മുഴുവൻ റിയാക്റ്റ് ആപ്ലിക്കേഷനും ക്രാഷ് ചെയ്യാൻ കഴിയും, ഇത് ഉപയോക്താക്കളെ നിരാശരാക്കുകയും വിലപ്പെട്ട ഡാറ്റ നഷ്ടപ്പെടുത്തുകയും ചെയ്യും. റിയാക്റ്റ് എറർ ബൗണ്ടറികൾ ഈ പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുന്നതിനും, വലിയ ക്രാഷുകൾ തടയുന്നതിനും, കൂടുതൽ പ്രതിരോധശേഷിയുള്ളതും ഉപയോക്തൃ-സൗഹൃദവുമായ അനുഭവം നൽകുന്നതിനും ശക്തമായ ഒരു സംവിധാനം നൽകുന്നു. ഈ ഗൈഡ് റിയാക്റ്റ് എറർ ബൗണ്ടറികളുടെ ഉദ്ദേശ്യം, നടപ്പാക്കൽ, മികച്ച രീതികൾ, നൂതന സാങ്കേതിക വിദ്യകൾ എന്നിവയെക്കുറിച്ച് സമഗ്രമായ ഒരു അവലോകനം നൽകുന്നു.

എന്താണ് റിയാക്റ്റ് എറർ ബൗണ്ടറീസ്?

എറർ ബൗണ്ടറീസ് എന്നത് റിയാക്റ്റ് കമ്പോണൻ്റുകളാണ്, അത് അവയുടെ ചൈൽഡ് കമ്പോണൻ്റ് ട്രീയിലെവിടെയും ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ കണ്ടെത്തുകയും, ആ പിശകുകൾ ലോഗ് ചെയ്യുകയും, ക്രാഷായ കമ്പോണൻ്റ് ട്രീക്ക് പകരം ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. ഒരു ആപ്ലിക്കേഷൻ്റെ ഒരു ഭാഗത്തെ പിശകുകൾ മുഴുവൻ UI-യെയും തകരാറിലാക്കുന്നത് തടയുന്ന ഒരു സുരക്ഷാ വലയായി അവ പ്രവർത്തിക്കുന്നു. റിയാക്റ്റ് 16-ൽ അവതരിപ്പിച്ച എറർ ബൗണ്ടറികൾ, മുമ്പുണ്ടായിരുന്ന, അത്ര ശക്തമല്ലാത്ത എറർ കൈകാര്യം ചെയ്യൽ സംവിധാനങ്ങൾക്ക് പകരമായി വന്നു.

റിയാക്റ്റ് കമ്പോണൻ്റുകൾക്കുള്ള `try...catch` ബ്ലോക്കുകളായി എറർ ബൗണ്ടറികളെക്കുറിച്ച് ചിന്തിക്കുക. എന്നിരുന്നാലും, `try...catch`-ൽ നിന്ന് വ്യത്യസ്തമായി, അവ കമ്പോണൻ്റുകൾക്കായി പ്രവർത്തിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിലുടനീളം പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു ഡിക്ലറേറ്റീവും പുനരുപയോഗിക്കാവുന്നതുമായ മാർഗ്ഗം നൽകുന്നു.

എന്തിന് എറർ ബൗണ്ടറികൾ ഉപയോഗിക്കണം?

എറർ ബൗണ്ടറികൾ നിരവധി സുപ്രധാന നേട്ടങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു:

• ആപ്ലിക്കേഷൻ ക്രാഷുകൾ തടയുക: ഒരൊറ്റ കമ്പോണൻ്റ് പിശക് മുഴുവൻ ആപ്ലിക്കേഷനും ക്രാഷാകുന്നത് തടയുക എന്നതാണ് ഏറ്റവും പ്രധാനപ്പെട്ട പ്രയോജനം. ഒരു ശൂന്യമായ സ്ക്രീനിനോ സഹായകരമല്ലാത്ത പിശക് സന്ദേശത്തിനോ പകരം, ഉപയോക്താക്കൾക്ക് ഒരു ഫാൾബാക്ക് UI കാണാൻ സാധിക്കുന്നു.
• ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുക: ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുന്നതിലൂടെ, ശരിയായി പ്രവർത്തിക്കുന്ന ആപ്ലിക്കേഷൻ്റെ ഭാഗങ്ങൾ ഉപയോക്താക്കൾക്ക് തുടർന്നും ഉപയോഗിക്കാൻ എറർ ബൗണ്ടറികൾ അനുവദിക്കുന്നു. ഇത് അസുഖകരവും നിരാശാജനകവുമായ അനുഭവം ഒഴിവാക്കുന്നു.
• പിശകുകൾ വേർതിരിക്കുക: ആപ്ലിക്കേഷൻ്റെ പ്രത്യേക ഭാഗങ്ങളിലേക്ക് പിശകുകൾ വേർതിരിക്കാൻ എറർ ബൗണ്ടറികൾ സഹായിക്കുന്നു, ഇത് പ്രശ്നത്തിൻ്റെ മൂലകാരണം തിരിച്ചറിയാനും ഡീബഗ് ചെയ്യാനും എളുപ്പമാക്കുന്നു.
• മെച്ചപ്പെട്ട ലോഗിംഗും നിരീക്ഷണവും: നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ സംഭവിക്കുന്ന പിശകുകൾ ലോഗ് ചെയ്യുന്നതിന് എറർ ബൗണ്ടറികൾ ഒരു കേന്ദ്രീകൃത സ്ഥലം നൽകുന്നു. പ്രശ്നങ്ങൾ മുൻകൂട്ടി കണ്ടെത്തുന്നതിനും പരിഹരിക്കുന്നതിനും ഈ വിവരങ്ങൾ അമൂല്യമാണ്. ഇത് സെൻട്രി, റോൾബാർ അല്ലെങ്കിൽ ബഗ്‌സ്നാഗ് പോലുള്ള നിരീക്ഷണ സേവനങ്ങളുമായി ബന്ധിപ്പിക്കാൻ കഴിയും, ഇവയ്‌ക്കെല്ലാം ആഗോള കവറേജുണ്ട്.
• ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് നിലനിർത്തുക: ഒരു ക്രാഷ് കാരണം എല്ലാ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റുകളും നഷ്ടപ്പെടുന്നതിനു പകരം, ആപ്ലിക്കേഷൻ്റെ മറ്റ് ഭാഗങ്ങൾ തുടർന്നും പ്രവർത്തിക്കാൻ എറർ ബൗണ്ടറികൾ അനുവദിക്കുന്നു, ഇത് ഉപയോക്താവിൻ്റെ പുരോഗതിയും ഡാറ്റയും സംരക്ഷിക്കുന്നു.

ഒരു എറർ ബൗണ്ടറി കമ്പോണൻ്റ് നിർമ്മിക്കുന്നു

ഒരു എറർ ബൗണ്ടറി കമ്പോണൻ്റ് ഉണ്ടാക്കുന്നതിനായി, താഴെ പറയുന്ന ഒന്നോ അല്ലെങ്കിൽ രണ്ടോ ലൈഫ് സൈക്കിൾ മെത്തേഡുകൾ ഉൾക്കൊള്ളുന്ന ഒരു ക്ലാസ് കമ്പോണൻ്റ് നിങ്ങൾ നിർവചിക്കേണ്ടതുണ്ട്:

• static getDerivedStateFromError(error): ഒരു ഡിസൻഡൻ്റ് കമ്പോണൻ്റ് പിശക് പുറപ്പെടുവിച്ചതിന് ശേഷം ഈ സ്റ്റാറ്റിക് മെത്തേഡ് വിളിക്കപ്പെടുന്നു. പുറപ്പെടുവിച്ച പിശക് ഇതിന് ഒരു ആർഗ്യുമെൻ്റായി ലഭിക്കുന്നു, കൂടാതെ ഒരു ഫാൾബാക്ക് UI റെൻഡർ ചെയ്യുന്നതിനായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാൻ ഒരു മൂല്യം നൽകുകയും വേണം.
• componentDidCatch(error, info): ഒരു ഡിസൻഡൻ്റ് കമ്പോണൻ്റ് പിശക് പുറപ്പെടുവിച്ചതിന് ശേഷം ഈ മെത്തേഡ് വിളിക്കപ്പെടുന്നു. പുറപ്പെടുവിച്ച പിശകും, ഏത് കമ്പോണൻ്റാണ് പിശക് പുറപ്പെടുവിച്ചത് എന്നതിനെക്കുറിച്ചുള്ള വിവരങ്ങളടങ്ങിയ ഒരു `info` ഒബ്ജക്റ്റും ഇതിന് ലഭിക്കുന്നു. പിശക് ലോഗ് ചെയ്യാനോ മറ്റ് സൈഡ് എഫക്റ്റുകൾ നടത്താനോ നിങ്ങൾക്ക് ഈ മെത്തേഡ് ഉപയോഗിക്കാം.

ഒരു എറർ ബൗണ്ടറി കമ്പോണൻ്റിൻ്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ:

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

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫാൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുക.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // ഉദാഹരണം "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("ഒരു പിശക് കണ്ടെത്തി: ", error, info.componentStack);
    // നിങ്ങൾക്ക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് പിശക് ലോഗ് ചെയ്യാനും കഴിയും
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് ഫാൾബാക്ക് UI-യും റെൻഡർ ചെയ്യാം
      return 
എന്തോ കുഴപ്പം സംഭവിച്ചു.
;
    }

    return this.props.children; 
  }
}

വിശദീകരണം:

• ErrorBoundary കമ്പോണൻ്റ്, React.Component എക്സ്റ്റൻഡ് ചെയ്യുന്ന ഒരു ക്ലാസ് കമ്പോണൻ്റാണ്.
• കൺസ്ട്രക്റ്റർ സ്റ്റേറ്റിനെ hasError: false എന്ന് ഇനീഷ്യലൈസ് ചെയ്യുന്നു. ഫാൾബാക്ക് UI റെൻഡർ ചെയ്യണോ എന്ന് തീരുമാനിക്കാൻ ഈ ഫ്ലാഗ് ഉപയോഗിക്കും.
• static getDerivedStateFromError(error) എന്നത് പുറപ്പെടുവിച്ച പിശക് സ്വീകരിക്കുന്ന ഒരു സ്റ്റാറ്റിക് മെത്തേഡാണ്. ഇത് സ്റ്റേറ്റിനെ hasError: true ആയി അപ്‌ഡേറ്റ് ചെയ്യുന്നു, ഇത് ഫാൾബാക്ക് UI റെൻഡർ ചെയ്യാൻ കാരണമാകും.
• componentDidCatch(error, info) എന്നത് പിശകും, കമ്പോണൻ്റ് സ്റ്റാക്കിനെക്കുറിച്ചുള്ള വിവരങ്ങളടങ്ങിയ ഒരു info ഒബ്ജക്റ്റും സ്വീകരിക്കുന്ന ഒരു ലൈഫ്സൈക്കിൾ മെത്തേഡാണ്. പിശക് കൺസോളിലേക്ക് ലോഗ് ചെയ്യാൻ ഇത് ഉപയോഗിക്കുന്നു. ഒരു പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷനിൽ, നിങ്ങൾ സാധാരണയായി പിശക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് ലോഗ് ചെയ്യും.
• render() മെത്തേഡ് hasError സ്റ്റേറ്റ് പരിശോധിക്കുന്നു. അത് ശരിയാണെങ്കിൽ, അത് ഒരു ഫാൾബാക്ക് UI (ഈ സാഹചര്യത്തിൽ, ഒരു ലളിതമായ

  ടാഗ്) റെൻഡർ ചെയ്യുന്നു. അല്ലെങ്കിൽ, അത് കമ്പോണൻ്റിൻ്റെ ചിൽഡ്രനെ റെൻഡർ ചെയ്യുന്നു.

എറർ ബൗണ്ടറികൾ ഉപയോഗിക്കുന്നത്

ഒരു എറർ ബൗണ്ടറി ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ സംരക്ഷിക്കാൻ ആഗ്രഹിക്കുന്ന കമ്പോണൻ്റിനെ അല്ലെങ്കിൽ കമ്പോണൻ്റുകളെ ErrorBoundary കമ്പോണൻ്റ് ഉപയോഗിച്ച് റാപ് ചെയ്യുക:

ComponentThatMightThrow ഒരു പിശക് പുറപ്പെടുവിച്ചാൽ, ErrorBoundary ആ പിശക് കണ്ടെത്തുകയും, അതിൻ്റെ സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുകയും, അതിൻ്റെ ഫാൾബാക്ക് UI റെൻഡർ ചെയ്യുകയും ചെയ്യും. ആപ്ലിക്കേഷൻ്റെ ബാക്കി ഭാഗങ്ങൾ സാധാരണഗതിയിൽ പ്രവർത്തിക്കുന്നത് തുടരും.

എറർ ബൗണ്ടറി എവിടെ സ്ഥാപിക്കണം

ഫലപ്രദമായ പിശക് കൈകാര്യം ചെയ്യലിന് എറർ ബൗണ്ടറികൾ എവിടെ സ്ഥാപിക്കുന്നു എന്നത് നിർണായകമാണ്. ഈ തന്ത്രങ്ങൾ പരിഗണിക്കുക:

• ടോപ്പ്-ലെവൽ എറർ ബൗണ്ടറികൾ: കൈകാര്യം ചെയ്യാത്ത ഏതെങ്കിലും പിശകുകൾ കണ്ടെത്താനും സമ്പൂർണ്ണ ആപ്ലിക്കേഷൻ ക്രാഷ് തടയാനും മുഴുവൻ ആപ്ലിക്കേഷനെയും ഒരു എറർ ബൗണ്ടറി ഉപയോഗിച്ച് റാപ് ചെയ്യുക. ഇത് ഒരു അടിസ്ഥാന തലത്തിലുള്ള സംരക്ഷണം നൽകുന്നു.
• ഗ്രാന്യൂലർ എറർ ബൗണ്ടറികൾ: പിശകുകൾ വേർതിരിക്കുന്നതിനും കൂടുതൽ ലക്ഷ്യം വെച്ചുള്ള ഫാൾബാക്ക് UI-കൾ നൽകുന്നതിനും നിർദ്ദിഷ്ട കമ്പോണൻ്റുകളെയോ ആപ്ലിക്കേഷൻ്റെ ഭാഗങ്ങളെയോ എറർ ബൗണ്ടറികൾ ഉപയോഗിച്ച് റാപ് ചെയ്യുക. ഉദാഹരണത്തിന്, ഒരു ബാഹ്യ API-ൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്ന ഒരു കമ്പോണൻ്റിനെ ഒരു എറർ ബൗണ്ടറി ഉപയോഗിച്ച് റാപ് ചെയ്യാം.
• പേജ്-ലെവൽ എറർ ബൗണ്ടറികൾ: നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ മുഴുവൻ പേജുകൾക്കോ റൂട്ടുകൾക്കോ ചുറ്റും എറർ ബൗണ്ടറികൾ സ്ഥാപിക്കുന്നത് പരിഗണിക്കുക. ഇത് ഒരു പേജിലെ പിശക് മറ്റ് പേജുകളെ ബാധിക്കുന്നത് തടയും.

ഉദാഹരണം:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

ഈ ഉദാഹരണത്തിൽ, ആപ്ലിക്കേഷൻ്റെ ഓരോ പ്രധാന ഭാഗവും (ഹെഡർ, സൈഡ്ബാർ, കണ്ടൻ്റ് ഏരിയ, ഫൂട്ടർ) ഒരു എറർ ബൗണ്ടറി ഉപയോഗിച്ച് റാപ് ചെയ്തിരിക്കുന്നു. ഇത് ഓരോ ഭാഗത്തിനും സ്വതന്ത്രമായി പിശകുകൾ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു, ഒരൊറ്റ പിശക് മുഴുവൻ ആപ്ലിക്കേഷനെയും ബാധിക്കുന്നത് തടയുന്നു.

ഫാൾബാക്ക് UI ഇഷ്ടാനുസൃതമാക്കുന്നു

ഒരു എറർ ബൗണ്ടറി പ്രദർശിപ്പിക്കുന്ന ഫാൾബാക്ക് UI വിജ്ഞാനപ്രദവും ഉപയോക്തൃ-സൗഹൃദവുമായിരിക്കണം. ഈ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പരിഗണിക്കുക:

• വ്യക്തമായ ഒരു പിശക് സന്ദേശം നൽകുക: എന്ത് തെറ്റാണ് സംഭവിച്ചതെന്ന് വിശദീകരിക്കുന്ന സംക്ഷിപ്തവും വിജ്ഞാനപ്രദവുമായ ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക. സാങ്കേതിക പദങ്ങൾ ഒഴിവാക്കി ഉപയോക്താക്കൾക്ക് എളുപ്പത്തിൽ മനസ്സിലാകുന്ന ഭാഷ ഉപയോഗിക്കുക.
• പരിഹാരങ്ങൾ വാഗ്ദാനം ചെയ്യുക: ഉപയോക്താവിന് സാധ്യമായ പരിഹാരങ്ങൾ നിർദ്ദേശിക്കുക, അതായത് പേജ് പുതുക്കുക, പിന്നീട് വീണ്ടും ശ്രമിക്കുക, അല്ലെങ്കിൽ സപ്പോർട്ടുമായി ബന്ധപ്പെടുക.
• ബ്രാൻഡ് സ്ഥിരത നിലനിർത്തുക: ഫാൾബാക്ക് UI നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ മൊത്തത്തിലുള്ള രൂപകൽപ്പനയ്ക്കും ബ്രാൻഡിംഗിനും പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. ഇത് ഒരു സ്ഥിരമായ ഉപയോക്തൃ അനുഭവം നിലനിർത്താൻ സഹായിക്കുന്നു.
• പിശക് റിപ്പോർട്ട് ചെയ്യാൻ ഒരു വഴി നൽകുക: പിശക് നിങ്ങളുടെ ടീമിനെ അറിയിക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്ന ഒരു ബട്ടണോ ലിങ്കോ ഉൾപ്പെടുത്തുക. ഇത് ഡീബഗ്ഗിംഗിനും പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിനും വിലയേറിയ വിവരങ്ങൾ നൽകാൻ സഹായിക്കും.

ഉദാഹരണം:

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

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫാൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുക.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // നിങ്ങൾക്ക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് പിശക് ലോഗ് ചെയ്യാനും കഴിയും
    console.error("ഒരു പിശക് കണ്ടെത്തി: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് ഫാൾബാക്ക് UI-യും റെൻഡർ ചെയ്യാം
      return (
        

          
അയ്യോ! എന്തോ കുഴപ്പം സംഭവിച്ചു.
          
ക്ഷമിക്കണം, ഈ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ ശ്രമിക്കുമ്പോൾ ഒരു പിശക് സംഭവിച്ചു.
          
ദയവായി പേജ് പുതുക്കി ശ്രമിക്കുക അല്ലെങ്കിൽ പ്രശ്നം തുടരുകയാണെങ്കിൽ സപ്പോർട്ടുമായി ബന്ധപ്പെടുക.
           window.location.reload()}>പേജ് പുതുക്കുക
          സപ്പോർട്ടുമായി ബന്ധപ്പെടുക
        
      );
    }

    return this.props.children; 
  }
}

ഈ ഉദാഹരണം വ്യക്തമായ പിശക് സന്ദേശം, നിർദ്ദേശിച്ച പരിഹാരങ്ങൾ, പേജ് പുതുക്കുന്നതിനും സപ്പോർട്ടുമായി ബന്ധപ്പെടുന്നതിനുമുള്ള ലിങ്കുകൾ എന്നിവ ഉൾക്കൊള്ളുന്ന കൂടുതൽ വിജ്ഞാനപ്രദമായ ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുന്നു.

വിവിധതരം പിശകുകൾ കൈകാര്യം ചെയ്യൽ

റെൻഡറിംഗ് സമയത്തും, ലൈഫ് സൈക്കിൾ മെത്തേഡുകളിലും, താഴെയുള്ള മുഴുവൻ ട്രീയുടെയും കൺസ്ട്രക്റ്ററുകളിലും സംഭവിക്കുന്ന പിശകുകൾ എറർ ബൗണ്ടറികൾ കണ്ടെത്തുന്നു. എന്നാൽ ഇവ താഴെ പറയുന്നവയ്ക്കുള്ള പിശകുകൾ കണ്ടെത്തുകയില്ല:

• ഇവൻ്റ് ഹാൻഡ്ലറുകൾ
• അസിൻക്രണസ് കോഡ് (ഉദാ: setTimeout, requestAnimationFrame)
• സെർവർ-സൈഡ് റെൻഡറിംഗ്
• എറർ ബൗണ്ടറിയിൽ തന്നെ (അതിൻ്റെ ചിൽഡ്രനിലല്ലാതെ) ഉണ്ടാകുന്ന പിശകുകൾ

ഇത്തരം പിശകുകൾ കൈകാര്യം ചെയ്യാൻ, നിങ്ങൾ വ്യത്യസ്ത സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കേണ്ടതുണ്ട്.

ഇവൻ്റ് ഹാൻഡ്ലറുകൾ

ഇവൻ്റ് ഹാൻഡ്ലറുകളിൽ സംഭവിക്കുന്ന പിശകുകൾക്ക്, ഒരു സാധാരണ try...catch ബ്ലോക്ക് ഉപയോഗിക്കുക:

function MyComponent() {
  const handleClick = () => {
    try {
      // പിശകുണ്ടാക്കാൻ സാധ്യതയുള്ള കോഡ്
      throw new Error("ഇവൻ്റ് ഹാൻഡ്ലറിൽ എന്തോ കുഴപ്പം സംഭവിച്ചു");
    } catch (error) {
      console.error("ഇവൻ്റ് ഹാൻഡ്ലറിലെ പിശക്: ", error);
      // പിശക് കൈകാര്യം ചെയ്യുക (ഉദാ: ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക)
      alert("ഒരു പിശക് സംഭവിച്ചു. ദയവായി വീണ്ടും ശ്രമിക്കുക.");
    }
  };

  return ഇവിടെ ക്ലിക്ക് ചെയ്യുക;
}

അസിൻക്രണസ് കോഡ്

അസിൻക്രണസ് കോഡിൽ സംഭവിക്കുന്ന പിശകുകൾക്ക്, അസിൻക്രണസ് ഫംഗ്ഷനുള്ളിൽ try...catch ബ്ലോക്കുകൾ ഉപയോഗിക്കുക:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // ഡാറ്റ പ്രോസസ്സ് ചെയ്യുക
        console.log(data);
      } catch (error) {
        console.error("ഡാറ്റ ലഭ്യമാക്കുന്നതിൽ പിശക്: ", error);
        // പിശക് കൈകാര്യം ചെയ്യുക (ഉദാ: ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക)
        alert("ഡാറ്റ ലഭ്യമാക്കുന്നതിൽ പരാജയപ്പെട്ടു. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക.");
      }
    }

    fetchData();
  }, []);

  return 
ഡാറ്റ ലോഡ് ചെയ്യുന്നു...
;
}

പകരമായി, കൈകാര്യം ചെയ്യാത്ത പ്രോമിസ് റിജക്ഷനുകൾക്കായി നിങ്ങൾക്ക് ഒരു ഗ്ലോബൽ എറർ ഹാൻഡ്ലിംഗ് സംവിധാനം ഉപയോഗിക്കാം:

window.addEventListener('unhandledrejection', function(event) {
  console.error('കൈകാര്യം ചെയ്യാത്ത റിജക്ഷൻ (പ്രോമിസ്: ', event.promise, ', കാരണം: ', event.reason, ');');
  // ഓപ്ഷണലായി ഒരു ഗ്ലോബൽ പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക അല്ലെങ്കിൽ ഒരു സേവനത്തിലേക്ക് പിശക് ലോഗ് ചെയ്യുക
  alert("അപ്രതീക്ഷിതമായ ഒരു പിശക് സംഭവിച്ചു. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക.");
});

എറർ ബൗണ്ടറിയിലെ നൂതന സാങ്കേതിക വിദ്യകൾ

എറർ ബൗണ്ടറി റീസെറ്റ് ചെയ്യുന്നു

ചില സാഹചര്യങ്ങളിൽ, ഉപയോക്താക്കൾക്ക് എറർ ബൗണ്ടറി റീസെറ്റ് ചെയ്യാനും പിശകിന് കാരണമായ പ്രവർത്തനം വീണ്ടും ശ്രമിക്കാനും ഒരു വഴി നൽകാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഒരു നെറ്റ്‌വർക്ക് പ്രശ്നം പോലുള്ള ഒരു താൽക്കാലിക പ്രശ്നം കാരണമാണ് പിശക് ഉണ്ടായതെങ്കിൽ ഇത് ഉപയോഗപ്രദമാകും.

ഒരു എറർ ബൗണ്ടറി റീസെറ്റ് ചെയ്യുന്നതിന്, എറർ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാനും ഒരു റീസെറ്റ് ഫംഗ്ഷൻ നൽകാനും നിങ്ങൾക്ക് റെഡക്സ് അല്ലെങ്കിൽ കോൺടെക്സ്റ്റ് പോലുള്ള ഒരു സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറി ഉപയോഗിക്കാം. പകരമായി, എറർ ബൗണ്ടറിയെ റീമൗണ്ട് ചെയ്യാൻ നിർബന്ധിച്ചുകൊണ്ട് നിങ്ങൾക്ക് ഒരു ലളിതമായ സമീപനം ഉപയോഗിക്കാം.

ഉദാഹരണം (റീമൗണ്ട് ചെയ്യാൻ നിർബന്ധിക്കുന്നു):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫാൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുക.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // നിങ്ങൾക്ക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് പിശക് ലോഗ് ചെയ്യാനും കഴിയും
    console.error("ഒരു പിശക് കണ്ടെത്തി: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് ഫാൾബാക്ക് UI-യും റെൻഡർ ചെയ്യാം
      return (
        

          
അയ്യോ! എന്തോ കുഴപ്പം സംഭവിച്ചു.
          
ക്ഷമിക്കണം, ഈ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ ശ്രമിക്കുമ്പോൾ ഒരു പിശക് സംഭവിച്ചു.
          വീണ്ടും ശ്രമിക്കുക
        
      );
    }

    return 
{this.props.children}
;
  }
}

ഈ ഉദാഹരണത്തിൽ, റാപ്പിംഗ് div-ലേക്ക് ഒരു 'key' ചേർത്തിരിക്കുന്നു. key മാറ്റുന്നത് കമ്പോണൻ്റിനെ റീമൗണ്ട് ചെയ്യാൻ നിർബന്ധിക്കുന്നു, ഇത് ഫലപ്രദമായി എറർ സ്റ്റേറ്റ് ക്ലിയർ ചെയ്യുന്നു. `resetError` മെത്തേഡ് കമ്പോണൻ്റിൻ്റെ `key` സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നു, ഇത് കമ്പോണൻ്റിനെ റീമൗണ്ട് ചെയ്യാനും അതിൻ്റെ ചിൽഡ്രനെ വീണ്ടും റെൻഡർ ചെയ്യാനും കാരണമാകുന്നു.

സസ്പെൻസിനൊപ്പം എറർ ബൗണ്ടറികൾ ഉപയോഗിക്കുന്നു

റിയാക്റ്റ് സസ്പെൻസ്, ചില വ്യവസ്ഥകൾ പാലിക്കുന്നത് വരെ (ഉദാഹരണത്തിന്, ഡാറ്റ ലഭ്യമാക്കുന്നത് വരെ) ഒരു കമ്പോണൻ്റിൻ്റെ റെൻഡറിംഗ് "സസ്പെൻഡ്" ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. അസിൻക്രണസ് ഓപ്പറേഷനുകൾക്കായി കൂടുതൽ ശക്തമായ ഒരു പിശക് കൈകാര്യം ചെയ്യൽ അനുഭവം നൽകുന്നതിന് നിങ്ങൾക്ക് സസ്പെൻസുമായി എറർ ബൗണ്ടറികൾ സംയോജിപ്പിക്കാം.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      ലോഡ് ചെയ്യുന്നു...