دليل Nuxt مع AllStak

التثبيت

ثبّت من npm (peer: nuxt@^3.7 || ^4).

npm install @allstak/nuxt

الإعداد

أضف الوحدة واضبط runtimeConfig العام في nuxt.config.ts.

// 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,
      },
    },
  },
});

مثال أساسي

على العميل، التقط عبر useAllStak (استورد من @allstak/nuxt/client).

import { useAllStak } from '@allstak/nuxt/client';

const allstak = useAllStak();
allstak.captureException(new Error('payment declined'));

التقاط الأخطاء

على الخادم، استخدم كائن AllStak من @allstak/nuxt/server.

// server/api/orders.post.ts
import { AllStak } from '@allstak/nuxt/server';

export default defineEventHandler(async (event) => {
  AllStak.addBreadcrumb({ type: 'order', message: 'creating order' });
  // ...
});

تتبّع الطلبات

تُغلَّف طلبات الخادم في span من نوع http.server تلقائيًا؛ وتفتح تغيّرات المسار على العميل span من نوع navigation، وتربط وسوم meta الخاصة بالتتبّع تتبّعات العميل والخادم. لا حاجة لنداء يدوي.

أفضل الممارسات

• اضبط ALLSTAK_API_KEY و APP_VERSION كمتغيّرات بيئة.
• استخدم استيرادات المسارين الفرعيين /client و /server في السياق الصحيح.
• اضبط tracesSampleRate للعميل/الخادم تحت مفتاح إعداد allstak.