Error boundaries என்றால் என்ன மற்றும் அவை எதைப் பிடிக்கின்றன?

Question

Accepted Answer

**error boundary** என்பது JavaScript பிழைகளைப் பிடிக்கும் ஒரு உপাদானமாகும், அவை **rendering** சமயத்தில் அதன் child tree-ல் வீசப்பட்டு, முழு பயன்பாட்டையும் செயலிழக்கச் செய்யாமல் fallback UI ஐ காட்டி, பிழையை பதிவுசெய்யலாம். ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## அது பிடிப்பது — மற்றும் பிடிக்காதது ✅ பிடிப்பது: **render**-ல் பிழைகள், **lifecycle methods**-ல், மற்றும் அதற்கு கீழ் உள்ள கூறுகளின் கட்டுமான முறைகளில். ❌ **பிடிக்காதது**: - **event handlers**-ல் பிழைகள் (அங்கு வழக்கமான `try/catch` ஐ பயன்படுத்தவும்). - **Async** குறியீடு (promises, `setTimeout`) — அவை render flow-வுக்கு வெளியே உள்ளன. - boundary தனியே உள்ள பிழைகள், அல்லது **SSR** சமயத்தில் பிழைகள். ## நடைமுறை குறிப்புகள் - Error boundaries தற்போது **class components** ஆக இருக்க வேண்டும் (அல்லது hook-friendly API-க்கு `react-error-boundary` library ஐ பயன்படுத்தவும்). - சுயாதீன பிரிவுகளைச் சுற்றி பல boundaries வைக்கவும் (widgets, routes) இതனால் ஒரு செயலிழந்த widget அனைத்தையும் கீழே கொண்டு வராது — ஒரு ஒற்றை top-level boundary எந்தப் பிழையையும் முற்றிலும் வெற்று பக்கமாக மாற்றுகிறது.