Aplikacja działa świetnie... do momentu gdy użytkownik wprowadzi nieoczekiwane dane, API zwróci błąd, lub nastąpi nieprzewidziany błąd. Wtedy biały ekran śmierci. Aplikacja przestaje działać. Użytkownik widzi pustą stronę. Koniec doświadczenia.

Błędy są nieuniknione – API pada, dane są niepoprawne, użytkownicy robią rzeczy których nie przewidzieliśmy. Profesjonalna aplikacja nie może po prostu przestać działać. Musi gracefully obsłużyć błąd: pokazać przyjazny komunikat, zalogować błąd do monitoringu, pozwolić użytkownikowi kontynuować pracę.

W tym wpisie nauczymy się profesjonalnie obsługiwać błędy w React. Poznamy Error Boundaries, nauczymy się tworzyć fallback UI, zintegrujemy z systemami monitoringu (Sentry), zbudujemy globalne error handling. To będzie praktyczny wpis – po nim Twoja aplikacja będzie odporna na błędy.

Co się dzieje gdy błąd wystąpi?

function BrokenComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // API zwraca null zamiast obiektu
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  // 💥 TypeError: Cannot read property 'name' of null
  return <div>{data.name}</div>;
}

Rezultat: Biały ekran. Cała aplikacja przestaje działać.

// ✅ Bezpieczna wersja
return <div>{data?.name || 'Loading...'}</div>;

// Lub
if (!data) return <div>Loading...</div>;
return <div>{data.name}</div>;

Tradycyjny try-catch nie wystarczy

function ComponentWithTryCatch() {
  try {
    const data = null;
    return <div>{data.name}</div>; // ❌ Try-catch nie łapie błędów w TSX!
  } catch (error) {
    return <div>Error occurred</div>;
  }
}

// ✅ DZIAŁA - synchroniczny kod
function processData(data) {
  try {
    const result = JSON.parse(data);
    return result;
  } catch (error) {
    console.error('Parse error:', error);
    return null;
  }
}

// ❌ NIE DZIAŁA - event handler
function BadButton() {
  try {
    return (
      <button onClick={() => {
        throw new Error('Boom!'); // Try-catch NIE łapie tego!
      }}>
        Click
      </button>
    );
  } catch (error) {
    return <div>Error</div>; // Nigdy się nie wykona
  }
}

// ✅ DZIAŁA - try-catch WEWNĄTRZ handlera
function GoodButton() {
  const handleClick = () => {
    try {
      throw new Error('Boom!');
    } catch (error) {
      console.error(error); // To zadziała!
    }
  };
  
  return <button onClick={handleClick}>Click</button>;
}

// ❌ NIE DZIAŁA - komponent potomny
function Parent() {
  try {
    return <BrokenChild />; // Błąd w BrokenChild nie zostanie złapany
  } catch (error) {
    return <div>Error</div>;
  }
}

function MyComponent() {
  const [data, setData] = useState(null);
  
  try {
    // Błąd A: Synchroniczny
    const x = JSON.parse('invalid json');
    
    // Błąd B: Renderowanie
    return <div>{data.name}</div>;
    
    // Błąd C: Event handler
    const handleClick = () => {
      throw new Error('Click error');
    };
    
    // Błąd D: useEffect
    useEffect(() => {
      throw new Error('Effect error');
    }, []);
    
  } catch (error) {
    return <div>Error: {error.message}</div>;
  }
}

Error Boundary to komponent, który łapie błędy TypeScript w całym drzewie potomnych komponentów, loguje je i wyświetla fallback UI.

Limitacje Error Boundaries

⚠️ NIE łapią błędów w:

• Event handlers (onClick, onChange)
• Asynchronicznym kodzie (setTimeout, Promise)
• Server-side rendering
• Błędach w samym Error Boundary

✅ Łapią błędy w:

• Renderowaniu komponentów potomnych
• Lifecycle methods
• Konstruktorach komponentów potomnych

const handleClick = () => {
  try {
    // Twój kod który może rzucić błąd
    doSomethingRisky();
  } catch (error) {
    console.error('Error in handler:', error);
    setError(error); // Pokaż błąd użytkownikowi
  }
};

function MyComponent() {
  const [count, setCount] = useState(0);
  
  // ✅ Error Boundary to ZŁAPIE
  if (count > 5) {
    throw new Error('Count too high!');
  }
  
  // ❌ Error Boundary tego NIE złapie
  const handleClick = () => {
    throw new Error('Click error');
  };
  
  // ❌ Error Boundary tego NIE złapie
  useEffect(() => {
    setTimeout(() => {
      throw new Error('Timeout error');
    }, 1000);
  }, []);
  
  // ❌ Error Boundary tego NIE złapie
  const fetchData = async () => {
    throw new Error('Async error');
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

// Użycie z Error Boundary
<ErrorBoundary>
  <MyComponent />  {/* Tylko błędy podczas renderowania zostaną złapane */}
</ErrorBoundary>

Niestety, Error Boundaries mogą być tylko class components (na razie).

// ErrorBoundary.tsx
import React, { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }

  static getDerivedStateFromError(error: Error): State {
    // Aktualizuj state żeby następny render pokazał fallback UI
    return {
      hasError: true,
      error
    };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // Loguj błąd do systemu monitoringu
    console.error('Error caught by boundary:', error, errorInfo);
    
    // Tutaj możesz wysłać do Sentry, LogRocket, etc.
  }

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny fallback UI
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
          <h2>Coś poszło nie tak 😞</h2>
          <p>Przepraszamy za niedogodności. Spróbuj odświeżyć stronę.</p>
          <button onClick={() => window.location.reload()}>
            Odśwież stronę
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Użycie

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
      <AnotherComponent />
    </ErrorBoundary>
  );
}

Teraz jeśli MyComponent lub AnotherComponent rzuci błąd, Error Boundary go złapie i pokaże fallback UI.

// Własny komponent fallback
function CustomErrorFallback({ error }: { error: Error }) {
  return (
    <div style={{
      padding: '40px',
      background: '#fee',
      border: '2px solid #f88',
      borderRadius: '8px',
      textAlign: 'center'
    }}>
      <h1>🚨 Ups! Coś poszło nie tak</h1>
      <p>Nie martw się, już nad tym pracujemy!</p>
      <details style={{ marginTop: '20px' }}>
        <summary>Szczegóły techniczne</summary>
        <pre>{error.message}</pre>
      </details>
      <button 
        onClick={() => window.location.href = '/'}
        style={{
          marginTop: '20px',
          padding: '10px 20px',
          fontSize: '16px',
          cursor: 'pointer'
        }}
      >
        Wróć do strony głównej
      </button>
    </div>
  );
}

// Użycie
<ErrorBoundary fallback={<CustomErrorFallback error={new Error()} />}>
  <MyComponent />
</ErrorBoundary>

Dla funkcyjnych komponentów możemy użyć biblioteki:

npm install react-error-boundary

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }: any) {
  return (
    <div role="alert">
      <p>Coś poszło nie tak:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Spróbuj ponownie</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={(error, errorInfo) => {
        // Loguj do Sentry
        console.error('Logged error:', error, errorInfo);
      }}
      onReset={() => {
        // Reset state aplikacji
      }}
    >
      <MyComponent />
    </ErrorBoundary>
  );
}

Reset Error Boundary

import { ErrorBoundary, useErrorHandler } from 'react-error-boundary';

function MyComponent() {
  const [count, setCount] = useState(0);

  if (count === 5) {
    throw new Error('Count reached 5!');
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // Reset count kiedy użytkownik kliknie "Try again"
      }}
      resetKeys={['someKey']} // Reset gdy klucz się zmieni
    >
      <MyComponent />
    </ErrorBoundary>
  );
}

function UserProfile({ userId }: { userId: string }) {
  // Załaduj dane użytkownika
  const user = useUser(userId); // Może rzucić błąd
  
  return <div>{user.name}</div>;
}

function App() {
  const [userId, setUserId] = useState('1');
  
  return (
    <div>
      <select onChange={(e) => setUserId(e.target.value)}>
        <option value="1">User 1</option>
        <option value="2">User 2</option>
      </select>
      
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        resetKeys={[userId]} // ✨ Automatyczny reset gdy userId się zmieni!
      >
        <UserProfile userId={userId} />
      </ErrorBoundary>
    </div>
  );
}

// Scenariusz:
// 1. userId=1 → błąd → pokazuje fallback
// 2. Użytkownik wybiera userId=2 → resetKeys=[2] (zmiana!)
// 3. Error Boundary automatycznie resetuje i próbuje ponownie!
// 4. Może zadziała dla userId=2! 🎉

Nie owiewaj całej aplikacji w jeden Error Boundary – użyj wielu!

function App() {
  return (
    <div>
      {/* Globalna Error Boundary */}
      <ErrorBoundary fallback={<GlobalErrorFallback />}>
        
        <Header />
        
        {/* Error Boundary dla sidebar */}
        <ErrorBoundary fallback={<SidebarErrorFallback />}>
          <Sidebar />
        </ErrorBoundary>

        {/* Error Boundary dla głównej treści */}
        <ErrorBoundary fallback={<ContentErrorFallback />}>
          <MainContent />
        </ErrorBoundary>

        <Footer />
      </ErrorBoundary>
    </div>
  );
}

Zalety:

• Błąd w Sidebar nie crashuje MainContent
• Lepsze UX – użytkownik może kontynuować pracę
• Łatwiejsze debugowanie – wiesz gdzie błąd wystąpił

function ShopApp() {
  return (
    <ErrorBoundary fallback={<AppCrashedFallback />}>
      
      {/* Header zawsze działa */}
      <Header />
      
      {/* Koszyk - osobny boundary */}
      <ErrorBoundary fallback={<div>Koszyk chwilowo niedostępny</div>}>
        <ShoppingCart />
      </ErrorBoundary>
      
      {/* Filtry - osobny boundary */}
      <ErrorBoundary fallback={<div>Filtry niedostępne</div>}>
        <ProductFilters />
      </ErrorBoundary>
      
      {/* Lista produktów - osobny boundary */}
      <ErrorBoundary fallback={<div>Nie można załadować produktów</div>}>
        <ProductList />
      </ErrorBoundary>
      
      {/* Footer zawsze działa */}
      <Footer />
      
    </ErrorBoundary>
  );
}

// Scenariusz:
// ❌ ProductList ma błąd → pokazuje "Nie można załadować produktów"
// ✅ Koszyk działa! Możesz dokończyć zakupy z tym co już masz
// ✅ Filtry działają! Możesz spróbować inne filtry
// ✅ Header/Footer działają! Możesz przejść na inną stronę

Error Boundary NIE łapie błędów w async code:

function AsyncComponent() {
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        throw new Error('Async error'); // ❌ Error Boundary NIE złapie!
      });
  }, []);

  return <div>Content</div>;
}

Rozwiązanie: useErrorHandler

import { useErrorHandler } from 'react-error-boundary';

function AsyncComponent() {
  const handleError = useErrorHandler();

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        throw new Error('Async error');
      })
      .catch(handleError); // ✅ Przekaż błąd do Error Boundary
  }, [handleError]);

  return <div>Content</div>;
}

Lub własny hook

function useAsyncError() {
  const [, setError] = useState();
  
  return useCallback(
    (error: Error) => {
      setError(() => {
        throw error; // Rzuć błąd w komponencie
      });
    },
    [setError]
  );
}

// Użycie
function AsyncComponent() {
  const throwError = useAsyncError();

  useEffect(() => {
    fetch('/api/data')
      .catch(throwError); // Rzuci błąd, Error Boundary złapie
  }, [throwError]);

  return <div>Content</div>;
}

function UserData({ userId }: { userId: string }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const handleError = useErrorHandler();

  useEffect(() => {
    setLoading(true);
    
    fetch(`/api/users/${userId}`)
      .then(res => {
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}`);
        }
        return res.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setLoading(false);
        handleError(error); // ✅ Error Boundary złapie
      });
  }, [userId, handleError]);

  if (loading) return <div>Ładowanie...</div>;
  if (!data) return null;

  return <div>{data.name}</div>;
}

// Użycie z Error Boundary
<ErrorBoundary 
  FallbackComponent={({ error, resetErrorBoundary }) => (
    <div>
      <p>Nie udało się załadować danych użytkownika</p>
      <button onClick={resetErrorBoundary}>Spróbuj ponownie</button>
    </div>
  )}
>
  <UserData userId="123" />
</ErrorBoundary>

Sentry to najlepszy system monitoringu błędów dla aplikacji webowych.

npm install @sentry/react

Setup

// main.tsx
import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  environment: import.meta.env.MODE,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay()
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Sentry Error Boundary

import * as Sentry from '@sentry/react';

function App() {
  return (
    <Sentry.ErrorBoundary
      fallback={({ error, resetError }) => (
        <div>
          <h2>Wystąpił błąd</h2>
          <p>{error.message}</p>
          <button onClick={resetError}>Spróbuj ponownie</button>
        </div>
      )}
      showDialog // Pokazuje dialog do zgłoszenia błędu
    >
      <MyComponent />
    </Sentry.ErrorBoundary>
  );
}

Ręczne logowanie błędów

import * as Sentry from '@sentry/react';

function MyComponent() {
  async function handleSubmit() {
    try {
      await submitForm();
    } catch (error) {
      // Zaloguj do Sentry z dodatkowym kontekstem
      Sentry.captureException(error, {
        tags: {
          section: 'form-submission'
        },
        extra: {
          formData: { /* ... */ }
        }
      });
      
      // Pokaż error użytkownikowi
      toast.error('Form submission failed');
    }
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

tags: {
  section: 'checkout',    // Możesz filtrować: "pokaż błędy z checkout"
  userId: '123',          // Możesz filtrować: "pokaż błędy użytkownika 123"
  environment: 'prod'
}

extra: {
  formData: { name: 'John', email: 'test@test.com' },
  cartItems: [...],
  userPreferences: {...}
}

User context

import * as Sentry from '@sentry/react';

function App() {
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      Sentry.setUser({
        id: user.id,
        email: user.email,
        username: user.name
      });
    } else {
      Sentry.setUser(null);
    }
  }, [user]);

  return <AppContent />;
}

// sentry.ts
import * as Sentry from '@sentry/react';

export function initSentry() {
  if (import.meta.env.PROD) {
    Sentry.init({
      dsn: import.meta.env.VITE_SENTRY_DSN,
      environment: 'production',
      integrations: [
        new Sentry.BrowserTracing(),
        new Sentry.Replay({
          maskAllText: true,
          blockAllMedia: true,
        }),
      ],
      tracesSampleRate: 0.1, // 10% requestów
      replaysSessionSampleRate: 0.01, // 1% sesji
      replaysOnErrorSampleRate: 1.0, // 100% sesji z błędem
      
      beforeSend(event, hint) {
        // Nie wysyłaj błędów z development
        if (event.environment === 'development') {
          return null;
        }
        
        // Filtruj wrażliwe dane
        if (event.request?.headers) {
          delete event.request.headers['Authorization'];
        }
        
        return event;
      },
    });
  }
}

// main.tsx
import { initSentry } from './sentry';

initSentry();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Error Boundaries NIE łapią błędów w event handlers:

function ButtonWithError() {
  function handleClick() {
    throw new Error('Error in handler'); // ❌ Error Boundary NIE złapie!
  }

  return <button onClick={handleClick}>Click</button>;
}

Rozwiązanie: try-catch + state

function SafeButton() {
  const [error, setError] = useState<Error | null>(null);

  function handleClick() {
    try {
      // Kod który może rzucić błąd
      throw new Error('Something went wrong');
    } catch (err) {
      setError(err instanceof Error ? err : new Error('Unknown error'));
      
      // Opcjonalnie zaloguj do Sentry
      Sentry.captureException(err);
    }
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <button onClick={handleClick}>Click</button>;
}

Lub wyższy poziom – wrapper

// ❌ Powtarzalny kod
const handleClick = () => {
  try { doSomething(); } catch (e) { console.error(e); }
};
const handleSubmit = () => {
  try { submitForm(); } catch (e) { console.error(e); }
};

// ✅ Wrapper - pisz raz, używaj wszędzie
const handleClick = withErrorHandling(() => doSomething());
const handleSubmit = withErrorHandling(() => submitForm());

function withErrorHandling<T extends (...args: any[]) => any>(fn: T) {
  return ((...args: Parameters<T>) => {
    try {
      return fn(...args);
    } catch (error) {
      console.error('Error in handler:', error);
      Sentry.captureException(error);
      toast.error('Operacja nie powiodła się');
    }
  }) as T;
}

// Użycie
function MyComponent() {
  const handleClick = withErrorHandling(() => {
    throw new Error('Boom!');
  });

  return <button onClick={handleClick}>Click</button>;
}

// useErrorHandler.ts
function useErrorHandler() {
  const [error, setError] = useState<Error | null>(null);

  const handleError = useCallback((error: Error) => {
    setError(error);
    Sentry.captureException(error);
    toast.error(error.message || 'Wystąpił błąd');
  }, []);

  const clearError = useCallback(() => {
    setError(null);
  }, []);

  return { error, handleError, clearError };
}

// Użycie
function MyForm() {
  const { error, handleError, clearError } = useErrorHandler();

  const handleSubmit = async (data: FormData) => {
    try {
      clearError();
      await submitForm(data);
      toast.success('Zapisano!');
    } catch (err) {
      handleError(err as Error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && (
        <div className="error-banner">
          {error.message}
          <button onClick={clearError}>×</button>
        </div>
      )}
      {/* formularz */}
    </form>
  );
}

Loading Skeleton na błąd

function ErrorFallback({ error, resetErrorBoundary }: any) {
  return (
    <div className="error-container">
      <div className="error-icon">⚠️</div>
      <h2>Nie udało się załadować treści</h2>
      <p className="error-message">{error.message}</p>
      <div className="error-actions">
        <button onClick={resetErrorBoundary} className="retry-button">
          Spróbuj ponownie
        </button>
        <button onClick={() => window.location.href = '/'} className="home-button">
          Wróć do strony głównej
        </button>
      </div>
    </div>
  );
}

Degradowany UI

function UserProfile({ userId }: { userId: number }) {
  return (
    <ErrorBoundary
      fallback={
        <div className="user-profile-error">
          <div className="avatar-placeholder" />
          <p>Nie udało się załadować profilu</p>
        </div>
      }
    >
      <UserProfileContent userId={userId} />
    </ErrorBoundary>
  );
}

Różne fallback dla różnych błędów

interface CustomErrorBoundaryProps {
  children: ReactNode;
}

function CustomErrorBoundary({ children }: CustomErrorBoundaryProps) {
  return (
    <ErrorBoundary
      fallbackRender={({ error }) => {
        // Network error
        if (error.message.includes('fetch')) {
          return <NetworkErrorFallback />;
        }

        // Authorization error
        if (error.message.includes('401')) {
          return <UnauthorizedFallback />;
        }

        // Not found
        if (error.message.includes('404')) {
          return <NotFoundFallback />;
        }

        // Generic error
        return <GenericErrorFallback error={error} />;
      }}
    >
      {children}
    </ErrorBoundary>
  );
}

function NetworkErrorFallback() {
  return (
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <div style={{ fontSize: '48px' }}>📡</div>
      <h2>Brak połączenia z internetem</h2>
      <p>Sprawdź swoje połączenie i spróbuj ponownie</p>
      <button onClick={() => window.location.reload()}>
        Odśwież stronę
      </button>
    </div>
  );
}

function UnauthorizedFallback() {
  const navigate = useNavigate();
  
  return (
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <div style={{ fontSize: '48px' }}>🔒</div>
      <h2>Sesja wygasła</h2>
      <p>Zaloguj się ponownie aby kontynuować</p>
      <button onClick={() => navigate('/login')}>
        Przejdź do logowania
      </button>
    </div>
  );
}

function NotFoundFallback() {
  return (
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <div style={{ fontSize: '48px' }}>🔍</div>
      <h2>Nie znaleziono strony</h2>
      <p>Strona której szukasz nie istnieje lub została przeniesiona</p>
      <button onClick={() => window.location.href = '/'}>
        Wróć do strony głównej
      </button>
    </div>
  );
}

Window error handler

// main.tsx
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  Sentry.captureException(event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  Sentry.captureException(event.reason);
});

Axios interceptor

// api/client.ts
import axios from 'axios';
import * as Sentry from '@sentry/react';

const apiClient = axios.create({
  baseURL: '/api'
});

apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    // Zaloguj błąd API
    Sentry.captureException(error, {
      tags: {
        type: 'api-error',
        status: error.response?.status
      },
      extra: {
        url: error.config?.url,
        method: error.config?.method
      }
    });

    // Pokaż toast
    if (error.response?.status === 500) {
      toast.error('Błąd serwera. Spróbuj ponownie później.');
    }

    return Promise.reject(error);
  }
);

import axios from 'axios';
import { toast } from 'react-hot-toast';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
});

// Request interceptor (przed wysłaniem)
api.interceptors.request.use(
  (config) => {
    // Dodaj token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor (po otrzymaniu odpowiedzi)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    const status = error.response?.status;
    
    // 401 - Unauthorized
    if (status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
      toast.error('Sesja wygasła. Zaloguj się ponownie.');
    }
    
    // 403 - Forbidden
    if (status === 403) {
      toast.error('Nie masz uprawnień do tej operacji');
    }
    
    // 404 - Not Found
    if (status === 404) {
      toast.error('Zasób nie został znaleziony');
    }
    
    // 500 - Server Error
    if (status === 500) {
      Sentry.captureException(error);
      toast.error('Błąd serwera. Spróbuj później.');
    }
    
    // Network Error
    if (!error.response) {
      toast.error('Brak połączenia z serwerem');
    }
    
    return Promise.reject(error);
  }
);

export default api;

// ErrorBoundary.tsx
import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
import * as Sentry from '@sentry/react';
import { ReactNode } from 'react';

interface ErrorFallbackProps {
  error: Error;
  resetErrorBoundary: () => void;
}

function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
  return (
    <div className="error-fallback">
      <div className="error-content">
        <h2>Ups! Coś poszło nie tak</h2>
        <p className="error-message">
          Przepraszamy za niedogodności. Nasz zespół został powiadomiony o problemie.
        </p>
        
        {import.meta.env.DEV && (
          <details className="error-details">
            <summary>Szczegóły błędu (widoczne tylko w development)</summary>
            <pre>{error.message}</pre>
            <pre>{error.stack}</pre>
          </details>
        )}

        <div className="error-actions">
          <button onClick={resetErrorBoundary} className="btn-primary">
            Spróbuj ponownie
          </button>
          <button 
            onClick={() => window.location.href = '/'} 
            className="btn-secondary"
          >
            Wróć do strony głównej
          </button>
        </div>
      </div>
    </div>
  );
}

interface AppErrorBoundaryProps {
  children: ReactNode;
}

export function AppErrorBoundary({ children }: AppErrorBoundaryProps) {
  return (
    <ReactErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={(error, errorInfo) => {
        // Zaloguj do Sentry tylko w production
        if (import.meta.env.PROD) {
          Sentry.captureException(error, {
            contexts: {
              react: {
                componentStack: errorInfo.componentStack
              }
            }
          });
        } else {
          console.error('Error caught:', error, errorInfo);
        }
      }}
      onReset={() => {
        // Reset state aplikacji jeśli potrzeba
        window.location.reload();
      }}
    >
      {children}
    </ReactErrorBoundary>
  );
}

// App.tsx
function App() {
  return (
    <AppErrorBoundary>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          
          <Route 
            path="/dashboard" 
            element={
              <AppErrorBoundary>
                <Dashboard />
              </AppErrorBoundary>
            } 
          />
          
          <Route 
            path="/profile" 
            element={
              <AppErrorBoundary>
                <Profile />
              </AppErrorBoundary>
            } 
          />
        </Routes>
      </Router>
    </AppErrorBoundary>
  );
}

// ErrorBoundary.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, test, expect, vi } from 'vitest';
import { ErrorBoundary } from 'react-error-boundary';

function ThrowError({ shouldThrow }: { shouldThrow: boolean }) {
  if (shouldThrow) {
    throw new Error('Test error');
  }
  return <div>No error</div>;
}

describe('ErrorBoundary', () => {
  test('renders children when no error', () => {
    render(
      <ErrorBoundary fallback={<div>Error occurred</div>}>
        <ThrowError shouldThrow={false} />
      </ErrorBoundary>
    );

    expect(screen.getByText('No error')).toBeInTheDocument();
  });

  test('renders fallback when error occurs', () => {
    // Suppress console.error dla tego testu
    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});

    render(
      <ErrorBoundary fallback={<div>Error occurred</div>}>
        <ThrowError shouldThrow={true} />
      </ErrorBoundary>
    );

    expect(screen.getByText('Error occurred')).toBeInTheDocument();
    
    spy.mockRestore();
  });

  test('calls onError when error occurs', () => {
    const onError = vi.fn();
    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});

    render(
      <ErrorBoundary fallback={<div>Error</div>} onError={onError}>
        <ThrowError shouldThrow={true} />
      </ErrorBoundary>
    );

    expect(onError).toHaveBeenCalled();
    
    spy.mockRestore();
  });
});

const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
// ... test ...
spy.mockRestore();

1. Używaj wielu Error Boundaries

// ✅ Granularne boundaries
<ErrorBoundary>
  <Header />
  <ErrorBoundary>
    <Sidebar />
  </ErrorBoundary>
  <ErrorBoundary>
    <MainContent />
  </ErrorBoundary>
</ErrorBoundary>

// ❌ Jeden boundary dla wszystkiego
<ErrorBoundary>
  <WholeApp />
</ErrorBoundary>

2. Loguj błędy do monitoringu

// ✅ Zawsze loguj w production
onError={(error) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(error);
  }
}}

3. Przyjazny fallback UI

// ❌ Techniczny komunikat
<div>Error: {error.stack}</div>

// ✅ User-friendly message
<div>
  <h2>Coś poszło nie tak</h2>
  <p>Przepraszamy za niedogodności. Spróbuj odświeżyć stronę.</p>
</div>

4. Obsługuj async errors

// ✅ Używaj useErrorHandler dla async
const handleError = useErrorHandler();

fetch('/api/data')
  .catch(handleError);

5. Reset możliwości

// ✅ Daj użytkownikowi sposób na reset
<ErrorBoundary
  onReset={() => {
    // Reset state
  }}
  resetKeys={[userId]} // Auto-reset gdy się zmieni
>

To był ważny wpis o odporności aplikacji! Nauczyliśmy się:

• ✅ Problem – co się dzieje gdy błąd wystąpi
• ✅ Error Boundaries – jak łapać błędy w React
• ✅ Class vs biblioteka – własny Error Boundary vs react-error-boundary
• ✅ Granularne boundaries – wiele Error Boundaries w aplikacji
• ✅ Async errors – useErrorHandler dla Promise/fetch
• ✅ Sentry – integracja z systemem monitoringu
• ✅ Event handlers – obsługa błędów w onClick itp.
• ✅ Fallback UI – różne wzorce UI dla błędów
• ✅ Globalne handling – window.onerror, axios interceptors
• ✅ Kompletny przykład – AppErrorBoundary gotowy do użycia
• ✅ Testowanie – jak testować Error Boundaries
• ✅ 5 Best Practices – profesjonalne wzorce

Obsługa błędów to nie opcja – to konieczność w produkcyjnych aplikacjach. Teraz masz kompletną wiedzę by zbudować odporną aplikację!

W kolejnym wpisie poznamy komunikację z API – Axios vs Fetch, interceptory, error handling, upload plików!

Zadanie dla Ciebie

Dodaj Error Boundaries do swojej aplikacji:

1. Globalny Error Boundary dla całej aplikacji
2. Granularne boundaries dla głównych sekcji
3. Integracja z Sentry (lub innym monitoringiem)
4. Custom error fallback UI
5. Obsługa async errors
6. (Bonus) Testy Error Boundaries