Sentry لـ Vue

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

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

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

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

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

ثبّت حِزمة @sentry/vue الرسمية وهيّئها باستخدام DSN من إعداد مشروع AllStak. فعّل فقط التكاملات الرسمية المدعومة واتبع إرشادات Sentry لخرائط المصدر في بناء الإنتاج.

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

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

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

استخدم تكامل Sentry الرسمي لـ Vue للأخطاء غير المُعالَجة وSentry.captureException للأخطاء المُعالَجة.

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

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

خرائط المصدر

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

web vitals والأداء

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

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

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

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

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

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

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

main.ts
npm install @sentry/vue

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

const app = createApp(App);
Sentry.init({
  app,
  dsn: globalThis._importMeta_.env.VITE_ALLSTAK_DSN,
  environment: globalThis._importMeta_.env.MODE,
});
app.mount('#app');

اتبع إعداد @sentry/vue الرسمي لإصدار Vue لديك وتحقق من تتبّع الموجّه الاختياري مقابل مصفوفة توافق AllStak. دليل الإعداد الكامل ومرجع الـ SDK.

ما تراه في AllStak

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

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

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

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

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

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

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

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

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

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

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

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

ثبّت @sentry/vue من npm وهيّئه باستخدام DSN من إعداد مشروع AllStak. استخدم تكامل Vue الرسمي للأخطاء غير المعالَجة وSentry.captureException للأخطاء المُعالَجة.

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

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

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

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

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

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

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

صُمّمت الحزمة الرسمية لمتصفحات الإنتاج، لكن الحمل يعتمد على التكاملات والتعيين المفعّلين. قِس على حملك الفعلي وفعّل تتبّع الموجّه الاختياري بوعي.

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

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

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

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