ரியாக்ட் எரர்பவுண்டரி: பிழை தனிமைப்படுத்தல் மற்றும் மீட்பு உத்திகள்

ஃபிரன்ட்-எண்ட் டெவலப்மென்ட்டின் மாறும் உலகில், குறிப்பாக ரியாக்ட் போன்ற சிக்கலான காம்போனென்ட் அடிப்படையிலான கட்டமைப்புகளுடன் பணிபுரியும் போது, எதிர்பாராத பிழைகள் ஏற்படுவது தவிர்க்க முடியாதது. இந்தப் பிழைகள் சரியாகக் கையாளப்படாவிட்டால், செயலி செயலிழப்புக்கும், ஒரு எரிச்சலூட்டும் பயனர் அனுபவத்திற்கும் வழிவகுக்கும். ரியாக்ட்டின் ErrorBoundary காம்போனென்ட் இந்தப் பிழைகளை நேர்த்தியாகக் கையாள்வதற்கும், அவற்றைத் தனிமைப்படுத்துவதற்கும், மற்றும் மீட்பு உத்திகளை வழங்குவதற்கும் ஒரு வலுவான தீர்வை வழங்குகிறது. இந்த விரிவான வழிகாட்டி ErrorBoundary-ன் ஆற்றலை ஆராய்கிறது, உலகளாவிய பார்வையாளர்களுக்காக மேலும் மீள்திறன் மற்றும் பயனர் நட்பு கொண்ட ரியாக்ட் செயலிகளை உருவாக்க அதை எவ்வாறு திறம்பட செயல்படுத்துவது என்பதை நிரூபிக்கிறது.

எரர் பவுண்டரிகளின் தேவையைப் புரிந்துகொள்ளுதல்

செயல்படுத்துதலுக்குள் செல்வதற்கு முன், எரர் பவுண்டரிகள் ஏன் அவசியமானவை என்பதைப் புரிந்துகொள்வோம். ரியாக்ட்டில், ரெண்டரிங் செய்யும் போது, லைஃப்சைக்கிள் மெத்தடுகளில், அல்லது சைல்டு காம்போனென்ட்களின் கன்ஸ்ட்ரக்டர்களில் ஏற்படும் பிழைகள் முழு செயலியையும் செயலிழக்கச் செய்யக்கூடும். ஏனெனில், பிடிக்கப்படாத பிழைகள் காம்போனென்ட் ட்ரீயில் மேல்நோக்கிப் பரவி, பெரும்பாலும் ஒரு வெற்றுத் திரையையோ அல்லது உதவாத பிழைச் செய்தியையோ காட்டுகின்றன. ஜப்பானில் உள்ள ஒரு பயனர் ஒரு முக்கியமான நிதிப் பரிவர்த்தனையை முடிக்க முயற்சிக்கும்போது, தொடர்பில்லாதது போல் தோன்றும் ஒரு காம்போனென்ட்டில் ஏற்பட்ட ஒரு சிறிய பிழை காரணமாக ஒரு வெற்றுத் திரையை எதிர்கொள்வதை கற்பனை செய்து பாருங்கள். இது முன்கூட்டியே பிழை நிர்வாகத்தின் முக்கியத் தேவையை விளக்குகிறது.

எரர் பவுண்டரிகள் அவற்றின் சைல்டு காம்போனென்ட் ட்ரீயில் எங்கு வேண்டுமானாலும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடிப்பதற்கும், அந்தப் பிழைகளைப் பதிவு செய்வதற்கும், மற்றும் காம்போனென்ட் ட்ரீயை செயலிழக்கச் செய்வதற்குப் பதிலாக ஒரு ஃபால்பேக் UI-ஐக் காண்பிப்பதற்கும் ஒரு வழியை வழங்குகின்றன. அவை தவறான காம்போனென்ட்களைத் தனிமைப்படுத்தவும், உங்கள் செயலியின் ஒரு பகுதியில் ஏற்படும் பிழைகள் மற்ற பகுதிகளைப் பாதிப்பதைத் தடுக்கவும் உங்களை அனுமதிக்கின்றன, இதன் மூலம் உலகளவில் மேலும் நிலையான மற்றும் நம்பகமான பயனர் அனுபவத்தை உறுதி செய்கின்றன.

ரியாக்ட் எரர்பவுண்டரி என்றால் என்ன?

ஒரு ErrorBoundary என்பது ஒரு ரியாக்ட் காம்போனென்ட் ஆகும், இது அதன் சைல்டு காம்போனென்ட் ட்ரீயில் எங்கு வேண்டுமானாலும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவு செய்து, ஒரு ஃபால்பேக் UI-ஐக் காட்டுகிறது. இது ஒரு கிளாஸ் காம்போனென்ட் ஆகும், இது பின்வரும் ஒன்று அல்லது இரண்டு லைஃப்சைக்கிள் மெத்தடுகளை செயல்படுத்துகிறது:

• static getDerivedStateFromError(error): இந்த லைஃப்சைக்கிள் மெத்தட் ஒரு டெசென்டென்ட் காம்போனென்ட்டால் ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது ஏற்பட்ட பிழையை ஒரு ஆர்கியூமென்ட்டாகப் பெறுகிறது மற்றும் காம்போனென்ட்டின் ஸ்டேட்டைப் புதுப்பிக்க ஒரு மதிப்பைத் திருப்பியளிக்க வேண்டும்.
• componentDidCatch(error, info): இந்த லைஃப்சைக்கிள் மெத்தட் ஒரு டெசென்டென்ட் காம்போனென்ட்டால் ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது இரண்டு ஆர்கியூமென்ட்களைப் பெறுகிறது: ஏற்பட்ட பிழை மற்றும் எந்த காம்போனென்ட் பிழையை ஏற்படுத்தியது என்பது பற்றிய தகவலைக் கொண்ட ஒரு இன்ஃபோ ஆப்ஜெக்ட். நீங்கள் இந்த மெத்தடைப் பயன்படுத்தி பிழைத் தகவலைப் பதிவு செய்யலாம் அல்லது மற்ற பக்க விளைவுகளைச் செய்யலாம்.

ஒரு அடிப்படை எரர்பவுண்டரி காம்போனென்டை உருவாக்குதல்

அடிப்படை கொள்கைகளை விளக்க, ஒரு அடிப்படை ErrorBoundary காம்போனென்டை உருவாக்குவோம்.

குறியீடு எடுத்துக்காட்டு

ஒரு எளிய ErrorBoundary காம்போனென்ட்டிற்கான குறியீடு இங்கே உள்ளது:

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

 static getDerivedStateFromError(error) {
 // அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காண்பிக்கும் வகையில் ஸ்டேட்டைப் புதுப்பிக்கவும்.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // எடுத்துக்காட்டு "componentStack":
 // in ComponentThatThrows (created by App)
 // in App
 console.error("பிழை ஒன்று பிடிக்கப்பட்டது:", error);
 console.error("பிழைத் தகவல்:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // நீங்கள் பிழையை ஒரு பிழை அறிக்கை சேவைக்கும் பதிவு செய்யலாம்
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
 return (
 

 
ஏதோ தவறு நடந்துவிட்டது.
 
பிழை: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

விளக்கம்

• Constructor: கன்ஸ்ட்ரக்டர் காம்போனென்ட்டின் ஸ்டேட்டை hasError-ஐ false என அமைத்து துவக்குகிறது. பிழைத்திருத்த நோக்கங்களுக்காக பிழை மற்றும் errorInfo-வையும் சேமிக்கிறோம்.
• getDerivedStateFromError(error): இந்த ஸ்டேட்டிக் மெத்தட் ஒரு சைல்டு காம்போனென்ட்டால் பிழை ஏற்படும்போது அழைக்கப்படுகிறது. இது ஒரு பிழை ஏற்பட்டுள்ளது என்பதைக் குறிக்க ஸ்டேட்டைப் புதுப்பிக்கிறது.
• componentDidCatch(error, info): இந்த மெத்தட் ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது பிழை மற்றும் காம்போனென்ட் ஸ்டேக் பற்றிய தகவல்களைக் கொண்ட ஒரு info ஆப்ஜெக்டைப் பெறுகிறது. இங்கே, நாங்கள் பிழையை கன்சோலில் பதிவு செய்கிறோம் (உங்களுக்கு விருப்பமான பதிவு பொறிமுறைக்கு மாற்றவும், அதாவது சென்ட்ரி, பக்ஸ்நாக் அல்லது தனிப்பயன் இன்-ஹவுஸ் தீர்வு). நாங்கள் பிழை மற்றும் errorInfo-வை ஸ்டேட்டிலும் அமைக்கிறோம்.
• render(): ரெண்டர் மெத்தட் hasError ஸ்டேட்டை சரிபார்க்கிறது. அது true ஆக இருந்தால், அது ஒரு ஃபால்பேக் UI-ஐ ரெண்டர் செய்கிறது; இல்லையெனில், அது காம்போனென்ட்டின் சைல்டை ரெண்டர் செய்கிறது. ஃபால்பேக் UI தகவலறிந்ததாகவும் பயனர் நட்புடன் இருக்க வேண்டும். பிழை விவரங்கள் மற்றும் காம்போனென்ட் ஸ்டேக்கைச் சேர்ப்பது டெவலப்பர்களுக்கு உதவியாக இருந்தாலும், பாதுகாப்பு காரணங்களுக்காக உற்பத்திச் சூழல்களில் நிபந்தனையுடன் ரெண்டர் செய்யப்பட வேண்டும் அல்லது அகற்றப்பட வேண்டும்.

எரர்பவுண்டரி காம்போனென்டைப் பயன்படுத்துதல்

ErrorBoundary காம்போனென்டைப் பயன்படுத்த, பிழையை ஏற்படுத்தக்கூடிய எந்தவொரு காம்போனென்டையும் அதற்குள் வைத்தால் போதும்.

குறியீடு எடுத்துக்காட்டு

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* பிழையை ஏற்படுத்தக்கூடிய காம்போனென்ட்கள் */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

விளக்கம்

இந்த எடுத்துக்காட்டில், MyComponent ஆனது ErrorBoundary-ஆல் சூழப்பட்டுள்ளது. MyComponent அல்லது அதன் சைல்டு காம்போனென்ட்களுக்குள் ஏதேனும் பிழை ஏற்பட்டால், ErrorBoundary அதைப் பிடித்து ஃபால்பேக் UI-ஐ ரெண்டர் செய்யும்.

மேம்பட்ட எரர்பவுண்டரி உத்திகள்

அடிப்படை ErrorBoundary ஒரு அடிப்படை அளவிலான பிழை கையாளுதலை வழங்கினாலும், உங்கள் பிழை நிர்வாகத்தை மேம்படுத்த நீங்கள் செயல்படுத்தக்கூடிய பல மேம்பட்ட உத்திகள் உள்ளன.

1. நுட்பமான எரர் பவுண்டரிகள்

முழு செயலியையும் ஒரே ErrorBoundary-ஆல் சூழ்வதற்குப் பதிலாக, நுட்பமான எரர் பவுண்டரிகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இது உங்கள் செயலியின் குறிப்பிட்ட பகுதிகளில், அதாவது பிழைகள் ஏற்பட அதிக வாய்ப்புள்ள அல்லது தோல்வி குறைந்த தாக்கத்தை ஏற்படுத்தும் பகுதிகளில் ErrorBoundary காம்போனென்ட்களை வைப்பதை உள்ளடக்குகிறது. உதாரணமாக, நீங்கள் தனிப்பட்ட விட்ஜெட்டுகள் அல்லது வெளிப்புற தரவு மூலங்களைச் சார்ந்திருக்கும் காம்போனென்ட்களைச் சுற்றிலும் வைக்கலாம்.

எடுத்துக்காட்டு

function ProductList() {
 return (
 

 {/* தயாரிப்புகளின் பட்டியல் */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* பரிந்துரை இயந்திரம் */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

இந்த எடுத்துக்காட்டில், RecommendationWidget அதன் சொந்த ErrorBoundary-ஐக் கொண்டுள்ளது. பரிந்துரை இயந்திரம் தோல்வியுற்றால், அது ProductList-ஐப் பாதிக்காது, மேலும் பயனர் இன்னும் தயாரிப்புகளை உலாவ முடியும். இந்த நுட்பமான அணுகுமுறை பிழைகளைத் தனிமைப்படுத்தி, செயலி முழுவதும் அவை பரவுவதைத் தடுப்பதன் மூலம் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது.

2. பிழை பதிவு மற்றும் அறிக்கை

பிழைகளைப் பதிவு செய்வது பிழைத்திருத்தத்திற்கும், மீண்டும் மீண்டும் ஏற்படும் சிக்கல்களைக் கண்டறிவதற்கும் முக்கியமானது. componentDidCatch லைஃப்சைக்கிள் மெத்தட் சென்ட்ரி, பக்ஸ்நாக் அல்லது ரோல்பார் போன்ற பிழை பதிவு சேவைகளுடன் ஒருங்கிணைக்க ஏற்ற இடமாகும். இந்தச் சேவைகள் ஸ்டேக் ட்ரேஸ்கள், பயனர் சூழல் மற்றும் சூழல் தகவல்கள் உட்பட விரிவான பிழை அறிக்கைகளை வழங்குகின்றன, இது சிக்கல்களை விரைவாகக் கண்டறிந்து தீர்க்க உதவுகிறது. GDPR போன்ற தனியுரிமை விதிமுறைகளுக்கு இணங்குவதை உறுதிசெய்ய, பிழைப் பதிவுகளை அனுப்புவதற்கு முன் முக்கியமான பயனர் தரவை அநாமதேயமாக்குவது அல்லது திருத்துவதைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு

import * as Sentry from "@sentry/react";

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

 static getDerivedStateFromError(error) {
 // அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காண்பிக்கும் வகையில் ஸ்டேட்டைப் புதுப்பிக்கவும்.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // சென்ட்ரிக்கு பிழையைப் பதிவு செய்யவும்
 Sentry.captureException(error, { extra: info });
 // நீங்கள் பிழையை ஒரு பிழை அறிக்கை சேவைக்கும் பதிவு செய்யலாம்
 console.error("பிழை ஒன்று பிடிக்கப்பட்டது:", error);
 }

 render() {
 if (this.state.hasError) {
 // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
 return (
 

 
ஏதோ தவறு நடந்துவிட்டது.
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

இந்த எடுத்துக்காட்டில், componentDidCatch மெத்தட் Sentry.captureException-ஐப் பயன்படுத்தி சென்ட்ரிக்கு பிழையை அறிக்கையிடுகிறது. உங்கள் குழுவிற்கு அறிவிப்புகளை அனுப்ப சென்ட்ரியை நீங்கள் கட்டமைக்கலாம், இது முக்கியமான பிழைகளுக்கு விரைவாக பதிலளிக்க உங்களை அனுமதிக்கிறது.

3. தனிப்பயன் ஃபால்பேக் UI

ErrorBoundary-ஆல் காட்டப்படும் ஃபால்பேக் UI, பிழைகள் ஏற்படும்போதும் பயனர் நட்பு அனுபவத்தை வழங்க ஒரு வாய்ப்பாகும். ஒரு பொதுவான பிழைச் செய்தியைக் காண்பிப்பதற்குப் பதிலாக, பயனரை ஒரு தீர்வை நோக்கி வழிநடத்தும் மேலும் தகவலறிந்த செய்தியைக் காண்பிப்பதைக் கருத்தில் கொள்ளுங்கள். இது பக்கத்தைப் புதுப்பிப்பது, ஆதரவைத் தொடர்புகொள்வது அல்லது பின்னர் மீண்டும் முயற்சிப்பது எப்படி என்பது குறித்த வழிமுறைகளை உள்ளடக்கியிருக்கலாம். ஏற்பட்ட பிழையின் வகையின் அடிப்படையில் ஃபால்பேக் UI-ஐ நீங்கள் தனிப்பயனாக்கலாம்.

எடுத்துக்காட்டு

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

 static getDerivedStateFromError(error) {
 // அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காண்பிக்கும் வகையில் ஸ்டேட்டைப் புதுப்பிக்கவும்.
 return {
 hasError: true,
 error: error,
 };
 }

 componentDidCatch(error, info) {
 console.error("பிழை ஒன்று பிடிக்கப்பட்டது:", error);
 // நீங்கள் பிழையை ஒரு பிழை அறிக்கை சேவைக்கும் பதிவு செய்யலாம்
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
 if (this.state.error instanceof NetworkError) {
 return (
 

 
நெட்வொர்க் பிழை
 
தயவுசெய்து உங்கள் இணைய இணைப்பைச் சரிபார்த்து மீண்டும் முயற்சிக்கவும்.
 
 );
 } else {
 return (
 

 
ஏதோ தவறு நடந்துவிட்டது.
 
தயவுசெய்து பக்கத்தைப் புதுப்பித்து முயற்சிக்கவும் அல்லது ஆதரவைத் தொடர்பு கொள்ளவும்.
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

இந்த எடுத்துக்காட்டில், ஃபால்பேக் UI ஆனது பிழை ஒரு NetworkError-ஆ என்பதைச் சரிபார்க்கிறது. அப்படியானால், பயனரை அவர்களின் இணைய இணைப்பைச் சரிபார்க்க அறிவுறுத்தும் ஒரு குறிப்பிட்ட செய்தியைக் காட்டுகிறது. இல்லையெனில், அது ஒரு பொதுவான பிழைச் செய்தியைக் காட்டுகிறது. குறிப்பிட்ட, செயல்படக்கூடிய வழிகாட்டுதலை வழங்குவது பயனர் அனுபவத்தை பெரிதும் மேம்படுத்தும்.

4. மீண்டும் முயற்சிக்கும் பொறிமுறைகள்

சில சமயங்களில், பிழைகள் தற்காலிகமானவை மற்றும் செயல்பாட்டை மீண்டும் முயற்சிப்பதன் மூலம் தீர்க்கப்படலாம். தோல்வியுற்ற செயல்பாட்டை ஒரு குறிப்பிட்ட தாமதத்திற்குப் பிறகு தானாக மீண்டும் முயற்சிக்க ErrorBoundary-க்குள் ஒரு மீண்டும் முயற்சிக்கும் பொறிமுறையை நீங்கள் செயல்படுத்தலாம். நெட்வொர்க் பிழைகள் அல்லது தற்காலிக சர்வர் செயலிழப்புகளைக் கையாள்வதற்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும். பக்க விளைவுகளை ஏற்படுத்தக்கூடிய செயல்பாடுகளுக்கு மீண்டும் முயற்சிக்கும் பொறிமுறைகளைச் செயல்படுத்தும்போது எச்சரிக்கையாக இருங்கள், ஏனெனில் அவற்றை மீண்டும் முயற்சிப்பது எதிர்பாராத விளைவுகளுக்கு வழிவகுக்கும்.

எடுத்துக்காட்டு

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP பிழை! ஸ்டேட்டஸ்: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // எக்ஸ்போனென்ஷியல் பேக்ஆஃப்
 console.log(`${retryDelay / 1000} விநாடிகளில் மீண்டும் முயற்சிக்கப்படுகிறது...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // அன்மவுன்ட் அல்லது ரீ-ரெண்டரில் டைமரை சுத்தம் செய்யவும்
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
தரவு ஏற்றப்படுகிறது...
;
 }

 if (error) {
 return 
பிழை: {error.message} - {retryCount} முறை மீண்டும் முயற்சிக்கப்பட்டது.
;
 }

 return 
தரவு: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

இந்த எடுத்துக்காட்டில், DataFetchingComponent ஒரு API-இலிருந்து தரவைப் பெற முயற்சிக்கிறது. ஒரு பிழை ஏற்பட்டால், அது retryCount-ஐ அதிகரித்து, அதிவேகமாக அதிகரிக்கும் தாமதத்திற்குப் பிறகு செயல்பாட்டை மீண்டும் முயற்சிக்கிறது. ErrorBoundary கையாளப்படாத விதிவிலக்குகளைப் பிடித்து, மீண்டும் முயற்சித்த முயற்சிகளின் எண்ணிக்கையையும் சேர்த்து ஒரு பிழைச் செய்தியைக் காட்டுகிறது.

5. எரர் பவுண்டரிகள் மற்றும் சர்வர்-சைட் ரெண்டரிங் (SSR)

சர்வர்-சைட் ரெண்டரிங் (SSR) பயன்படுத்தும்போது, பிழை கையாளுதல் இன்னும் முக்கியமானதாகிறது. சர்வர்-சைட் ரெண்டரிங் செயல்பாட்டின் போது ஏற்படும் பிழைகள் முழு சர்வரையும் செயலிழக்கச் செய்யலாம், இது வேலையிழப்பு மற்றும் மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். உங்கள் எரர் பவுண்டரிகள் சர்வர் மற்றும் கிளையன்ட் ஆகிய இரண்டிலும் பிழைகளைப் பிடிப்பதற்காக சரியாக கட்டமைக்கப்பட்டுள்ளதா என்பதை நீங்கள் உறுதி செய்ய வேண்டும். பெரும்பாலும், Next.js மற்றும் Remix போன்ற SSR கட்டமைப்புகள் ரியாக்ட் எரர் பவுண்டரிகளை நிறைவு செய்யும் வகையில் அவற்றின் சொந்த உள்ளமைக்கப்பட்ட பிழை கையாளுதல் பொறிமுறைகளைக் கொண்டுள்ளன.

6. எரர் பவுண்டரிகளை சோதித்தல்

எரர் பவுண்டரிகள் சரியாக செயல்படுகின்றனவா மற்றும் எதிர்பார்க்கப்படும் ஃபால்பேக் UI-ஐ வழங்குகின்றனவா என்பதை உறுதிப்படுத்த அவற்றைச் சோதிப்பது அவசியம். பிழை நிலைகளை உருவகப்படுத்தவும், உங்கள் எரர் பவுண்டரிகள் பிழைகளைப் பிடித்து சரியான ஃபால்பேக் UI-ஐ ரெண்டர் செய்கின்றனவா என்பதைச் சரிபார்க்கவும் Jest மற்றும் React Testing Library போன்ற சோதனை நூலகங்களைப் பயன்படுத்தவும். உங்கள் எரர் பவுண்டரிகள் வலுவானவை மற்றும் பரந்த அளவிலான சூழ்நிலைகளைக் கையாளுகின்றன என்பதை உறுதிப்படுத்த வெவ்வேறு வகையான பிழைகள் மற்றும் எட்ஜ் கேஸ்களைச் சோதிப்பதைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு

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

function ComponentThatThrows() {
 throw new Error('இந்த காம்போனென்ட் ஒரு பிழையை ஏற்படுத்துகிறது');
 return 
இது ரெண்டர் செய்யப்படக்கூடாது
;
}

test('ஒரு பிழை ஏற்படும்போது ஃபால்பேக் UI-ஐ ரெண்டர் செய்கிறது', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/ஏதோ தவறு நடந்துவிட்டது/i);
 expect(errorMessage).toBeInTheDocument();
});

இந்த சோதனை ஒரு ErrorBoundary-க்குள் ஒரு பிழையை ஏற்படுத்தும் காம்போனென்டை ரெண்டர் செய்கிறது. பின்னர் அது பிழைச் செய்தி ஆவணத்தில் உள்ளதா என்பதைச் சரிபார்ப்பதன் மூலம் ஃபால்பேக் UI சரியாக ரெண்டர் செய்யப்பட்டுள்ளதா என்பதைச் சரிபார்க்கிறது.

7. நேர்த்தியான தரம் குறைத்தல் (Graceful Degradation)

உங்கள் ரியாக்ட் செயலிகளில் நேர்த்தியான தரம் குறைத்தலைச் செயல்படுத்துவதில் எரர் பவுண்டரிகள் ஒரு முக்கிய அங்கமாகும். நேர்த்தியான தரம் குறைத்தல் என்பது, உங்கள் செயலியின் சில பகுதிகள் தோல்வியுற்றாலும், அது குறைந்த செயல்பாட்டுடன் தொடர்ந்து செயல்படும் வகையில் வடிவமைக்கும் நடைமுறையாகும். எரர் பவுண்டரிகள் தோல்வியுறும் காம்போனென்ட்களைத் தனிமைப்படுத்தவும், அவை செயலியின் மற்ற பகுதிகளைப் பாதிப்பதைத் தடுக்கவும் உங்களை அனுமதிக்கின்றன. ஒரு ஃபால்பேக் UI மற்றும் மாற்று செயல்பாட்டை வழங்குவதன் மூலம், பிழைகள் ஏற்படும்போதும் பயனர்கள் அத்தியாவசிய அம்சங்களை அணுக முடியும் என்பதை நீங்கள் உறுதி செய்யலாம்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

ErrorBoundary ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், தவிர்க்க வேண்டிய சில பொதுவான தவறுகள் உள்ளன:

• அசிங்க்ரோனஸ் குறியீட்டைச் சுற்றிலும் வைக்காதது: ErrorBoundary ரெண்டரிங் செய்யும் போது, லைஃப்சைக்கிள் மெத்தடுகளில், மற்றும் கன்ஸ்ட்ரக்டர்களில் மட்டுமே பிழைகளைப் பிடிக்கிறது. அசிங்க்ரோனஸ் குறியீட்டில் (எ.கா., setTimeout, Promises) ஏற்படும் பிழைகளை try...catch பிளாக்குகளைப் பயன்படுத்திப் பிடித்து, அசிங்க்ரோனஸ் செயல்பாட்டிற்குள் பொருத்தமாகக் கையாள வேண்டும்.
• எரர் பவுண்டரிகளை அதிகமாகப் பயன்படுத்துதல்: உங்கள் செயலியின் பெரிய பகுதிகளை ஒரே ErrorBoundary-இல் வைப்பதைத் தவிர்க்கவும். இது பிழைகளின் மூலத்தைத் தனிமைப்படுத்துவதைக் கடினமாக்கும் மற்றும் ஒரு பொதுவான ஃபால்பேக் UI அடிக்கடி காட்டப்படுவதற்கு வழிவகுக்கும். குறிப்பிட்ட காம்போனென்ட்கள் அல்லது அம்சங்களைத் தனிமைப்படுத்த நுட்பமான எரர் பவுண்டரிகளைப் பயன்படுத்தவும்.
• பிழைத் தகவலைப் புறக்கணித்தல்: பிழைகளைப் பிடித்துவிட்டு ஒரு ஃபால்பேக் UI-ஐ மட்டும் காட்ட வேண்டாம். பிழைத் தகவலை (காம்போனென்ட் ஸ்டேக் உட்பட) ஒரு பிழை அறிக்கை சேவைக்கு அல்லது உங்கள் கன்சோலுக்குப் பதிவு செய்வதை உறுதிப்படுத்திக் கொள்ளுங்கள். இது அடிப்படைச் சிக்கல்களைக் கண்டறிந்து சரிசெய்ய உங்களுக்கு உதவும்.
• உற்பத்திச் சூழலில் முக்கியமான தகவல்களைக் காண்பித்தல்: உற்பத்திச் சூழல்களில் விரிவான பிழைத் தகவல்களை (எ.கா., ஸ்டேக் ட்ரேஸ்கள்) காண்பிப்பதைத் தவிர்க்கவும். இது பயனர்களுக்கு முக்கியமான தகவல்களை வெளிப்படுத்தக்கூடும் மற்றும் ஒரு பாதுகாப்பு அபாயமாக இருக்கலாம். அதற்குப் பதிலாக, ஒரு பயனர் நட்பு பிழைச் செய்தியைக் காட்டி, விரிவான தகவலை ஒரு பிழை அறிக்கை சேவைக்கு பதிவு செய்யவும்.

ஃபங்ஷனல் காம்போனென்ட்கள் மற்றும் ஹூக்ஸுடன் எரர் பவுண்டரிகள்

எரர் பவுண்டரிகள் கிளாஸ் காம்போனென்ட்களாக செயல்படுத்தப்பட்டாலும், ஹூக்ஸ் பயன்படுத்தும் ஃபங்ஷனல் காம்போனென்ட்களுக்குள் பிழைகளைக் கையாள அவற்றை நீங்கள் திறம்பட பயன்படுத்தலாம். வழக்கமான அணுகுமுறை, முன்பு நிரூபிக்கப்பட்டபடி, ஃபங்ஷனல் காம்போனென்டை ஒரு ErrorBoundary காம்போனென்டுக்குள் வைப்பதை உள்ளடக்குகிறது. பிழை கையாளுதல் தர்க்கம் ErrorBoundary-க்குள் உள்ளது, இது ஃபங்ஷனல் காம்போனென்டின் ரெண்டரிங் அல்லது ஹூக்ஸை செயல்படுத்தும்போது ஏற்படக்கூடிய பிழைகளை திறம்பட தனிமைப்படுத்துகிறது.

குறிப்பாக, ஃபங்ஷனல் காம்போனென்டின் ரெண்டரிங் போது அல்லது ஒரு useEffect ஹூக்கின் பாடிக்குள் ஏற்படும் எந்தப் பிழைகளும் ErrorBoundary-ஆல் பிடிக்கப்படும். இருப்பினும், ஃபங்ஷனல் காம்போனென்டுக்குள் DOM கூறுகளுடன் இணைக்கப்பட்ட நிகழ்வு கையாளுபவர்களுக்குள் (எ.கா., onClick, onChange) ஏற்படும் பிழைகளை ErrorBoundaries பிடிக்காது என்பதைக் கவனத்தில் கொள்ள வேண்டும். நிகழ்வு கையாளுபவர்களுக்கு, நீங்கள் பிழை கையாளுதலுக்காக பாரம்பரிய try...catch பிளாக்குகளை தொடர்ந்து பயன்படுத்த வேண்டும்.

பிழைச் செய்திகளின் சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல்

உலகளாவிய பார்வையாளர்களுக்காக செயலிகளை உருவாக்கும்போது, உங்கள் பிழைச் செய்திகளை சர்வதேசமயமாக்குவதும் உள்ளூர்மயமாக்குவதும் முக்கியம். ErrorBoundary-ன் ஃபால்பேக் UI-இல் காட்டப்படும் பிழைச் செய்திகள் சிறந்த பயனர் அனுபவத்தை வழங்க பயனரின் விருப்பமான மொழியில் மொழிபெயர்க்கப்பட வேண்டும். உங்கள் மொழிபெயர்ப்புகளை நிர்வகிக்கவும், பயனரின் இருப்பிடத்தின் அடிப்படையில் பொருத்தமான பிழைச் செய்தியை மாறும் வகையில் காட்டவும் i18next அல்லது React Intl போன்ற நூலகங்களைப் பயன்படுத்தலாம்.

i18next-ஐப் பயன்படுத்தி எடுத்துக்காட்டு

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    ta: { // Tamil language added for context
      translation: {
        'error.generic': 'ஏதோ தவறு நடந்துவிட்டது. தயவுசெய்து பின்னர் மீண்டும் முயற்சிக்கவும்.',
        'error.network': 'நெட்வொர்க் பிழை. தயவுசெய்து உங்கள் இணைய இணைப்பைச் சரிபார்க்கவும்.',
      },
    },
  },
  lng: 'ta', // Set to Tamil
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // ரியாக்ட்டிற்கு இது தேவையில்லை, ஏனெனில் அது இயல்பாகவே எஸ்கேப் செய்கிறது
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காண்பிக்கும் வகையில் ஸ்டேட்டைப் புதுப்பிக்கவும்
    // return { hasError: true }; // இது ஹூக்ஸுடன் இப்படி வேலை செய்யாது
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
    return ;
  }

  return children;
}

export default ErrorBoundary;

இந்த எடுத்துக்காட்டில், ஆங்கிலம் மற்றும் தமிழுக்கான மொழிபெயர்ப்புகளை நிர்வகிக்க i18next-ஐப் பயன்படுத்துகிறோம். ErrorFallback காம்போனென்ட் தற்போதைய மொழியின் அடிப்படையில் பொருத்தமான பிழைச் செய்தியைப் பெற useTranslation ஹூக்கைப் பயன்படுத்துகிறது. இது பயனர்கள் தங்கள் விருப்பமான மொழியில் பிழைச் செய்திகளைக் காண்பதை உறுதிசெய்கிறது, ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது.

முடிவுரை

ரியாக்ட் ErrorBoundary காம்போனென்ட்கள் வலுவான மற்றும் பயனர் நட்பு ரியாக்ட் செயலிகளை உருவாக்குவதற்கான ஒரு முக்கிய கருவியாகும். எரர் பவுண்டரிகளைச் செயல்படுத்துவதன் மூலம், நீங்கள் பிழைகளை நேர்த்தியாகக் கையாளலாம், செயலி செயலிழப்புகளைத் தடுக்கலாம், மற்றும் உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறந்த பயனர் அனுபவத்தை வழங்கலாம். எரர் பவுண்டரிகளின் கொள்கைகளைப் புரிந்துகொள்வதன் மூலமும், நுட்பமான எரர் பவுண்டரிகள், பிழை பதிவு மற்றும் தனிப்பயன் ஃபால்பேக் UI-கள் போன்ற மேம்பட்ட உத்திகளைச் செயல்படுத்துவதன் மூலமும், மற்றும் பொதுவான தவறுகளைத் தவிர்ப்பதன் மூலமும், உலகளாவிய பார்வையாளர்களின் தேவைகளைப் பூர்த்தி செய்யும் மேலும் மீள்திறன் மற்றும் நம்பகமான ரியாக்ட் செயலிகளை நீங்கள் உருவாக்கலாம். உண்மையிலேயே உள்ளடக்கிய பயனர் அனுபவத்தை வழங்க, பிழைச் செய்திகளைக் காண்பிக்கும்போது சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கலைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். வலைச் செயலிகளின் சிக்கலான தன்மை தொடர்ந்து வளர்ந்து வருவதால், உயர்தர மென்பொருளை உருவாக்கும் டெவலப்பர்களுக்கு பிழை கையாளுதல் நுட்பங்களில் தேர்ச்சி பெறுவது பெருகிய முறையில் முக்கியமானதாக மாறும்.