Frontend Observability, Real User Monitoring (RUM) & Telemetry

import React, { Component, ErrorInfo, ReactNode } from 'react';

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

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

export class GlobalErrorBoundary extends Component<Props, State> {
  public state: State = { hasError: false, error: null };

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

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    const payload = JSON.stringify({
      module: this.props.moduleName,
      message: error.message,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
      url: window.location.href,
      timestamp: Date.now(),
    });

    // Use sendBeacon for reliable, non-blocking telemetry transmission
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/telemetry/errors', payload);
    } else {
      fetch('/api/telemetry/errors', {
        method: 'POST',
        body: payload,
        keepalive: true,
        headers: { 'Content-Type': 'application/json' },
      });
    }
  }

  public render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-red-400">
          <h3 className="font-bold">Something went wrong in {this.props.moduleName}</h3>
          <p className="text-xs mt-1">Our engineering team has been automatically notified.</p>
        </div>
      );
    }
    return this.props.children;
  }
}