lowCWE-392

No React Error Boundary

Without error boundaries, a JavaScript error in any component crashes the entire React tree and shows a blank screen to the user.

How It Works

React components can throw errors during rendering. Without an ErrorBoundary component, any unhandled error in the component tree causes React to unmount the entire app — showing users a white screen with no explanation. Error boundaries catch these errors and show a fallback UI while logging the error for developers.

Vulnerable Code
// BAD: no error boundary — one component error = blank screen for all users
function App() {
  return (
    <Router>
      <UserDashboard />  {/* if this throws, whole app crashes */}
      <PaymentWidget />
    </Router>
  );
}
Secure Code
// GOOD: wrap critical sections with error boundaries
function App() {
  return (
    <Router>
      <ErrorBoundary fallback={<DashboardError />}>
        <UserDashboard />
      </ErrorBoundary>
      <ErrorBoundary fallback={<PaymentError />}>
        <PaymentWidget />
      </ErrorBoundary>
    </Router>
  );
}

Real-World Example

Multiple production outages have been caused by a single component receiving unexpected null data, causing the entire app to show a blank screen. Error boundaries would have contained the crash to one section while the rest of the app remained functional.

How to Prevent It

  • Wrap major application sections (dashboard, payment, user profile) in ErrorBoundary components
  • Use react-error-boundary library for a production-ready ErrorBoundary with retry support
  • Log caught errors to Sentry or your error monitoring tool from within the ErrorBoundary
  • Show a user-friendly fallback UI with a 'Try again' button instead of a blank screen

Affected Technologies

javascriptReact

Data Hogo detects this vulnerability automatically.

Scan Your Repo Free

Related Vulnerabilities