feat: the React frontend has no error boundary — an unhandled error in any page component causes the entire app to go blank with no user-visible error message or recovery option

[divyanshim27]

🐛 Problem Statement

The pdfToPng frontend (frontend/src/) is a Vite React app with four page components: PdfPng.jsx, ImageWbp.jsx, ImageJpg.jsx, and RemoveBg.jsx. None of these pages are wrapped in a React Error Boundary.

When any of the following occur, the React error bubbles up and the entire app renders blank — showing nothing to the user:

• The fetch() call to the Flask backend fails (backend down, CORS error, network offline)
• A malformed server response causes .json() or URL processing to throw
• URL.createObjectURL() fails (browser permissions, null blob)
• A third-party dependency error

The user sees a white/blank screen with no explanation, error message, or way to recover without a hard page refresh.

Proposed Fix

1. Create a reusable ErrorBoundary component

// frontend/src/components/ErrorBoundary/ErrorBoundary.jsx
import React from 'react';

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('[ErrorBoundary]', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary-fallback">
          <h2>Something went wrong</h2>
          <p>{this.state.error?.message ?? 'An unexpected error occurred.'}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try Again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

2. Wrap each page in App.jsx

// frontend/src/App.jsx
import { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';

<Routes>
  <Route path="/" element={
    <ErrorBoundary><PdfPng /></ErrorBoundary>
  } />
  <Route path="/webp" element={
    <ErrorBoundary><ImageWbp /></ErrorBoundary>
  } />
  {/* ... other routes */}
</Routes>

3. Add fetch error handling in each page

Each page's handleConvert function should catch errors and display a user-friendly message:

const [error, setError] = useState(null);

const handleConvert = async () => {
  setError(null);
  try {
    const response = await fetch('http://localhost:5000/convertPng', { ... });
    if (!response.ok) throw new Error(`Server error: ${response.status}`);
    // ... existing success logic
  } catch (err) {
    setError(err.message || 'Conversion failed. Please try again.');
  }
};

{error && <div className="error-message">⚠ {error}</div>}

Files to Create/Modify

File	Change
frontend/src/components/ErrorBoundary/ErrorBoundary.jsx	New Error Boundary component
frontend/src/App.jsx	Wrap all routes with ErrorBoundary
All page components	Add useState(null) error state + display
frontend/src/index.css	Add .error-boundary-fallback and .error-message styles

Suggested labels: bug, frontend, UX

I would like to work on this. Could you please assign it to me?

[divyanshim27]

Hey @Durgeshwar-AI ,
Please assign it to me under GSSoC 2026.
/claim /assign /claim-assignment