ടൈപ്പ്സ്ക്രിപ്റ്റ് എറർ ബൗണ്ടറികൾ: ശക്തമായ ആപ്ലിക്കേഷനുകൾക്കായുള്ള എറർ കൈകാര്യം ചെയ്യൽ പാറ്റേണുകൾ

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

എറർ കൈകാര്യം ചെയ്യുന്നതിന്റെ പ്രാധാന്യം മനസ്സിലാക്കുന്നു

ഫലപ്രദമായ എറർ കൈകാര്യം ചെയ്യൽ മികച്ച ഉപയോക്തൃ അനുഭവത്തിനും ഒരു ആപ്ലിക്കേഷന്റെ മൊത്തത്തിലുള്ള ആരോഗ്യത്തിനും നിർണായകമാണ്. പിശകുകൾ കൈകാര്യം ചെയ്യപ്പെടാതെ പോകുമ്പോൾ, അവ താഴെ പറയുന്നവയിലേക്ക് നയിച്ചേക്കാം:

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

മറുവശത്ത്, നല്ല എറർ കൈകാര്യം ചെയ്യൽ താഴെ പറയുന്നവ നൽകുന്നു:

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

ടൈപ്പ്സ്ക്രിപ്റ്റിലെ എറർ ബൗണ്ടറികൾ എന്താണ്?

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

ഒരു സമർപ്പിത ഘടകത്തിലോ മൊഡ്യൂളിലോ പിശകുകൾക്ക് സാധ്യതയുള്ള കോഡിനെ വേർതിരിക്കുക എന്നതാണ് പ്രധാന ആശയം. ഈ ഘടകം ഒരു റാപ്പറായി പ്രവർത്തിക്കുന്നു, അതിനുള്ളിലെ കോഡിനെ നിരീക്ഷിക്കുന്നു. ഒരു പിശക് സംഭവിച്ചാൽ, എറർ ബൗണ്ടറി ഘടകം പിശകിനെ "പിടിക്കുന്നു", അത് ഘടക ട്രീയിലൂടെ പ്രചരിക്കുന്നത് തടയുകയും ആപ്ലിക്കേഷൻ തകരാറിലാകാനുള്ള സാധ്യത ഒഴിവാക്കുകയും ചെയ്യുന്നു. പകരം, എറർ ബൗണ്ടറിക്ക് ഒരു ഫാൾബാക്ക് UI റെൻഡർ ചെയ്യാനും, പിശക് രേഖപ്പെടുത്താനും, അല്ലെങ്കിൽ പ്രശ്നത്തിൽ നിന്ന് വീണ്ടെടുക്കാൻ ശ്രമിക്കാനും കഴിയും.

എറർ ബൗണ്ടറികൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ ഇവയാണ്:

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

ടൈപ്പ്സ്ക്രിപ്റ്റിലെ എറർ കൈകാര്യം ചെയ്യൽ പാറ്റേണുകൾ

ടൈപ്പ്സ്ക്രിപ്റ്റിന്റെ ടൈപ്പ് സിസ്റ്റം ശരിയായ എറർ കൈകാര്യം ചെയ്യൽ പാറ്റേണുകളുമായി സംയോജിപ്പിക്കുമ്പോൾ വളരെ ഫലപ്രദമാണ്. നിങ്ങളുടെ ടൈപ്പ്സ്ക്രിപ്റ്റ് ആപ്ലിക്കേഷനുകളിൽ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ചില സാധാരണവും ഫലപ്രദവുമായ പാറ്റേണുകൾ ഇതാ:

1. ട്രൈ-കാച്ച് ബ്ലോക്കുകൾ

ജാവാസ്ക്രിപ്റ്റിലെയും ടൈപ്പ്സ്ക്രിപ്റ്റിലെയും എറർ കൈകാര്യം ചെയ്യലിന്റെ അടിസ്ഥാന നിർമ്മാണ ബ്ലോക്കാണ് try-catch ബ്ലോക്ക്. ഇത് നിങ്ങൾക്ക് ഒരു try ബ്ലോക്കിനുള്ളിൽ കോഡ് പ്രവർത്തിപ്പിക്കാനും എറിയുന്ന ഏതൊരു ഒഴിവാക്കലുകളെയും പിടിക്കാനും അനുവദിക്കുന്നു. ഇത് ഒരു സിൻക്രണസ് ഓപ്പറേഷനാണ്, ഒരു ഫംഗ്ഷനുള്ളിൽ നേരിട്ട് പിശകുകൾ കൈകാര്യം ചെയ്യാൻ അനുയോജ്യമാണ്.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("An error occurred while fetching data:", error);
    // Handle the error (e.g., display an error message to the user)
    return Promise.reject(error);
  }
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, fetchData ഫംഗ്ഷൻ നൽകിയിട്ടുള്ള URL-ൽ നിന്ന് ഡാറ്റ വീണ്ടെടുക്കാൻ ശ്രമിക്കുന്നു. fetch കോൾ പരാജയപ്പെടുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, നെറ്റ്‌വർക്ക് പിശക്, തെറ്റായ URL), അല്ലെങ്കിൽ പ്രതികരണ നില ശരിയല്ലെങ്കിൽ, ഒരു പിശക് എറിയപ്പെടുന്നു. catch ബ്ലോക്ക് തുടർന്ന് പിശക് കൈകാര്യം ചെയ്യുന്നു. പിശക് പ്രചരിപ്പിക്കാൻ Promise.reject(error) ഉപയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക, അതിനാൽ വിളിക്കുന്ന കോഡിനും ഇത് കൈകാര്യം ചെയ്യാൻ കഴിയും. അസിൻക്രണസ് പ്രവർത്തനങ്ങൾക്ക് ഇത് സാധാരണമാണ്.

2. പ്രോമിസുകളും അസിൻക്രണസ് എറർ കൈകാര്യം ചെയ്യലും

അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ജാവാസ്ക്രിപ്റ്റിൽ സാധാരണമാണ്, പ്രത്യേകിച്ചും API-കൾ, ഡാറ്റാബേസ് ഇടപെടലുകൾ, ഫയൽ I/O എന്നിവ കൈകാര്യം ചെയ്യുമ്പോൾ. ഈ സാഹചര്യങ്ങളിൽ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ശക്തമായ സംവിധാനം പ്രോമിസുകൾ നൽകുന്നു. try-catch ബ്ലോക്ക് ഉപയോഗപ്രദമാണ്, പക്ഷേ പല സാഹചര്യങ്ങളിലും, ഒരു പ്രോമിസിന്റെ .then(), .catch() രീതികൾക്കുള്ളിൽ നിങ്ങൾ പിശകുകൾ കൈകാര്യം ചെയ്യും.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("An error occurred while fetching data:", error);
      // Handle the error (e.g., display an error message to the user)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Data fetched successfully:", data);
  })
  .catch(error => {
    console.error("Failed to fetch data:", error);
    // Display a user-friendly error message
  });
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, fetchData ഫംഗ്ഷൻ അസിൻക്രണസ് fetch പ്രവർത്തനം കൈകാര്യം ചെയ്യാൻ ഒരു പ്രോമിസ് ഉപയോഗിക്കുന്നു. പിശകുകൾ .catch() ബ്ലോക്കിൽ പിടിക്കപ്പെടുന്നു, ഇത് അസിൻക്രണസ് പ്രവർത്തനത്തിനായി അവയെ പ്രത്യേകമായി കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

3. എറർ ക്ലാസുകളും കസ്റ്റം എറർ തരങ്ങളും

കൂടുതൽ ഘടനാപരമായതും വിവരദായകവുമായ എറർ കൈകാര്യം ചെയ്യൽ നൽകിക്കൊണ്ട്, കസ്റ്റം എറർ ക്ലാസുകൾ നിർവചിക്കാൻ ടൈപ്പ്സ്ക്രിപ്റ്റ് നിങ്ങളെ അനുവദിക്കുന്നു. പുനരുപയോഗിക്കാവുന്നതും ടൈപ്പ്-സേഫ് ആയതുമായ എറർ കൈകാര്യം ചെയ്യൽ ലോജിക് നിർമ്മിക്കുന്നതിനുള്ള ഒരു മികച്ച രീതിയാണിത്. കസ്റ്റം എറർ ക്ലാസുകൾ നിർമ്മിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് താഴെ പറയുന്നവ ചെയ്യാം:

• പ്രത്യേക എറർ കോഡുകൾ ചേർക്കുക: വിവിധ തരം പിശകുകൾ തമ്മിൽ വേർതിരിക്കുക.
• സന്ദർഭം നൽകുക: പിശകുമായി ബന്ധപ്പെട്ട അധിക ഡാറ്റ സംഭരിക്കുക.
• വായിക്കാനുള്ള എളുപ്പവും പരിപാലനവും മെച്ചപ്പെടുത്തുക: നിങ്ങളുടെ എറർ കൈകാര്യം ചെയ്യൽ കോഡ് കൂടുതൽ എളുപ്പത്തിൽ മനസ്സിലാക്കാൻ കഴിയുന്നതാക്കുക.

            class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Assign the prototype explicitly
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Failed to fetch user data';
      if (response.status === 404) {
        errorMessage = 'User not found';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API Error:", error.message, error.statusCode, error.code);
      // Handle specific API error based on the code
      if (error.code === 'USER_NOT_FOUND') {
        // Show a 'user not found' message
      }
    } else {
      console.error("An unexpected error occurred:", error);
      // Handle other errors
    }
    throw error; // Re-throw or handle the error
  }
}

getUserData(123)
  .then(userData => console.log("User data:", userData))
  .catch(error => console.error("Error retrieving user data:", error));
            

              
                Copy
              
            
          

ഈ ഉദാഹരണം, ബിൽറ്റ്-ഇൻ Error ക്ലാസ്സിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്ന ഒരു ApiError ക്ലാസ് നിർവചിക്കുന്നു. ഇതിൽ കൂടുതൽ സന്ദർഭം നൽകുന്നതിനായി statusCode, code പ്രോപ്പർട്ടികൾ ഉൾപ്പെടുന്നു. getUserData ഫംഗ്ഷൻ ഈ കസ്റ്റം എറർ ക്ലാസ് ഉപയോഗിച്ച് പ്രത്യേക പിശക് തരങ്ങൾ പിടിക്കുകയും കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു. instanceof ഓപ്പറേറ്ററിന്റെ ഉപയോഗം ടൈപ്പ്-സേഫ് ചെക്കിംഗിനും പിശകിന്റെ തരത്തെ അടിസ്ഥാനമാക്കി പ്രത്യേക എറർ കൈകാര്യം ചെയ്യലിനും അനുവദിക്കുന്നു.

4. ദി Result ടൈപ്പ് (ഫങ്ഷണൽ എറർ കൈകാര്യം ചെയ്യൽ)

ഫങ്ഷണൽ പ്രോഗ്രാമിംഗ് പലപ്പോഴും ഒരു വിജയകരമായ ഫലത്തെയോ ഒരു പിശകിനെയോ പ്രതിനിധീകരിക്കാൻ ഒരു Result ടൈപ്പ് (Either ടൈപ്പ് എന്നും അറിയപ്പെടുന്നു) ഉപയോഗിക്കുന്നു. ഈ പാറ്റേൺ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള വൃത്തിയുള്ളതും ടൈപ്പ്-സേഫ് ആയതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഒരു Result ടൈപ്പിന് സാധാരണയായി രണ്ട് വകഭേദങ്ങളുണ്ട്: Ok (വിജയത്തിന്) ഉം Err (പരാജയത്തിന്) ഉം.

            
// Define a generic Result type

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Division by zero' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Result:', result1.value);
} else {
  console.error('Error:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Result:', result2.value);
} else {
  console.error('Error:', result2.error);
}

            

              
                Copy
              
            
          

divide ഫംഗ്ഷൻ ഡിവിഷന്റെ ഫലം ഉൾക്കൊള്ളുന്ന Ok ടൈപ്പിലുള്ള ഒരു Result അല്ലെങ്കിൽ ഒരു പിശക് സന്ദേശം ഉൾക്കൊള്ളുന്ന Err ടൈപ്പിലുള്ള ഒരു Result തിരികെ നൽകുന്നു. ഈ പാറ്റേൺ, വിളിക്കുന്നയാൾക്ക് വിജയവും പരാജയവും വ്യക്തമായി കൈകാര്യം ചെയ്യാൻ നിർബന്ധിതരാകുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് കൈകാര്യം ചെയ്യാത്ത പിശകുകൾ തടയുന്നു.

5. ഡെക്കറേറ്ററുകൾ (വിപുലമായ എറർ കൈകാര്യം ചെയ്യലിനായി - ബൗണ്ടറി നടപ്പിലാക്കാൻ നേരിട്ട് വളരെ കുറച്ച് മാത്രം ഉപയോഗിക്കുന്നു)

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

            
function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`Error in ${propertyKey}:`, error);
      // Handle the error here (e.g., log, display a default value, etc.)
      return null; // Or throw a more specific error
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Simulate an error
    if (Math.random() < 0.5) {
      throw new Error('Simulated network error');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണം ഒരു @handleError ഡെക്കറേറ്റർ നിർവചിക്കുന്നു. ഡെക്കറേറ്റർ യഥാർത്ഥ മെത്തേഡിനെ പൊതിയുന്നു, ഏതെങ്കിലും പിശകുകൾ പിടിക്കുകയും അവ രേഖപ്പെടുത്തുകയും ചെയ്യുന്നു. ഇത് യഥാർത്ഥ മെത്തേഡിന്റെ കോഡ് നേരിട്ട് മാറ്റാതെ തന്നെ എറർ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു.

ഫ്രണ്ടെൻഡ് ഫ്രെയിംവർക്കുകളിൽ എറർ ബൗണ്ടറികൾ നടപ്പിലാക്കുന്നു (റിയാക്റ്റ് ഉദാഹരണം)

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

റിയാക്റ്റ് എറർ ബൗണ്ടറികൾ

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

റിയാക്റ്റിൽ ഒരു എറർ ബൗണ്ടറി നിർമ്മിക്കുന്നതിനുള്ള പ്രധാന രീതികൾ:

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

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

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

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error('Uncaught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <p>We're working on fixing it!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

ഈ ErrorBoundary ഘടകം അതിന്റെ ചൈൽഡ് ഘടകങ്ങളെ പൊതിയുന്നു. പൊതിഞ്ഞ ഘടകങ്ങൾക്കുള്ളിൽ ഏതെങ്കിലും പിശക് എറിയപ്പെടുകയാണെങ്കിൽ, സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നതിനായി getDerivedStateFromError രീതി അഭ്യർത്ഥിക്കപ്പെടുന്നു, ഇത് ഫാൾബാക്ക് UI ഉപയോഗിച്ച് ഘടകം വീണ്ടും റെൻഡർ ചെയ്യാൻ കാരണമാകുന്നു. componentDidCatch രീതി പിശക് രേഖപ്പെടുത്തുന്നതിന് ഉപയോഗിക്കുന്നു. ErrorBoundary ഉപയോഗിക്കാൻ, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഭാഗങ്ങൾ അതിനുള്ളിൽ പൊതിഞ്ഞാൽ മതി:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

സാധ്യതയുള്ള പ്രശ്നങ്ങളുള്ള ഘടകങ്ങൾക്ക് ചുറ്റും ErrorBoundary ഘടകം സ്ഥാപിക്കുന്നതിലൂടെ, നിങ്ങൾ ആ ഘടകങ്ങളെ വേർതിരിക്കുകയും പിശകുകൾ ഉണ്ടാകുമ്പോൾ ഒരു ഫാൾബാക്ക് UI നൽകുകയും ചെയ്യുന്നു, ഇത് മുഴുവൻ ആപ്ലിക്കേഷനും തകരാറിലാകുന്നത് തടയുന്നു.

മറ്റ് ഫ്രെയിംവർക്കുകളിലെ എറർ ബൗണ്ടറികൾ (ആശയപരമായത്)

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

• ആംഗുലാർ: ഘടക എറർ കൈകാര്യം ചെയ്യൽ, കസ്റ്റം എറർ ഹാൻഡ്ലർമാർ, ഇന്റർസെപ്റ്ററുകൾ എന്നിവ ഉപയോഗിക്കുന്നു. ആംഗുലാറിന്റെ ErrorHandler ക്ലാസ് ഉപയോഗിക്കുന്നതും സാധ്യതയുള്ള പ്രശ്നങ്ങളുള്ള ഘടകങ്ങളെ എറർ-ഹാൻഡ്ലിംഗ് ലോജിക് ഉപയോഗിച്ച് പൊതിയുന്നതും പരിഗണിക്കുക.
• വൂ.ജെഎസ്: ഘടകങ്ങൾക്കുള്ളിൽ try...catch ബ്ലോക്കുകൾ ഉപയോഗിക്കുകയോ Vue.config.errorHandler വഴി രജിസ്റ്റർ ചെയ്ത ഗ്ലോബൽ എറർ ഹാൻഡ്ലർമാർ ഉപയോഗിക്കുകയോ ചെയ്യുക. റിയാക്റ്റ് എറർ ബൗണ്ടറികൾക്ക് സമാനമായ ഘടക-തല എറർ കൈകാര്യം ചെയ്യലിനുള്ള സവിശേഷതകളും വൂവിനുണ്ട്.

എറർ ബൗണ്ടറികൾക്കും എറർ കൈകാര്യം ചെയ്യലിനുമുള്ള മികച്ച രീതികൾ

എറർ ബൗണ്ടറികളും എറർ കൈകാര്യം ചെയ്യൽ പാറ്റേണുകളും ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, ഈ മികച്ച രീതികൾ പരിഗണിക്കുക:

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

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും അന്താരാഷ്ട്ര പരിഗണനകളും

യഥാർത്ഥ ലോക സാഹചര്യങ്ങളിൽ എറർ ബൗണ്ടറികളും എറർ കൈകാര്യം ചെയ്യൽ പാറ്റേണുകളും എങ്ങനെ പ്രയോഗിക്കാമെന്ന്, അന്താരാഷ്ട്രവൽക്കരണം പരിഗണിച്ച്, ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നോക്കാം:

ഉദാഹരണം: ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷൻ (ഡാറ്റാ ഫെച്ചിംഗ്)

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

            
interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... other product details
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API endpoint
    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading products...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Sorry, we're having trouble loading the products.</p>
          <p>Please try again later.</p>
          <p>Error details: {error.message}</p> {/* Log the error message for debugging */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Error Boundary (React Component)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true, error: error };
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // You can also log the error to an error reporting service
      console.error('Product List Error:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Render a fallback UI (e.g., error message, retry button)
        return (
          <div className="product-list-error">
            <h2>Oops, something went wrong!</h2>
            <p>We are unable to load product information at this time.</p>
            <button onClick={() => window.location.reload()} >Retry</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Usage
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• ProductList ഉൽപ്പന്ന ഡാറ്റാ ലഭ്യമാക്കുന്നു. ഇത് ലോഡിംഗ് സ്റ്റേറ്റ്, വിജയകരമായ ഉൽപ്പന്ന ഡാറ്റാ, പിശക് സ്റ്റേറ്റ് എന്നിവ ഘടകത്തിനുള്ളിൽ കൈകാര്യം ചെയ്യുന്നു.
• റെൻഡറിംഗ് സമയത്തും API കോളുകൾക്കിടയിലും ഉണ്ടാകുന്ന പിശകുകൾ പിടിക്കാൻ ProductListErrorBoundary, ProductList ഘടകത്തെ പൊതിയാൻ ഉപയോഗിക്കുന്നു.
• API അഭ്യർത്ഥന പരാജയപ്പെടുകയാണെങ്കിൽ, ProductListErrorBoundary UI തകരാറിലാകുന്നതിനുപകരം ഉപയോക്തൃ സൗഹൃദ പിശക് സന്ദേശം റെൻഡർ ചെയ്യും.
• പിശക് സന്ദേശം ഉപയോക്താവിനെ റീഫ്രഷ് ചെയ്യാൻ അനുവദിക്കുന്ന ഒരു "വീണ്ടും ശ്രമിക്കുക" ഓപ്ഷൻ നൽകുന്നു.
• ഉൽപ്പന്ന ഡാറ്റയിലെ currency ഫീൽഡ് അന്താരാഷ്ട്രവൽക്കരണ ലൈബ്രറികൾ (ഉദാഹരണത്തിന്, ജാവാസ്ക്രിപ്റ്റിലെ Intl) ഉപയോഗിച്ച് ശരിയായി പ്രദർശിപ്പിക്കാൻ കഴിയും, ഇത് ഉപയോക്താവിന്റെ ലോക്കേൽ ക്രമീകരണങ്ങൾക്കനുസരിച്ച് കറൻസി ഫോർമാറ്റിംഗ് നൽകുന്നു.

ഉദാഹരണം: അന്താരാഷ്ട്ര ഫോം വാലിഡേഷൻ

വിലാസ വിവരങ്ങൾ ഉൾപ്പെടെയുള്ള ഉപയോക്തൃ ഡാറ്റാ ശേഖരിക്കുന്ന ഒരു ഫോം പരിഗണിക്കുക. ശരിയായ വാലിഡേഷൻ അത്യാവശ്യമാണ്, പ്രത്യേകിച്ചും വ്യത്യസ്ത വിലാസ ഫോർമാറ്റുകളുള്ള വിവിധ രാജ്യങ്ങളിലെ ഉപയോക്താക്കളെ കൈകാര്യം ചെയ്യുമ്പോൾ.

            
// Assume a simplified address interface
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Default country
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Clear any previous errors for this field
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Submit the form (e.g., to an API)
      alert('Form submitted!'); // Replace with actual submission logic
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Validation rules based on the selected country
    if (!address.street) {
      errors.street = 'Street address is required';
    }
    if (!address.city) {
      errors.city = 'City is required';
    }

    // Example: postal code validation based on the country
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid US postal code';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid Canadian postal code';
        }
        break;
      // Add more countries and validation rules
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Postal code is required';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        /
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        /
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Postal Code:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        /
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Country:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <!-- Add more countries -->
        </select>

        <button type="submit">Submit</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• AddressForm ഘടകം ഫോം ഡാറ്റയും വാലിഡേഷൻ ലോജിക്കും കൈകാര്യം ചെയ്യുന്നു.
• validateAddress ഫംഗ്ഷൻ തിരഞ്ഞെടുത്ത രാജ്യത്തെ അടിസ്ഥാനമാക്കി വാലിഡേഷനുകൾ നടത്തുന്നു.
• രാജ്യം-നിർദ്ദിഷ്ട പോസ്റ്റൽ കോഡ് വാലിഡേഷൻ നിയമങ്ങൾ പ്രയോഗിക്കുന്നു (US, CA എന്നിവ കാണിച്ചിരിക്കുന്നു).
• ആപ്ലിക്കേഷൻ ലോക്കേൽ-അവബോധമുള്ള ഫോർമാറ്റിംഗിനായി Intl API ഉപയോഗിക്കുന്നു. നിലവിലെ ഉപയോക്താവിന്റെ ലോക്കേലിനനുസരിച്ച് നമ്പർ, തീയതി, കറൻസി എന്നിവ ഡൈനാമിക്കായി ഫോർമാറ്റ് ചെയ്യാൻ ഇത് ഉപയോഗിക്കും.
• പിശക് സന്ദേശങ്ങൾ ആഗോളതലത്തിൽ മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനായി വിവർത്തനം ചെയ്യാൻ കഴിയും.
• ഈ സമീപനം ഉപയോക്താക്കൾക്ക് അവരുടെ സ്ഥാനം പരിഗണിക്കാതെ, ഉപയോക്തൃ സൗഹൃദ രീതിയിൽ ഫോം പൂരിപ്പിക്കാൻ അനുവദിക്കുന്നു.

അന്താരാഷ്ട്രവൽക്കരണത്തിനുള്ള മികച്ച രീതികൾ:

• ഒരു ലോക്കലൈസേഷൻ ലൈബ്രറി ഉപയോഗിക്കുക: i18next, react-intl, അല്ലെങ്കിൽ LinguiJS പോലുള്ള ലൈബ്രറികൾ ഉപയോക്താവിന്റെ ലോക്കേലിനെ അടിസ്ഥാനമാക്കി ടെക്സ്റ്റ് വിവർത്തനം ചെയ്യുന്നതിനും, തീയതികൾ, നമ്പറുകൾ, കറൻസികൾ എന്നിവ ഫോർമാറ്റ് ചെയ്യുന്നതിനും സവിശേഷതകൾ നൽകുന്നു.
• ലോക്കേൽ തിരഞ്ഞെടുക്കൽ നൽകുക: ഉപയോക്താക്കൾക്ക് അവരുടെ ഇഷ്ടപ്പെട്ട ഭാഷയും പ്രദേശവും തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുക. ഇത് ഒരു ഡ്രോപ്പ്ഡൗൺ, ക്രമീകരണങ്ങൾ, അല്ലെങ്കിൽ ബ്രൗസർ ക്രമീകരണങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള ഓട്ടോമാറ്റിക് കണ്ടെത്തൽ എന്നിവയിലൂടെ ആകാം.
• തീയതി, സമയം, നമ്പർ ഫോർമാറ്റുകൾ കൈകാര്യം ചെയ്യുക: വ്യത്യസ്ത ലോക്കേലുകൾക്ക് അനുയോജ്യമായി തീയതികൾ, സമയങ്ങൾ, നമ്പറുകൾ, കറൻസികൾ എന്നിവ ഫോർമാറ്റ് ചെയ്യാൻ Intl API ഉപയോഗിക്കുക.
• ടെക്സ്റ്റ് ഡയറക്ഷൻ പരിഗണിക്കുക: ഇടത്തുനിന്ന് വലത്തോട്ടും (LTR) വലത്തുനിന്ന് ഇടത്തോട്ടും (RTL) ഉള്ള ടെക്സ്റ്റ് ഡയറക്ഷനുകളെ പിന്തുണയ്ക്കാൻ നിങ്ങളുടെ UI രൂപകൽപ്പന ചെയ്യുക. RTL പിന്തുണയ്ക്കായി ലൈബ്രറികൾ നിലവിലുണ്ട്.
• സാംസ്കാരിക വ്യത്യാസങ്ങൾ കണക്കിലെടുക്കുക: നിങ്ങളുടെ UI രൂപകൽപ്പന ചെയ്യുമ്പോഴും പിശക് സന്ദേശങ്ങൾ നൽകുമ്പോഴും സാംസ്കാരിക മാനദണ്ഡങ്ങളെക്കുറിച്ച് ശ്രദ്ധിക്കുക. ചില സംസ്കാരങ്ങളിൽ അധിക്ഷേപകരമോ അനുചിതമോ ആയ ഭാഷയോ ചിത്രങ്ങളോ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.
• വ്യത്യസ്ത ലോക്കേലുകളിൽ പരിശോധിക്കുക: വിവർത്തനവും ഫോർമാറ്റിംഗും ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്നും UI ശരിയായി പ്രദർശിപ്പിക്കുന്നുണ്ടെന്നും ഉറപ്പാക്കാൻ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വിവിധ ലോക്കേലുകളിൽ സമഗ്രമായി പരിശോധിക്കുക.

ഉപസംഹാരം

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

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

നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഈ പാറ്റേണുകളും സാങ്കേതിക വിദ്യകളും പരീക്ഷിക്കാൻ പരിഗണിക്കുക, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രത്യേക ആവശ്യകതകൾക്ക് അനുയോജ്യമാക്കാൻ അവയെ മാറ്റിയെടുക്കുക. ഈ സമീപനം മികച്ച കോഡ് നിലവാരത്തിനും എല്ലാ ഉപയോക്താക്കൾക്കും കൂടുതൽ നല്ല അനുഭവത്തിനും സംഭാവന നൽകും.