حزمة Vue SDK

تتبّع أخطاء Vue التي لن يبلّغك عنها مستخدموك

إضافة لـ Vue 3 تلتقط أخطاء العرض وweb vitals وتغيّرات المسار تلقائيًا — مع إعادة تشغيل الجلسات وstack traces مقروءة عبر source maps على المنصة نفسها. سجّلها مرة واحدة على تطبيقك وتوقف عن معرفة الأخطاء من لقطات الشاشة.

ابدأ مجاناً دليل الإعداد

لماذا تحتاج تطبيقات Vue إلى تتبّع أخطاء حقيقي

أخطاء الواجهة الأمامية غير مرئية افتراضيًا. خطأ عرض في مكوّن يكسر الصفحة لمستخدم على هاتفه في مدينة أخرى، وتموت رسالة الـ console مع إغلاق تبويبه، وأول ما تسمع عنه هو تقييم بنجمة واحدة أو تذكرة دعم غامضة. وتجعل حزم الإنتاج المصغّرة التقارير القليلة التي تصلك شبه عديمة الفائدة — فـ stack trace يشير إلى السطر الأول من app.3f2c1a.js لا يفيد أحدًا.

تسدّ إضافة AllStak لـ Vue هذه الفجوة. سجّل AllStakPlugin على تطبيق Vue 3 وستُلتقط أخطاء العرض غير المعالَجة تلقائيًا، وتُربط نداءات HTTP والـ breadcrumbs وweb vitals عبر خطّ أنابيب JS الأساسي، ويمكن تتبّع تغيّرات المسار بتمرير الـ router. ارفع source maps فتغدو الـ traces المصغّرة شيفرة مقروءة؛ وتُريك إعادة تشغيل الجلسات ما فعله المستخدم فعلًا قبل الخطأ. وكل ذلك يصل إلى المنصة نفسها التي تستضيف أخطاء الخلفية والسجلات والتوافر لديك — فاتورة واحدة ولوحة واحدة.

مراقبة شاملة لـ Vue

من خطأ عرض في مكوّن إلى نداء الـ API خلفه، يغطّي AllStak تطبيق Vue لديك عبر كل طبقة.

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

تُلتقط أخطاء العرض غير المعالَجة تلقائيًا، وتُبلَّغ المعالَجة عبر مُركّبة useAllStak، ويمنع AllStakErrorBoundary مكوّنًا معطوبًا من إسقاط الصفحة بأكملها.

إعادة تشغيل الجلسات

شاهد ما فعله المستخدم فعلًا قبل الخطأ — النقرات والتنقّل ولحظة العطل — بدلًا من إعادة بنائه من تذكرة دعم.

خرائط المصدر

ارفع source maps فتُحَلّ stack traces الإنتاج المصغّرة إلى شيفرتك الأصلية — الملف والسطر والدالة — فيبدأ الإصلاح فورًا.

web vitals والأداء

تُربط web vitals تلقائيًا عبر خطّ أنابيب JS الأساسي، فترى كيف يعمل التطبيق فعلًا على أجهزة المستخدمين الحقيقيين.

تتبّع المسارات وHTTP

مرّر الـ router لتتبّع تغيّرات المسار، بينما تُلتقط نداءات HTTP والـ breadcrumbs تلقائيًا — فيحمل كل خطأ الرحلة التي قادت إليه.

التنبيهات والحوادث

تلقَّ إشعارًا لحظة ظهور خطأ جديد أو ارتفاع خطأ قديم — قبل وصول تذاكر الدعم لا بعدها.

أضف AllStak خلال دقائق

ثبّت من npm (يتطلّب vue@^3.2) وسجّل الإضافة على تطبيقك — وتُلتقط أخطاء العرض تلقائيًا من تلك اللحظة.

main.ts

npm install @allstak/vue

import { createApp } from 'vue';
import { AllStakPlugin } from '@allstak/vue';
import App from './App.vue';

createApp(App)
  .use(AllStakPlugin, {
    apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
    environment: import.meta.env.MODE,
    release: import.meta.env.VITE_APP_VERSION,
  })
  .mount('#app');

تُلتقط أخطاء العرض غير المعالَجة تلقائيًا (attachErrorHandler مفعّل افتراضيًا) — ومرّر router وautoInstrumentRouter لتتبّع تغيّرات المسار أيضًا. دليل الإعداد الكامل ومرجع الـ SDK.

ما تراه في AllStak

تفاصيل الخطأ مع سياق كامل

افتح أي مشكلة لترى stack trace مقروءًا (عبر source maps)، والـ breadcrumbs التي سبقته، والإصدار الذي وصل فيه — إعادة إنتاج دون تخمين.

إعادة تشغيل جلسة العطل

شاهد جلسة المستخدم حول لحظة الخطأ — ما الذي نقر عليه، وأين تنقّل، وكيف بدت الصفحة عندما تعطّلت.

web vitals على أجهزة حقيقية

الأداء كما يختبره مستخدموك فعلًا، لا كما يعرضه جهاز التطوير لديك — مُتتبَّعًا باستمرار لا بعيّنة واحدة.

لوحة تحكّم موحّدة آنية

أخطاء الواجهة الأمامية إلى جانب أخطاء الخلفية والسجلات وتوافر الـ APIs خلفها — لوحة واحدة، بالعربية أو الإنجليزية، للفريق بأكمله.

لماذا تختار الفرق AllStak لـ Vue

الواجهة الأمامية والخلفية على منصة واحدة — الأخطاء والسجلات والتوافر والبنية التحتية بفاتورة واحدة.
تسجيل إضافة واحد على تطبيق Vue 3 — وتُلتقط أخطاء العرض تلقائيًا من تلك اللحظة.
تحوّل إعادة تشغيل الجلسات وsource maps بلاغات الأخطاء الغامضة إلى أدلة مرئية ومقروءة.
تُربط نداءات HTTP والـ breadcrumbs وweb vitals تلقائيًا — دون تجهيز لكل نداء.
تسعير واضح بالريال السعودي مع باقة مجانية حقيقية — ابدأ دون بطاقة ائتمان.
تبقى بياناتك داخل السعودية، مع لوحة تحكّم بالعربية والإنجليزية للفريق بأكمله.

أسئلة شائعة حول مراقبة Vue

كيف أضيف تتبّع الأخطاء إلى تطبيق Vue؟

ثبّت @allstak/vue من npm وسجّل AllStakPlugin على تطبيقك بمفتاح API لمشروعك. تُلتقط أخطاء العرض غير المعالَجة تلقائيًا؛ واستخدم مُركّبة useAllStak للأخطاء المعالَجة وAllStakErrorBoundary لتغليف الأجزاء الحساسة — ويغطّي دليل الإعداد كل خيار.

ما إصدارات Vue المدعومة؟

تستهدف الإضافة Vue 3 وتتطلّب vue@^3.2. وإذا كنت تستخدم Nuxt، فيوفّر AllStak أيضًا وحدة مخصّصة لـ Nuxt تغطّي العميل وخادم Nitro معًا.

هل AllStak مجاني لـ Vue؟

نعم. يوفّر AllStak باقة مجانية يمكنك البدء بها دون بطاقة ائتمان، مع تسعير واضح بالريال السعودي مع نموّك. وحزمة Vue SDK نفسها مجانية الاستخدام.

هل AllStak بديل لـ Sentry في Vue؟

نعم. تحصل على تتبّع أخطاء Vue مع source maps وإعادة تشغيل الجلسات كما في Sentry، إضافة إلى السجلات والتوافر ومراقبة البنية التحتية لخلفيتك على المنصة نفسها — بفاتورة واحدة بالريال السعودي وبيانات مخزّنة داخل السعودية بدلًا من كومة أدوات منفصلة.

هل ستُبطئ حزمة الـ SDK تطبيق Vue لديّ؟

صُمّمت الإضافة لمتصفّحات الإنتاج: فخطّافات الالتقاط خفيفة وتُرسَل القياسات في الخلفية، فلا تتأثر تجربة مستخدميك بشكل ملموس. وأنت تتحكّم فيما يُجهَّز — فتتبّع المسارات مثلًا اختياري عبر autoInstrumentRouter.

استكشف المزيد

القدرات

حسب إطار العمل

قارن

ابدأ تتبّع أخطاء Vue اليوم

سجّل الإضافة، وانشر، وشاهد أخطاء العرض وweb vitals والجلسات تصل إلى لوحة واحدة. ابدأ مجانًا — دون الحاجة إلى بطاقة ائتمان.

ابدأ مجاناً عرض الأسعار