By : admin
Language: javascript
Date Published: 1 month ago
In production React apps, unhandled exceptions can break the entire UI, leading to poor user experience—especially critical in financial or e-commerce platforms where reliability is paramount. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole app. They work like try/catch but for React's declarative UI, preserving the rest of the interface when isolated components fail.
Use error boundaries strategically: wrap individual widgets (like a stock ticker or payment form) rather than the whole app, so errors in one section don’t take down unrelated features. Log errors to services like Sentry for debugging, and show user-friendly messages like “Something went wrong—please try again” with a retry option. Avoid overusing them; let critical errors (e.g., layout-breaking issues) propagate if they truly require a full reload. This pattern maintains app stability while keeping development velocity high.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // ErrorBoundary.js import React, { Component } from 'react'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state to show fallback UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // Log error to external service (e.g., Sentry, LogRocket) console.error('ErrorBoundary caught:', error, errorInfo); // You can also send to analytics here } render() { if (this.state.hasError) { // Custom fallback UI return ( <div className="error-boundary"> <h2>Something went wrong.</h2> <p>Please try refreshing the page or contact support if the issue persists.</p> <button onClick={() => window.location.reload()}>Try again</button> </div> ); } return this.props.children; } } export default ErrorBoundary; // Usage example (e.g., in a dashboard) // <ErrorBoundary> // <StockTickerWidget /> {/* Isolated component – if it fails, others remain functional */} // </ErrorBoundary> // // <ErrorBoundary> // <PaymentForm /> {/* Critical section – failure shows retry UI without breaking nav/header */} // </ErrorBoundary> |