Vue Academy · درس

المراقبة والصيانة

راقب تطبيقات الإنتاج وحافظ على سلامتها.

المراقبة والصيانة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

الحياة بعد الإطلاق

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

لماذا نتتبع الأخطاء؟

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

Sentry لتتبع الأخطاء

تُعد Sentry خدمة مستخدمة على نطاق واسع لتتبع الأخطاء. ثبّت حزمة SDK الخاصة بها وهيّئها عند بدء التطبيق لكي تلتقط الأخطاء غير المعالجة تلقائيًا.

npm install @sentry/vue

تهيئة Sentry

هيّئ Sentry باستخدام DSN الخاص بمشروعك ونسخة تطبيق Vue، لكي تتمكن من الاندماج مع معالجة أخطاء Vue.

import * as Sentry from "@sentry/vue"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
Sentry.init({
  app,
  dsn: "https://example@sentry.io/123"
})
app.mount("#app")

التقاط الأخطاء المخصصة

إلى جانب الالتقاط التلقائي، يمكنك الإبلاغ يدويًا عن الأخطاء التي عالجها التطبيق للحصول على معلومات سياقية حول المشكلات التي يلتقطها كودك بالفعل.

try {
  riskyOperation()
} catch (err) {
  Sentry.captureException(err)
}

إضافة التحليلات

توضح لك التحليلات كيفية استخدام المستخدمين لتطبيقك فعليًا: الصفحات التي يزورونها، وما ينقرون عليه، والمواضع التي يتوقفون عندها. تساعد هذه البيانات في توجيه قرارات المنتج.

تتبع مشاهدات الصفحات

باستخدام Vue Router، يمكنك إرسال حدث لمشاهدة الصفحة عند كل عملية تنقل عبر استخدام خطاف من خطافات الموجّه.

router.afterEach((to) => {
  trackPageView(to.fullPath)
})

تحديث الاعتمادات

تتراكم الأخطاء والثغرات الأمنية في الحزم القديمة. تحقّق دوريًا من وجود التحديثات وطبّقها، مع إجراء الاختبارات أثناء ذلك.

npm outdated
npm update

التدقيق بحثًا عن الثغرات

شغّل تدقيقًا أمنيًا للعثور على الثغرات المعروفة في شجرة الاعتمادات، ثم طبّق الإصلاحات المتاحة.

npm audit
npm audit fix

مراقبة أداء الإنتاج

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

التعامل مع التغييرات غير المتوافقة

قد تُدخل تحديثات الإصدارات الرئيسية تغييرات غير متوافقة. اقرأ سجل التغييرات ودليل الترحيل، وأجرِ التحديث في فرع، وشغّل مجموعة اختباراتك، وأصلح المشكلات قبل الدمج. تجعل الاختبارات هذه العملية آمنة.

اختبار سريع

اختبر معرفتك بالمراقبة والصيانة.

مراجعة

بعد الإطلاق، راقب التطبيق باستخدام تتبع الأخطاء عبر Sentry، وافهم الاستخدام من خلال التحليلات، وحافظ على تحديث الحزم باستخدام npm outdated وnpm audit، وراقب أداء الإنتاج. تعامل بحذر مع التغييرات غير المتوافقة باستخدام مجموعة اختباراتك. ستستكشف بعد ذلك الأنماط المتقدمة وأفضل الممارسات.

الأسئلة الشائعة

هل درس «المراقبة والصيانة» مجاني؟

نعم — نص درس «المراقبة والصيانة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «المراقبة والصيانة»؟

راقب تطبيقات الإنتاج وحافظ على سلامتها. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «المراقبة والصيانة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy