किसी React पेड़ में runtime errors आप कैसे संभालते हैं?

error boundaries render के दौरान, lifecycle तरीकों में और अपने नीचे के constructors में फेंकी गई errors पकड़ती हैं, फिर पूरे app को हटाने की जगह एक fallback दिखाती हैं। वे अब भी getDerivedStateFromError और componentDidCatch वाली class components होती हैं, या कोई wrapper library। वे event handlers, async callbacks या खुद boundary की errors नहीं पकड़तीं, तो उनके लिए सामान्य try और catch तथा रिपोर्टिंग चाहिए।

error boundaries अपने नीचे के subtree को render करते वक्त फेंकी गई हर चीज पकड़ती हैं, और एक fallback लगा देती हैं ताकि एक टूटा widget पूरा page न ले डूबे। मैं आम तौर पर खुद class लिखने की जगह react-error-boundary का wrapper इस्तेमाल करता हूं, क्योंकि उससे मुझे reset handler मुफ्त मिल जाता है। जो छूटता है वही लोग भूल जाते हैं: किसी onClick, किसी setTimeout, या किसी बिना संभाले promise rejection में फेंकी गई चीज boundary तक पहुंचती ही नहीं, तो उनके लिए अब भी try और catch तथा साफ error state चाहिए। जगह पर, जड़ पर एक boundary मूल रूप से एक बेहतर crash screen भर है। मैं असल में हर उस हिस्से को लपेटता हूं जो अपने आप में काम का है, यानी sidebar, मुख्य panel, और कोई भी तीसरे पक्ष का embed, हर एक की अपनी boundary, ऐसे fallback के साथ जो बताए कि क्या टूटा और एक दोबारा कोशिश दे जो boundary reset करके data फिर से लाए। हर boundary componentDidCatch में component stack और user के संदर्भ के साथ हमारे error tracker को रिपोर्ट करती है, और React 19 में मैं जड़ पर onUncaughtError भी लगाता हूं ताकि कुछ भी बिना दर्ज हुए न निकल जाए।