ஜாவாஸ்கிரிப்ட் எரர் பவுண்டரி: ஒரு ரியாக்ட் பிழை கையாளுதல் செயலாக்க வழிகாட்டி

ரியாக்ட் மேம்பாட்டு உலகில், எதிர்பாராத பிழைகள் பயனர்களுக்கு வெறுப்பூட்டும் அனுபவங்களையும், பயன்பாட்டின் உறுதியற்ற தன்மையையும் ஏற்படுத்தக்கூடும். வலுவான மற்றும் நம்பகமான பயன்பாடுகளை உருவாக்க, நன்கு வரையறுக்கப்பட்ட பிழை கையாளும் உத்தி மிகவும் முக்கியமானது. ரியாக்ட்டின் எரர் பவுண்டரிகள், உங்கள் கூறு மரத்திற்குள் (component tree) ஏற்படும் பிழைகளை நேர்த்தியாகக் கையாள ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகின்றன. இது முழுப் பயன்பாடும் செயலிழப்பதைத் தடுத்து, ஒரு மாற்று இடைமுகத்தை (fallback UI) காட்ட உங்களை அனுமதிக்கிறது.

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

எரர் பவுண்டரி என்பது ஒரு ரியாக்ட் கூறாகும். இது அதன் குழந்தை கூறு மரத்தில் (child component tree) எங்கும் ஏற்படும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவுசெய்து, செயலிழந்த கூறு மரத்திற்குப் பதிலாக ஒரு மாற்று இடைமுகத்தைக் காட்டுகிறது. எரர் பவுண்டரிகள் ரெண்டரிங் செய்யும்போதும், வாழ்க்கைச் சுழற்சி முறைகளிலும் (lifecycle methods), அவற்றின் கீழுள்ள முழு மரத்தின் கட்டமைப்பாளர்களிலும் (constructors) ஏற்படும் பிழைகளைப் பிடிக்கின்றன.

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

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

• நிகழ்வு கையாளுபவர்கள் (Event handlers) (வரும் பிரிவுகளில் மேலும் அறிக)
• ஒத்திசைவற்ற குறியீடு (e.g., setTimeout அல்லது requestAnimationFrame கால்பேக்குகள்)
• சர்வர்-சைட் ரெண்டரிங்
• எரர் பவுண்டரியிலேயே ஏற்படும் பிழைகள் (அதன் குழந்தைகளில் அல்ல)

எரர் பவுண்டரிகளை ஏன் பயன்படுத்த வேண்டும்?

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

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

ரியாக்டில் எரர் பவுண்டரிகளை செயல்படுத்துதல்

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

• static getDerivedStateFromError(error): இந்த வாழ்க்கைச் சுழற்சி முறை ஒரு சந்ததிக் கூறு (descendant component) பிழையை ஏற்படுத்தும் போது அழைக்கப்படுகிறது. இது ஏற்பட்ட பிழையை ஒரு வாதமாகப் பெற்று, ஒரு பிழை ஏற்பட்டுள்ளது என்பதைக் குறிக்க, கூறின் நிலையை (state) புதுப்பிக்க ஒரு மதிப்பைத் திருப்பி அனுப்ப வேண்டும் (எ.கா., hasError கொடியை true என அமைத்தல்).
• componentDidCatch(error, info): இந்த வாழ்க்கைச் சுழற்சி முறை ஒரு சந்ததிக் கூறு பிழையை ஏற்படுத்தும் போது அழைக்கப்படுகிறது. இது ஏற்பட்ட பிழையை ஒரு வாதமாகவும், எந்தக் கூறு பிழையை ஏற்படுத்தியது என்பது பற்றிய தகவல்களைக் கொண்ட ஒரு info பொருளையும் பெறுகிறது. சென்ட்ரி (Sentry) அல்லது பக்ஸ்நாக் (Bugsnag) போன்ற ஒரு சேவைக்கு பிழையைப் பதிவு செய்ய இந்த முறையைப் பயன்படுத்தலாம்.

இங்கே ஒரு எரர் பவுண்டரி கூறின் அடிப்படை உதாரணம்:

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>

எரர் பவுண்டரி பயன்பாட்டின் நடைமுறை எடுத்துக்காட்டுகள்

எரர் பவுண்டரிகள் குறிப்பாகப் பயனுள்ளதாக இருக்கும் சில நடைமுறைச் சூழ்நிலைகளை ஆராய்வோம்:

1. 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) { // பிழை எரர் பவுண்டரியால் பிடிக்கப்படும் 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-ஐ நீங்கள் விரிவாக்கலாம்.

2. மூன்றாம் தரப்பு லைப்ரரி பிழைகளைக் கையாளுதல்

மூன்றாம் தரப்பு லைப்ரரிகளைப் பயன்படுத்தும்போது, அவை எதிர்பாராத பிழைகளை ஏற்படுத்த வாய்ப்புள்ளது. இந்த லைப்ரரிகளைப் பயன்படுத்தும் கூறுகளை எரர் பவுண்டரிகளுடன் சுற்றுவது இந்தப் பிழைகளை நேர்த்தியாகக் கையாள உதவும்.

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

function MyChartComponent() { try { // மூன்றாம் தரப்பு லைப்ரரியைப் பயன்படுத்தி சார்ட்டை ரெண்டர் செய்யவும் return <Chart data={data} />; } catch (error) { // இந்த கேட்ச் பிளாக் ரியாக்ட் கூறு வாழ்க்கைச் சுழற்சி பிழைகளுக்குப் பயனுள்ளதாக இருக்காது // இது முதன்மையாக இந்த குறிப்பிட்ட செயல்பாட்டிற்குள் உள்ள ஒத்திசைவான பிழைகளுக்கானது. console.error("Error rendering chart:", error); // எரர் பவுண்டரியால் பிடிக்கப்பட பிழையைத் தூண்டுவதைக் கவனியுங்கள் throw error; // பிழையை மீண்டும் தூண்டுதல் } } function App() { return ( <ErrorBoundary> <MyChartComponent /> </ErrorBoundary> ); }

Chart கூறு ஒரு பிழையை ஏற்படுத்தினால், எரர் பவுண்டரி அதைப் பிடித்து ஒரு மாற்று UI-ஐக் காண்பிக்கும். MyChartComponent-க்குள் உள்ள try/catch, ஒத்திசைவான செயல்பாட்டிற்குள் உள்ள பிழைகளை மட்டுமே பிடிக்கும், கூறின் வாழ்க்கைச் சுழற்சியை அல்ல. எனவே, எரர் பவுண்டரி இங்கே மிகவும் முக்கியமானது.

3. ரெண்டரிங் பிழைகளைக் கையாளுதல்

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

function DisplayName({ name }) { if (typeof name !== 'string') { throw new Error('பெயர் ஒரு சரமாக இருக்க வேண்டும்'); } return <h2>வணக்கம், {name}!</h2>; } function App() { return ( <ErrorBoundary> <DisplayName name={123} /> <!-- தவறான ப்ராப் வகை --> </ErrorBoundary> ); }

இந்த எடுத்துக்காட்டில், DisplayName கூறு name ப்ராப் ஒரு சரமாக (string) இருக்கும் என எதிர்பார்க்கிறது. அதற்குப் பதிலாக ஒரு எண் அனுப்பப்பட்டால், ஒரு பிழை தூண்டப்படும், மற்றும் எரர் பவுண்டரி அதைப் பிடித்து ஒரு மாற்று UI-ஐக் காண்பிக்கும்.

எரர் பவுண்டரிகள் மற்றும் நிகழ்வு கையாளுபவர்கள்

முன்னர் குறிப்பிட்டபடி, எரர் பவுண்டரிகள் நிகழ்வு கையாளுபவர்களுக்குள் (event handlers) ஏற்படும் பிழைகளைப் பிடிக்காது. ஏனென்றால், நிகழ்வு கையாளுபவர்கள் பொதுவாக ஒத்திசைவற்றவை, மற்றும் எரர் பவுண்டரிகள் ரெண்டரிங், வாழ்க்கைச் சுழற்சி முறைகள் மற்றும் கட்டமைப்பாளர்களில் ஏற்படும் பிழைகளை மட்டுமே பிடிக்கின்றன.

நிகழ்வு கையாளுபவர்களில் பிழைகளைக் கையாள, நீங்கள் நிகழ்வு கையாளுபவர் செயல்பாட்டிற்குள் ஒரு பாரம்பரிய try...catch பிளாக்கைப் பயன்படுத்த வேண்டும்.

function MyComponent() { const handleClick = () => { try { // பிழையை ஏற்படுத்தக்கூடிய சில குறியீடு throw new Error('நிகழ்வு கையாளுபவரில் ஒரு பிழை ஏற்பட்டது'); } catch (error) { console.error('நிகழ்வு கையாளுபவரில் ஒரு பிழை பிடிக்கப்பட்டது:', error); // பிழையைக் கையாளவும் (எ.கா., பயனருக்கு ஒரு பிழைச் செய்தியைக் காண்பிக்கவும்) } }; return <button onClick={handleClick}>என்னை கிளிக் செய்யவும்</button>; }

உலகளாவிய பிழை கையாளுதல்

ரியாக்ட் கூறு மரத்திற்குள் பிழைகளைக் கையாளுவதில் எரர் பவுண்டரிகள் சிறந்தவை என்றாலும், அவை சாத்தியமான அனைத்துப் பிழைச் சூழ்நிலைகளையும் உள்ளடக்காது. எடுத்துக்காட்டாக, ரியாக்ட் கூறுகளுக்கு வெளியே ஏற்படும் பிழைகளை அவை பிடிக்காது, அதாவது உலகளாவிய நிகழ்வு கேட்பான்களில் (global event listeners) ஏற்படும் பிழைகள் அல்லது ரியாக்ட் தொடங்குவதற்கு முன்பு இயங்கும் குறியீட்டில் ஏற்படும் பிழைகள்.

இந்த வகையான பிழைகளைக் கையாள, நீங்கள் window.onerror நிகழ்வு கையாளுபவரைப் பயன்படுத்தலாம்.

window.onerror = function(message, source, lineno, colno, error) { console.error('உலகளாவிய பிழை கையாளுபவர்:', message, source, lineno, colno, error); // சென்ட்ரி அல்லது பக்ஸ்நாக் போன்ற ஒரு சேவைக்கு பிழையைப் பதிவு செய்யவும் // பயனருக்கு ஒரு உலகளாவிய பிழைச் செய்தியைக் காண்பிக்கவும் (விருப்பத்தேர்வு) return true; // இயல்புநிலை பிழை கையாளும் நடத்தையைத் தடுக்கவும் };

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

முக்கியமானது: window.onerror நிகழ்வு கையாளுபவரிலிருந்து true எனத் திருப்புவது, உலாவியை இயல்புநிலை பிழைச் செய்தியைக் காண்பிப்பதைத் தடுக்கிறது. இருப்பினும், பயனர் அனுபவத்தைக் கவனத்தில் கொள்ளுங்கள்; நீங்கள் இயல்புநிலை செய்தியை அடக்கினால், தெளிவான மற்றும் தகவல் தரும் மாற்றை வழங்குவதை உறுதிசெய்யுங்கள்.

எரர் பவுண்டரிகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

எரர் பவுண்டரிகளைப் பயன்படுத்தும்போது நினைவில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

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

மேம்பட்ட எரர் பவுண்டரி நுட்பங்கள்

1. ஒரு ரெண்டர் ப்ராப்பைப் பயன்படுத்துதல்

ஒரு நிலையான மாற்று 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 ப்ராப் பிழை மற்றும் பிழைத் தகவலை வாதங்களாகப் பெறுகிறது, இது மேலும் குறிப்பிட்ட பிழைச் செய்திகளைக் காண்பிக்க அல்லது பிழையின் அடிப்படையில் மற்ற நடவடிக்கைகளை எடுக்க உங்களை அனுமதிக்கிறது.

2. ஒரு உயர்-வரிசைக் கூறாக (HOC) எரர் பவுண்டரி

நீங்கள் ஒரு உயர்-வரிசைக் கூறினை (HOC) உருவாக்கலாம், அது மற்றொரு கூறினை ஒரு எரர் பவுண்டரியுடன் சுற்றுகிறது. ஒரே குறியீட்டை மீண்டும் மீண்டும் எழுதாமல் பல கூறுகளுக்கு எரர் பவுண்டரிகளைப் பயன்படுத்துவதற்கு இது பயனுள்ளதாக இருக்கும்.

function withErrorBoundary(WrappedComponent) { return class WithErrorBoundary extends React.Component { render() { return ( <ErrorBoundary> <WrappedComponent {...this.props} /> </ErrorBoundary> ); } }; } // பயன்பாடு: const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

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

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

உங்கள் எரர் பவுண்டரிகள் சரியாக வேலை செய்கின்றன என்பதை உறுதிப்படுத்த அவற்றைச் சோதிப்பது முக்கியம். உங்கள் எரர் பவுண்டரிகளைச் சோதிக்க ஜெஸ்ட் (Jest) மற்றும் ரியாக்ட் டெஸ்டிங் லைப்ரரி (React Testing Library) போன்ற சோதனை லைப்ரரிகளைப் பயன்படுத்தலாம்.

ரியாக்ட் டெஸ்டிங் லைப்ரரியைப் பயன்படுத்தி ஒரு எரர் பவுண்டரியைச் சோதிப்பதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

import { render, screen, fireEvent } from '@testing-library/react'; import ErrorBoundary from './ErrorBoundary'; function ComponentThatThrows() { throw new Error('This component throws an error'); } test('renders fallback UI when an error is thrown', () => { render( <ErrorBoundary> <ComponentThatThrows /> </ErrorBoundary> ); expect(screen.getByText('Something went wrong.')).toBeInTheDocument(); });

இந்தச் சோதனை ComponentThatThrows கூறினை ரெண்டர் செய்கிறது, இது ஒரு பிழையை ஏற்படுத்துகிறது. பின்னர், எரர் பவுண்டரியால் ரெண்டர் செய்யப்பட்ட மாற்று UI காட்டப்படுகிறதா என்பதைச் சோதனை உறுதி செய்கிறது.

எரர் பவுண்டரிகள் மற்றும் சர்வர் கூறுகள் (ரியாக்ட் 18+)

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

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

சர்வர் கூறுகளில் பிழை கையாளுதல் ஒரு வளர்ந்து வரும் பகுதி, எனவே சமீபத்திய சிறந்த நடைமுறைகள் மற்றும் பரிந்துரைகளுடன் புதுப்பித்த நிலையில் இருப்பது முக்கியம்.

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

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

முடிவுரை

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

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