مراقبة Nuxt عبر العميل وخادم Nitro معًا
وحدة Nuxt واحدة تغطّي نصفَي تطبيقك: تُغلَّف طلبات الخادم في spans من نوع http.server تلقائيًا، وتُتتبَّع تغيّرات المسار على العميل كـ spans من نوع navigation، وتربط وسوم meta الخاصة بالتتبّع في SSR الجانبين معًا. أضف الوحدة إلى nuxt.config.ts فيغدو مسار الطلب كاملًا مرئيًا.
لماذا تحتاج تطبيقات Nuxt إلى مراقبة حقيقية
تتعطّل تطبيقات Nuxt على جبهتين. مُركّبة ترمي خطأ في المتصفّح وتموت رسالة الـ console مع التبويب؛ ومسار على خادم Nitro يفشل وأثره الوحيد هو 500 في سجلات الوصول. وحين يُراقَب النصفان منفصلَين — أو لا يُراقَبان أصلًا — يتحوّل عطل واحد يراه المستخدم إلى مشروع تنقيب: هل كان العميل، أم الخادم، أم التسليم بينهما؟
تراقب وحدة AllStak لـ Nuxt النصفين كنظام واحد. أضف @allstak/nuxt إلى الوحدات واضبط runtimeConfig العام — فتُغلَّف طلبات الخادم في spans من نوع http.server تلقائيًا، وتفتح تغيّرات المسار على العميل spans من نوع navigation، وتربط وسوم meta الخاصة بالتتبّع في SSR تتبّعات العميل والخادم دون أي نداء يدوي. التقط الأخطاء المعالَجة عبر useAllStak على العميل وكائن AllStak على الخادم. ارفع source maps لتحصل على traces مقروءة، وشاهد إعادة تشغيل الجلسات لجانب المتصفّح، وكل ذلك إلى جانب سجلاتك وتوافر خدماتك على منصة واحدة.
مراقبة شاملة لـ Nuxt
من تغيّر مسار في المتصفّح إلى معالج Nitro خلفه، يغطّي AllStak تطبيق Nuxt لديك عبر كل طبقة.
تتبّع الأخطاء
التقط أخطاء العميل عبر مُركّبة useAllStak من @allstak/nuxt/client، وأخطاء الخادم عبر كائن AllStak من @allstak/nuxt/server — ويصل كلاهما إلى تدفّق المشكلات نفسه.
مراقبة خادم Nitro
تُغلَّف طلبات الخادم في span من نوع http.server تلقائيًا — دون أي نداء يدوي — فيُحتسب كل مسار API وكل عرض SSR.
تتبّعات مترابطة بين العميل والخادم
تفتح تغيّرات المسار على العميل span من نوع navigation، وتربط وسوم meta الخاصة بالتتبّع في SSR تتبّعات العميل والخادم معًا — صورة واحدة مترابطة لكل طلب.
إعادة تشغيل الجلسات
شاهد ما فعله المستخدم فعلًا قبل الخطأ — النقرات والتنقّل ولحظة العطل — مع إخفاء للخصوصية يضمن ألّا تغادر المدخلات الحساسة المتصفّح.
خرائط المصدر
ارفع source maps فتُحَلّ stack traces الإنتاج المصغّرة إلى شيفرتك الأصلية — الملف والسطر والدالة — فيبدأ الإصلاح فورًا.
التنبيهات والحوادث
تلقَّ إشعارًا لحظة ظهور خطأ جديد أو ارتفاع خطأ قديم — قبل وصول تذاكر الدعم لا بعدها.
أضف AllStak خلال دقائق
ثبّت من npm (peer: nuxt@^3.7 || ^4)، وأضف الوحدة، واضبط runtimeConfig العام في nuxt.config.ts — ويُراقَب النصفان من تلك اللحظة.
npm install @allstak/nuxt
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@allstak/nuxt'],
runtimeConfig: {
public: {
allstak: {
apiKey: process.env.ALLSTAK_API_KEY,
environment: process.env.NODE_ENV,
release: process.env.APP_VERSION,
},
},
},
});استخدم استيرادات المسارين الفرعيين /client و/server في السياق الصحيح — useAllStak من @allstak/nuxt/client وكائن AllStak من @allstak/nuxt/server — واضبط tracesSampleRate تحت مفتاح إعداد allstak. دليل الإعداد الكامل ومرجع الـ SDK.
ما تراه في AllStak
تفاصيل الخطأ مع سياق كامل
افتح أي مشكلة لترى stack trace مقروءًا (عبر source maps)، والـ breadcrumbs التي سبقته، والإصدار الذي وصل فيه — سواء جاء من المتصفّح أو من خادم Nitro.
تتبّع واحد من النقرة إلى الخادم
تتصل spans التنقّل على العميل بـ spans من نوع http.server على Nitro عبر وسوم meta الخاصة بالتتبّع في SSR — فتشير الصفحة البطيئة إلى النصف البطيء بالضبط.
إعادة تشغيل جلسة العطل
شاهد جلسة المستخدم حول لحظة الخطأ — ما الذي نقر عليه، وأين تنقّل، وكيف بدت الصفحة عندما تعطّلت.
لوحة تحكّم موحّدة آنية
أخطاء العميل وأخطاء الخادم والسجلات والتوافر جنبًا إلى جنب — لوحة واحدة، بالعربية أو الإنجليزية، للفريق بأكمله.
لماذا تختار الفرق AllStak لـ Nuxt
- وحدة واحدة تغطّي العميل وخادم Nitro — دون إعدادين منفصلين للمتصفّح والخادم عليك مزامنتهما.
- spans الخادم وspans التنقّل وربط تتبّعات SSR كلها تلقائية — دون نداءات تجهيز يدوية.
- تحوّل إعادة تشغيل الجلسات وsource maps بلاغات الأخطاء الغامضة إلى أدلة مرئية ومقروءة.
- منصة متكاملة — الأخطاء والسجلات والتتبّعات والتوافر بفاتورة واحدة بدلًا من أربع أدوات.
- تسعير واضح بالريال السعودي مع باقة مجانية حقيقية — ابدأ دون بطاقة ائتمان.
- تبقى بياناتك داخل السعودية، مع لوحة تحكّم بالعربية والإنجليزية للفريق بأكمله.
أسئلة شائعة حول مراقبة Nuxt
كيف أضيف تتبّع الأخطاء إلى تطبيق Nuxt؟
ثبّت @allstak/nuxt من npm، وأضفه إلى modules في nuxt.config.ts، واضبط apiKey وenvironment وrelease تحت runtimeConfig.public.allstak. ومن هناك، التقط الأخطاء المعالَجة عبر useAllStak على العميل وكائن AllStak على الخادم — ويغطّي دليل الإعداد كليهما.
ما إصدارات Nuxt المدعومة؟
تستهدف الوحدة Nuxt 3 و4 (peer: nuxt@^3.7 || ^4). وإذا كنت تستخدم Vue دون Nuxt، فيوفّر AllStak أيضًا إضافة مخصّصة لـ Vue 3.
هل يراقب AllStak خادم Nitro أيضًا؟
نعم. تُغلَّف طلبات الخادم في span من نوع http.server تلقائيًا، ويمكنك التقاط الأخطاء وإضافة breadcrumbs عبر كائن AllStak من @allstak/nuxt/server، وتربط وسوم meta الخاصة بالتتبّع في SSR عملَ الخادم بتنقّل العميل الذي أطلقه.
هل AllStak مجاني لـ Nuxt؟
نعم. يوفّر AllStak باقة مجانية يمكنك البدء بها دون بطاقة ائتمان، مع تسعير واضح بالريال السعودي مع نموّك. ووحدة Nuxt نفسها مجانية الاستخدام.
هل AllStak بديل لـ Sentry في Nuxt؟
نعم. تحصل على تتبّع أخطاء Nuxt مع source maps وإعادة تشغيل الجلسات وتتبّعات مترابطة بين العميل والخادم كما في Sentry، إضافة إلى السجلات والتوافر ومراقبة البنية التحتية على المنصة نفسها — بفاتورة واحدة بالريال السعودي وبيانات مخزّنة داخل السعودية. وتتحكّم في الحمل عبر tracesSampleRate للعميل والخادم تحت مفتاح إعداد allstak.
استكشف المزيد
ابدأ مراقبة تطبيق Nuxt اليوم
أضف الوحدة، واضبط runtimeConfig، وانشر — وشاهد أخطاء العميل والخادم والتتبّعات والجلسات تصل إلى لوحة واحدة. ابدأ مجانًا — دون الحاجة إلى بطاقة ائتمان.