tilbudgivern/frontend/src/ErrorBoundary.js

import React from 'react';
import { logReactError } from './utils/errorLogger';

/**
 * React Error Boundary
 * Fanger alle React fejl og logger dem automatisk
 * 
 * Brug:
 * <ErrorBoundary>
 *   <YourApp />
 * </ErrorBoundary>
 */
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) {
    // Log fejlen til backend
    logReactError(error, errorInfo);
    
    // Log til console også
    console.error('React Error Boundary caught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          padding: '20px',
          textAlign: 'center',
          fontFamily: 'Arial, sans-serif'
        }}>
          <h1>Der opstod en fejl</h1>
          <p>Beklager, noget gik galt. Siden genindlæses om få sekunder...</p>
          <p style={{ fontSize: '12px', color: '#666' }}>
            Fejlen er blevet rapporteret automatisk.
          </p>
          <button 
            onClick={() => window.location.reload()}
            style={{
              marginTop: '20px',
              padding: '10px 20px',
              fontSize: '16px',
              cursor: 'pointer'
            }}
          >
            Genindlæs siden
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;