Error Boundary

Изоляция ошибок пользовательского интерфейса и обеспечение стабильности приложения.

Стандарты изоляции ошибок

Принципы: Изоляция сбоев позволяет приложению продолжать работу даже при падении отдельного виджета или фичи.

Иерархическое дерево надежности

Когда использовать

Изоляция падений:
Виджеты, внешние компоненты, сложные UI-блоки, Lazy-loaded компоненты и интеграции (чаты, карты).
Границы слоев:
Page-level (вся страница) и Feature-level (отдельный блок: корзина, чат, аналитика).
Динамический код:
Когда код может быть нестабилен или подключается сторонний модуль.

01Реализация ErrorBoundary

Базовый класс для перехвата ошибок:

shared/ui/error-boundary/error-boundary.tsx

"use client";

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

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

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

export class ErrorBoundary 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) {
    console.error("ErrorBoundary caught an error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <div className="p-4 rounded-lg flex flex-col items-start gap-2 border border-destructive/50 bg-destructive/10 text-destructive font-mono text-sm max-w-full overflow-x-auto">
            <span className="font-bold flex items-center gap-2">
              ⚠️ An error occurred while rendering this component.
            </span>
            <details className="mt-2 w-full">
              <summary className="cursor-pointer font-semibold opacity-80 hover:opacity-100">
                {this.state.error?.message || "Error"}
              </summary>
              <pre className="mt-2 text-xs opacity-70 whitespace-pre-wrap">
                {this.state.error?.stack}
              </pre>
            </details>
          </div>
        )
      );
    }

    return this.props.children;
  }
}

02Реализация withErrorBoundary

HOC для оборачивания компонентов:

shared/ui/error-boundary/with-error-boundary.tsx

import React, { ComponentType } from "react";
import { ErrorBoundary } from "./error-boundary";

export function withErrorBoundary<P extends object>(
  Component: ComponentType<P>,
  fallback?: React.ReactNode
) {
  return function WithErrorBoundary(props: P) {
    return (
      <ErrorBoundary fallback={fallback}>
        <Component {...props} />
      </ErrorBoundary>
    );
  };
}

03Пример использования HOC

Практический пример изоляции фичи с помощью withErrorBoundary. Обратите внимание на то, как HOC предотвращает "белый экран" при ошибках в нестабильной логике рендеринга дочерних компонентов.

HOC Usage Example

import { withErrorBoundary } from "@/shared/ui";

function UserProfileWidget({ userId }: { userId: string }) {
  const { data, isLoading } = useGetUserProfileQuery(userId);

  if (isLoading) return <SkeletonProfile />;
  
  const formattedStats = data.stats.map(stat => ({
      ...stat,
      value: (stat.raw / stat.total) * 100
  }));

  return (
    <div className="flex flex-col gap-4">
      <UserProfileAvatar user={data.user} />
      <UserProfileStats stats={formattedStats} />
    </div>
  );
}

export const UserProfile = withErrorBoundary(UserProfileWidget, <UserProfileErrorUI />);