Відмовостійкість: Error Boundaries, межі Suspense та каскади завантаження

'use client';

import * as React from 'react';

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

export interface ErrorBoundaryProps {
  /** Запасний компонент, що приймає об'єкт помилки та колбек скидання */
  fallbackRender?: (props: FallbackProps) => React.ReactNode;
  /** Запасний ReactNode (якщо не потрібна логіка скидання) */
  fallback?: React.ReactNode;
  /** Колбек для відправлення в систему моніторингу */
  onError?: (error: Error, info: React.ErrorInfo) => void;
  /** Масив залежностей (наприклад, ID сторінки або query-параметри), при зміні яких помилка скидається */
  resetKeys?: Array<unknown>;
  /** Дочірні елементи */
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  error: Error | null;
}

const initialState: ErrorBoundaryState = { error: null };

export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  public override state: ErrorBoundaryState = initialState;

  public static getDerivedStateFromError(error: unknown): ErrorBoundaryState {
    const normalizedError = error instanceof Error ? error : new Error(String(error));
    return { error: normalizedError };
  }

  public override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    // Виклик користувацького обробника телеметрії (Sentry / Datadog)
    this.props.onError?.(error, errorInfo);
  }

  public override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
    const { error } = this.state;
    const { resetKeys } = this.props;

    // Автоматичне скидання помилки при зміні ключів resetKeys
    if (error !== null && resetKeys && prevProps.resetKeys) {
      const hasKeysChanged = resetKeys.some(
        (key, index) => !Object.is(key, prevProps.resetKeys?.[index])
      );

      if (hasKeysChanged) {
        this.reset();
      }
    }
  }

  public reset = (): void => {
    this.setState(initialState);
  };

  public override render(): React.ReactNode {
    const { error } = this.state;
    const { fallbackRender, fallback, children } = this.props;

    if (error !== null) {
      if (typeof fallbackRender === 'function') {
        return fallbackRender({
          error,
          resetErrorBoundary: this.reset,
        });
      }

      if (fallback !== undefined) {
        return fallback;
      }

      // Дефолтний запасний інтерфейс
      return (
        <div role="alert" className="p-4 rounded-xl bg-red-950/30 border border-red-900/50 text-red-200 text-sm">
          <p className="font-semibold mb-1">Стався збій компонента</p>
          <p className="text-xs text-red-400 font-mono mb-3">{error.message}</p>
          <button
            type="button"
            onClick={this.reset}
            className="px-3 py-1.5 bg-red-800/60 hover:bg-red-700/60 rounded text-xs font-medium transition-colors cursor-pointer"
          >
            Повторити спробу
          </button>
        </div>
      );
    }

    return children;
  }
}

'use client';

import * as React from 'react';
import { ErrorBoundary, FallbackProps } from './ErrorBoundary';

export interface AsyncBoundaryProps {
  /** Запасний компонент при помилці */
  errorFallback?: (props: FallbackProps) => React.ReactNode;
  /** Запасний інтерфейс очікування (Скелетон) */
  loadingFallback: React.ReactNode;
  /** Ключі автоматичного скидання помилки */
  resetKeys?: Array<unknown>;
  /** Колбек логування */
  onError?: (error: Error, info: React.ErrorInfo) => void;
  children: React.ReactNode;
}

/**
 * AsyncBoundary: Єдина межа ізоляції асинхронного стану та відмовостійкості
 */
export function AsyncBoundary({
  errorFallback,
  loadingFallback,
  resetKeys,
  onError,
  children,
}: AsyncBoundaryProps) {
  return (
    <ErrorBoundary
      fallbackRender={errorFallback}
      resetKeys={resetKeys}
      onError={onError}
    >
      <React.Suspense fallback={loadingFallback}>
        {children}
      </React.Suspense>
    </ErrorBoundary>
  );
}