حدود الأخطاء و Suspense

// src/components/ErrorBoundary.jsx
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  // يُستدعى عند طرح خطأ أثناء العرض
  static getDerivedStateFromError(error) {
    // تحديث الحالة بحيث يعرض العرض التالي واجهة المستخدم الاحتياطية
    return { hasError: true };
  }

  // يُستدعى بعد طرح خطأ
  componentDidCatch(error, errorInfo) {
    // تسجيل الخطأ في خدمة الإبلاغ عن الأخطاء
    console.error('خطأ تم التقاطه بواسطة الحد:', error, errorInfo);

    // يمكنك التسجيل في خدمات مثل Sentry، LogRocket، إلخ.
    // logErrorToService(error, errorInfo);

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

  resetError = () => {
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null
    });
  };

  render() {
    if (this.state.hasError) {
      // واجهة المستخدم الاحتياطية
      return (
        <div style={{
          padding: '2rem',
          backgroundColor: '#fee',
          border: '1px solid #fcc',
          borderRadius: '0.5rem'
        }}>
          <h2>حدث خطأ ما</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            <summary>تفاصيل الخطأ</summary>
            <p>{this.state.error && this.state.error.toString()}</p>
            <p>{this.state.errorInfo && this.state.errorInfo.componentStack}</p>
          </details>
          <button onClick={this.resetError}>حاول مرة أخرى</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

import ErrorBoundary from './components/ErrorBoundary';
import UserProfile from './components/UserProfile';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <div>
      <h1>تطبيقي</h1>

      {/* تغليف المكونات الفردية */}
      <ErrorBoundary>
        <UserProfile userId={123} />
      </ErrorBoundary>

      {/* أو تغليف أقسام كاملة */}
      <ErrorBoundary>
        <Dashboard>
          <Stats />
          <Charts />
          <RecentActivity />
        </Dashboard>
      </ErrorBoundary>
    </div>
  );
}

// مكون قد يطرح خطأ
function BuggyComponent({ user }) {
  if (!user) {
    throw new Error('المستخدم مطلوب!');
  }

  return <div>{user.name}</div>;
}

import React from 'react';

class ProductionErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
      eventId: null
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // التسجيل في خدمة خارجية في الإنتاج
    if (process.env.NODE_ENV === 'production') {
      // مثال: تكامل Sentry
      // const eventId = Sentry.captureException(error, {
      //   contexts: { react: { componentStack: errorInfo.componentStack } }
      // });
      // this.setState({ eventId });

      // أو خدمة التسجيل المخصصة الخاصة بك
      fetch('/api/log-error', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          error: error.toString(),
          componentStack: errorInfo.componentStack,
          timestamp: new Date().toISOString(),
          userAgent: navigator.userAgent,
          url: window.location.href
        })
      });
    }

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

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-container">
          <h2>عفوًا! حدث خطأ ما</h2>
          <p>تم إخطارنا ونحن نعمل على حل المشكلة.</p>

          {process.env.NODE_ENV === 'development' && (
            <details>
              <summary>تفاصيل الخطأ (التطوير فقط)</summary>
              <pre>{this.state.error.toString()}</pre>
              <pre>{this.state.errorInfo.componentStack}</pre>
            </details>
          )}

          <button onClick={() => window.location.reload()}>
            إعادة تحميل الصفحة
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

import { Suspense, lazy } from 'react';

// تحميل المكونات كسولًا
const HeavyComponent = lazy(() => import('./components/HeavyComponent'));
const Dashboard = lazy(() => import('./components/Dashboard'));
const UserProfile = lazy(() => import('./components/UserProfile'));

function App() {
  return (
    <div>
      {/* Suspense أساسي مع احتياطي تحميل */}
      <Suspense fallback={<div>جاري التحميل...</div>}>
        <HeavyComponent />
      </Suspense>

      {/* مكونات متعددة في Suspense واحد */}
      <Suspense fallback={<LoadingSpinner />}>
        <Dashboard />
        <UserProfile userId={123} />
      </Suspense>

      {/* حدود Suspense المتداخلة */}
      <Suspense fallback={<div>جاري تحميل الصفحة...</div>}>
        <MainLayout>
          <Suspense fallback={<div>جاري تحميل الشريط الجانبي...</div>}>
            <Sidebar />
          </Suspense>
          <Suspense fallback={<div>جاري تحميل المحتوى...</div>}>
            <Content />
          </Suspense>
        </MainLayout>
      </Suspense>
    </div>
  );
}

// مكون تحميل مخصص
function LoadingSpinner() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '200px'
    }}>
      <div className="spinner">جاري التحميل...</div>
    </div>
  );
}

import { Suspense, lazy } from 'react';
import ErrorBoundary from './components/ErrorBoundary';

const AsyncComponent = lazy(() => import('./components/AsyncComponent'));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingFallback />}>
        <AsyncComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

// أفضل: فصل حالات التحميل والأخطاء
function RobustAsyncLoader({ children }) {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <Suspense fallback={<LoadingFallback />}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
}

// الاستخدام
function Dashboard() {
  return (
    <div>
      <h1>لوحة التحكم</h1>

      <RobustAsyncLoader>
        <AsyncCharts />
      </RobustAsyncLoader>

      <RobustAsyncLoader>
        <AsyncUserList />
      </RobustAsyncLoader>
    </div>
  );
}

// مكون هيكلي لحالة التحميل
function UserCardSkeleton() {
  return (
    <div className="user-card skeleton">
      <div className="skeleton-avatar"></div>
      <div className="skeleton-text"></div>
      <div className="skeleton-text short"></div>
    </div>
  );
}

/* CSS الهيكلي */
.skeleton {
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e0e0e0;
}

.skeleton-text {
  height: 16px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 8px 0;
}

.skeleton-text.short {
  width: 60%;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// الاستخدام مع Suspense
function UserList() {
  return (
    <Suspense fallback={
      <div>
        <UserCardSkeleton />
        <UserCardSkeleton />
        <UserCardSkeleton />
      </div>
    }>
      <AsyncUserList />
    </Suspense>
  );
}

import React from 'react';

class SmartErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      retryCount: 0
    };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error('خطأ:', error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      error: null,
      retryCount: prevState.retryCount + 1
    }));
  };

  handleReload = () => {
    window.location.reload();
  };

  handleGoHome = () => {
    window.location.href = '/';
  };

  render() {
    if (this.state.hasError) {
      const { error, retryCount } = this.state;
      const isNetworkError = error.message.includes('network') ||
                             error.message.includes('fetch');

      return (
        <div className="error-recovery">
          <h2>حدث خطأ ما</h2>

          {isNetworkError && (
            <>
              <p>تم اكتشاف مشكلة في اتصال الشبكة.</p>
              <button onClick={this.handleRetry}>
                إعادة المحاولة ({3 - retryCount} محاولات متبقية)
              </button>
            </>
          )}

          {!isNetworkError && (
            <>
              <p>حدث خطأ غير متوقع.</p>
              <button onClick={this.handleReload}>إعادة تحميل الصفحة</button>
              <button onClick={this.handleGoHome}>العودة إلى الرئيسية</button>
            </>
          )}

          {retryCount >= 3 && (
            <p>
              إذا استمرت المشكلة، يرجى الاتصال بالدعم.
            </p>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

import { Suspense, useState, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleSearch = (e) => {
    const value = e.target.value;

    // وضع علامة على تحديث الحالة كغير عاجل
    startTransition(() => {
      setQuery(value);
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="بحث..."
        onChange={handleSearch}
        style={{ opacity: isPending ? 0.5 : 1 }}
      />

      <Suspense fallback={<div>جاري البحث...</div>}>
        <ResultsList query={query} />
      </Suspense>
    </div>
  );
}