🔹 Blazor - التعامل مع أخطاء التنفيذ (Runtime Errors)

في التطبيقات الواقعية، من الطبيعي أن تحدث أخطاء أثناء التشغيل (مثل NullReference أو مشكلة في API). في هذا الدرس سنتعلم كيفية رصد هذه الأخطاء، التعامل معها بشكل سليم، وعرض رسائل مخصصة للمستخدم دون انهيار الصفحة.

---

🧠 ما هو Runtime Error؟

Runtime Errors هي الأخطاء التي تحدث أثناء تشغيل التطبيق وليس أثناء ترجمته (Build). مثل: محاولة الوصول إلى خاصية كائن غير مهيأ، فشل الاتصال بالخادم، أو تقسيم على صفر.

---

🛠️ 1. استخدام try-catch داخل المكون

أفضل أسلوب للتعامل مع الأخطاء البسيطة مباشرة داخل الدوال هو استخدام try-catch:

<button class="btn btn-danger" @onclick="LoadData">تحميل البيانات</button>

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger mt-2">⚠️ @ErrorMessage</div>
}

@code {
    private string? ErrorMessage;

    async Task LoadData()
    {
        try
        {
            // كود قد يسبب خطأ
            var result = await Http.GetFromJsonAsync<List<string>>("api/items");
            ErrorMessage = null; // تم بنجاح
        }
        catch (Exception ex)
        {
            ErrorMessage = "حدث خطأ أثناء تحميل البيانات: " + ex.Message;
        }
    }
}

---

📦 2. استخدام ErrorBoundary في Blazor

Blazor يدعم مكون <ErrorBoundary> لتغليف جزء من الواجهة والتعامل مع أي خطأ غير متوقع داخله.

<ErrorBoundary>
    <ChildContent>
        <MyComponentThatMightThrow />
    </ChildContent>
    <ErrorContent>
        <p class="text-danger">❌ حدث خطأ، الرجاء المحاولة لاحقًا.</p>
    </ErrorContent>
</ErrorBoundary>

---

💡 نصائح مهمة

• سجّل الأخطاء في Console أو في ملف لسهولة التتبع لاحقًا.
• لا تُظهر رسائل استثناء تقنية للمستخدم (مثل StackTrace)، بل استخدم رسائل بسيطة.
• استخدم ErrorBoundary لتغليف مكونات قد تسبب فشل في العرض.
• يمكنك إنشاء خدمة Global Error Logger لتسجيل الأخطاء في قاعدة البيانات أو نظام تتبع خارجي.

---

🛠️ مثال عملي: مكون قد يرمي استثناء

✅ MyRiskyComponent.razor:

@code {
    protected override void OnInitialized()
    {
        throw new Exception("💥 خلل داخلي أثناء التحميل");
    }
}

✅ صفحة تستخدمه داخل ErrorBoundary:

<ErrorBoundary>
    <ChildContent>
        <MyRiskyComponent />
    </ChildContent>
    <ErrorContent>
        <div class="alert alert-warning">⚠️ تعذر تحميل المكون.</div>
    </ErrorContent>
</ErrorBoundary>

---

✅ خلاصة الدرس

إدارة الأخطاء بشكل احترافي هو جزء أساسي من بناء تطبيق موثوق. باستخدام try-catch وErrorBoundary، تستطيع حماية تطبيقك من الانهيار وتقديم تجربة سلسة للمستخدم.