دليل SvelteKit مع AllStak

التثبيت

ثبّت الحزمة والحزمة الأساسية.

npm install @allstak/svelte @allstak/js

الإعداد

هيّئ في hooks.client.ts و hooks.server.ts، وأضف إضافة Vite.

// src/hooks.client.ts
import { initAllStak, handleErrorWithAllStak } from '@allstak/svelte/hooks/client';

initAllStak({
  apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
});
export const handleError = handleErrorWithAllStak();

// src/hooks.server.ts
import { allstakHandle, handleErrorWithAllStak } from '@allstak/svelte/hooks/server';
export const handle = allstakHandle();
export const handleError = handleErrorWithAllStak();

مثال أساسي

أضف إضافة Vite لخرائط المصدر وربط البناء.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { allstakSvelteKit } from '@allstak/svelte/vite';

export default defineConfig({
  plugins: [sveltekit(), allstakSvelteKit()],
});

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

يلتقط handleErrorWithAllStak أخطاء SvelteKit؛ ولحدود Svelte 5 استخدم createErrorBoundaryHandler.

<script lang="ts">
  import { createErrorBoundaryHandler } from '@allstak/svelte';
  const onerror = createErrorBoundaryHandler({ source: 'Dashboard' });
</script>

<svelte:boundary {onerror}>
  <RiskyWidget />
  {#snippet failed(error, reset)}
    <button onclick={reset}>Try again</button>
  {/snippet}
</svelte:boundary>

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

HTTP الواردة على الخادم تلقائية عبر allstakHandle() (يفتح span من نوع http.server، ويواصل التتبّع، ويضبط ترويسة تتبّع في الاستجابة). و HTTP الصادرة تُجهَّز تلقائيًا عبر @allstak/js. لا حاجة لنداء يدوي.

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

• اربط كلًّا من hooks.client.ts و hooks.server.ts.
• أضف allstakSvelteKit() إلى Vite لخرائط المصدر.
• استخدم متغيّرات البيئة VITE_ALLSTAK_API_KEY / ALLSTAK_API_KEY.