grafana/public/app/features/plugins/components/PluginErrorBoundary.tsx

import * as React from 'react';

import { PluginContext } from '@grafana/data';

interface PluginErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ComponentType<{ error: Error | null; errorInfo: React.ErrorInfo | null }>;
  onError?: (error: Error, info: React.ErrorInfo) => void;
}

interface PluginErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

export class PluginErrorBoundary extends React.Component<PluginErrorBoundaryProps, PluginErrorBoundaryState> {
  static contextType = PluginContext;

  declare context: React.ContextType<typeof PluginContext>;

  constructor(props: PluginErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error: Error): PluginErrorBoundaryState {
    return { hasError: true, error: error, errorInfo: null };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    if (this.props.onError) {
      this.props.onError(error, info);
    } else {
      console.error(`Plugin "${this.context?.meta.id}" failed to load:`, error, info);
    }

    this.setState({ error, errorInfo: info });
  }

  render() {
    const Fallback = this.props.fallback;
    if (this.state.hasError) {
      return Fallback ? <Fallback error={this.state.error} errorInfo={this.state.errorInfo} /> : null;
    }

    return this.props.children;
  }
}