რა არის error boundaries და რა აღბეჭდავენ ისინი?

Question

Accepted Answer

**Error boundary** არის კომპონენტი, რომელიც აჭერს JavaScript შეცდომებს, რომლებიც ხდება **რენდერირების დროს** მის შვილების ხეში, აჩვენებს ფოლბэკ 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-ის ნაკადის გარეთ არიან. - შეცდომები თვით boundary-ში, ან **SSR**-ის დროს. ## პრაქტიკული შენიშვნები - Error boundaries უნდა იყოს **class components** ამჟამად (ან გამოიყენე `react-error-boundary` ბიბლიოთეკა hook-friendly API-ს ჩასაწყობად). - განათავსე რამდენიმე boundaries დამოუკიდებელი სექციების გარშემო (widgets, routes) ისე, რომ ერთი ვიჯეტის წარუმატებელი ფუნქციონირება ყველას დაანგრიოს — ერთი ტოპ-ლეველ boundary ნებისმიერ შეცდომას სრულ ცარიელ გვერდად აქცევს.