دليل Vue مع AllStak

التثبيت

ثبّت من npm (يتطلّب vue@^3.2).

npm install @allstak/vue

الإعداد

سجّل AllStakPlugin على تطبيقك بمفتاح API لمشروعك.

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');

مثال أساسي

التقط الأخطاء عبر مُركّبة useAllStak.

import { useAllStak } from '@allstak/vue';

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

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

تُلتقط أخطاء العرض غير المُعالَجة تلقائيًا (attachErrorHandler، الافتراضي true). ويمكنك تغليف جزء من الشجرة بـ AllStakErrorBoundary.

<script setup>
import { AllStakErrorBoundary } from '@allstak/vue';
</script>

<template>
  <AllStakErrorBoundary>
    <RiskyWidget />
    <template #fallback="{ error }">
      <p>Sorry — something broke. ({{ error?.message }})</p>
    </template>
  </AllStakErrorBoundary>
</template>

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

تُربط طلبات HTTP والـ breadcrumbs وweb-vitals تلقائيًا عبر خطّ أنابيب @allstak/js الأساسي؛ ولا توثّق حزمة Vue نداءً منفصلًا لتتبّع HTTP.

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

• احتفظ بمفتاح API في VITE_ALLSTAK_API_KEY لا في الشيفرة.
• مرّر router و autoInstrumentRouter لتتبّع تغيّرات المسار.
• اضبط release لتُجمَّع الأخطاء لكل نشر.