ما هي مدة دبلومة تطوير الويب؟

مدة الدبلومة 6 أشهر مقسمة على 3 مراحل: أساسيات البرمجة (شهرين)، تطوير الواجهات الأمامية (شهرين)، تطوير الواجهات الخلفية (شهرين).

هل توجد ضمان توظيف بعد التخرج؟

نعم، نقدم ضمان توظيف 100% للطلاب المتميزين مع متابعة شخصية ومساعدة في إعداد السيرة الذاتية ومقابلات العمل.

ما هي الشهادة المعتمدة التي أحصل عليها؟

تحصل على شهادة معتمدة من وزارة الخارجية المصرية بالإضافة إلى شهادة من أكاديمية Syntax Room مع إمكانية الحصول على شهادات دولية.

كيفية التعامل مع الأخطاء في الكود الخاص بك | Syntax Room

كيفية التعامل مع الأخطاء في الكود الخاص بك

الأخطاء جزء لا مفر منه في البرمجة. تعلم كيفية التعامل معها بشكل صحيح يجعل كودك أكثر قوة وموثوقية. هذا الدليل الشامل سيساعدك على فهم وإتقان معالجة الأخطاء.

ما هي معالجة الأخطاء؟

معالجة الأخطاء (Error Handling) هي عملية توقع الأخطاء المحتملة والتعامل معها بطريقة مناسبة. بدلاً من ترك البرنامج يتوقف، نتعامل مع الأخطاء ونقدم حلول بديلة.

مثال على معالجة الأخطاء:

try {
  // كود قد يسبب خطأ
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  // التعامل مع الخطأ
  console.log('حدث خطأ:', error.message);
}

لماذا معالجة الأخطاء مهمة؟

🛡️ حماية البرنامج

منع توقف البرنامج المفاجئ

👤 تجربة المستخدم

رسائل خطأ واضحة ومفيدة

🐛 سهولة التصحيح

معلومات مفيدة لتشخيص المشاكل

⚡ الموثوقية

برامج أكثر استقراراً

أنواع الأخطاء:

❌ Syntax Errors

أخطاء في بناء الجملة

// خطأ في بناء الجملة
if (condition {  // ❌ ناقص قوس
  console.log('Hello');
}

🔍 Runtime Errors

أخطاء أثناء التشغيل

// خطأ في التشغيل
const arr = [1, 2, 3];
console.log(arr[10]); // ❌ فهرس غير موجود

🔗 Logic Errors

أخطاء في المنطق

// خطأ في المنطق
function calculateAge(birthYear) {
  return 2024 - birthYear; // ❌ يجب أن يكون السنة الحالية

try...catch في JavaScript:

البنية الأساسية:

try {
  // الكود الذي قد يسبب خطأ
  riskyCode();
} catch (error) {
  // التعامل مع الخطأ
  console.error('حدث خطأ:', error.message);
} finally {
  // الكود الذي ينفذ دائماً
  cleanup();
}

مثال عملي:

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error('لا يمكن القسمة على صفر');
    }
    return a / b;
  } catch (error) {
    console.error('خطأ في القسمة:', error.message);
    return null;
  }
}

// استخدام الدالة
const result = divide(10, 0);
if (result !== null) {
  console.log('النتيجة:', result);
} else {
  console.log('فشل في الحساب');
}

معالجة الأخطاء في APIs:

معالجة أخطاء Fetch:

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('خطأ في جلب البيانات:', error.message);

    // إرجاع بيانات افتراضية
    return {
      id: userId,
      name: 'مستخدم غير معروف',
      error: true
    };
  }
}

معالجة أخطاء الشبكة:

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (response.ok) {
        return await response.json();
      }
      throw new Error(`HTTP ${response.status}`);
    } catch (error) {
      console.log(`محاولة ${i + 1} فشلت:`, error.message);

      if (i === maxRetries - 1) {
        throw new Error('فشل في جلب البيانات بعد عدة محاولات');
      }

      // انتظار قبل المحاولة التالية
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

معالجة الأخطاء في React:

Error Boundaries:

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

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

  componentDidCatch(error, errorInfo) {
    console.error('خطأ في المكون:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>حدث خطأ غير متوقع</h2>
          <p>نعتذر، حدث خطأ في تحميل الصفحة</p>
          <button onClick={() => window.location.reload()}>
            إعادة تحميل الصفحة
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

معالجة الأخطاء في Hooks:

function useApiData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        setError(null);

        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }

        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
        console.error('خطأ في جلب البيانات:', err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

أنواع الأخطاء المخصصة:

إنشاء أخطاء مخصصة:

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

class NetworkError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.name = 'NetworkError';
    this.statusCode = statusCode;
  }
}

// استخدام الأخطاء المخصصة
function validateUser(user) {
  if (!user.name) {
    throw new ValidationError('الاسم مطلوب', 'name');
  }
  if (!user.email) {
    throw new ValidationError('البريد الإلكتروني مطلوب', 'email');
  }
  if (!user.email.includes('@')) {
    throw new ValidationError('البريد الإلكتروني غير صحيح', 'email');
  }
}

معالجة الأخطاء المخصصة:

function handleUserSubmission(userData) {
  try {
    validateUser(userData);
    // معالجة البيانات الصحيحة
    processUser(userData);
  } catch (error) {
    if (error instanceof ValidationError) {
      console.error(`خطأ في التحقق: ${error.message} في الحقل ${error.field}`);
      showFieldError(error.field, error.message);
    } else if (error instanceof NetworkError) {
      console.error(`خطأ في الشبكة: ${error.message} (كود: ${error.statusCode})`);
      showNetworkError(error.message);
    } else {
      console.error('خطأ غير متوقع:', error.message);
      showGenericError();
    }
  }
}

أفضل الممارسات:

🎯 توقع الأخطاء:

توقع الأخطاء المحتملة
تحقق من صحة البيانات
استخدم التحقق من الأنواع
اختبر الحالات الاستثنائية

📝 رسائل الخطأ:

اكتب رسائل واضحة ومفيدة
تجنب الرسائل التقنية للمستخدمين
قدم حلول أو خطوات للتصحيح
استخدم اللغة المناسبة

🔧 التصحيح:

سجل الأخطاء للتصحيح
استخدم console.error للتفاصيل
احتفظ بسجل الأخطاء
راقب الأخطاء في الإنتاج

أدوات مفيدة:

🔍 Browser DevTools

فحص الأخطاء في المتصفح

📊 Error Tracking

Sentry, LogRocket, Bugsnag

🧪 Testing

Jest, Mocha للاختبار

📝 Logging

Winston, Log4js للتسجيل

مثال تطبيقي:

نظام معالجة الأخطاء كامل:

class ErrorHandler {
  static handle(error, context = '') {
    const errorInfo = {
      message: error.message,
      stack: error.stack,
      context: context,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    };

    // تسجيل الخطأ
    console.error('خطأ:', errorInfo);

    // إرسال للخادم (في الإنتاج)
    if (process.env.NODE_ENV === 'production') {
      this.sendToServer(errorInfo);
    }

    // عرض للمستخدم
    this.showUserMessage(error);
  }

  static showUserMessage(error) {
    let userMessage = 'حدث خطأ غير متوقع';

    if (error.name === 'ValidationError') {
      userMessage = 'يرجى التحقق من البيانات المدخلة';
    } else if (error.name === 'NetworkError') {
      userMessage = 'مشكلة في الاتصال بالإنترنت';
    } else if (error.name === 'TimeoutError') {
      userMessage = 'انتهت مهلة الطلب، يرجى المحاولة مرة أخرى';
    }

    // عرض الرسالة للمستخدم
    this.displayNotification(userMessage);
  }

  static displayNotification(message) {
    // إنشاء عنصر الإشعار
    const notification = document.createElement('div');
    notification.className = 'error-notification';
    notification.textContent = message;

    // إضافة للصفحة
    document.body.appendChild(notification);

    // إزالة بعد 5 ثوان
    setTimeout(() => {
      notification.remove();
    }, 5000);
  }

  static async sendToServer(errorInfo) {
    try {
      await fetch('/api/errors', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(errorInfo)
      });
    } catch (err) {
      console.error('فشل في إرسال الخطأ للخادم:', err);
    }
  }
}

// استخدام نظام معالجة الأخطاء
try {
  // كود قد يسبب خطأ
  riskyOperation();
} catch (error) {
  ErrorHandler.handle(error, 'riskyOperation');
}

الخطوات التالية:

ممارسة معالجة الأخطاء
تعلم أدوات التصحيح
فهم أنماط معالجة الأخطاء
تعلم مراقبة الأخطاء
ممارسة الاختبار

معالجة الأخطاء تجعل برامجك أكثر موثوقية. ابدأ في تعلمها اليوم!

تعلم البرمجة معنا