تتبّع أخطاء Svelte من المتصفّح إلى الخادم
حزمة SDK مبنية لـ SvelteKit تتكامل مع hooks.client.ts وhooks.server.ts — تُلتقط الأخطاء على الجانبين، وتُتتبَّع الطلبات الواردة تلقائيًا، وتُربط source maps عبر إضافة Vite. ومع إعادة تشغيل الجلسات وstack traces مقروءة على المنصة نفسها، تتوقف بلاغات الأخطاء عن كونها تخمينًا.
لماذا تحتاج تطبيقات Svelte إلى تتبّع أخطاء حقيقي
تتعطّل تطبيقات SvelteKit في مكانين في آن واحد. دالة load ترمي خطأ على الخادم، ومكوّن ينكسر في المتصفّح، ولا يخبرك أيٌّ من العطلين عن نفسه — يرى المستخدم صفحة خطأ، ويغلق التبويب، ويختفي الدليل. وتُكمل حزم الإنتاج المصغّرة المهمة: فالـ stack traces القليلة التي تصلك تشير إلى أجزاء مُجمَّعة، لا إلى مكوّن Svelte الذي انكسر فعلًا.
تغطّي حزمة AllStak لـ Svelte الجانبين معًا. اربط handleErrorWithAllStak في hooks.client.ts وhooks.server.ts وستُلتقط أخطاء SvelteKit أينما وقعت؛ ويغلّف allstakHandle() كل طلب وارد إلى الخادم في span من نوع http.server ويواصل التتبّع عبر الشبكة. وتتولّى إضافة allstakSvelteKit() لـ Vite ربط source maps وقت البناء، فتُحَلّ الـ traces المصغّرة إلى شيفرتك الأصلية — وتُريك إعادة تشغيل الجلسات ما فعله المستخدم قبل العطل. وكل ذلك يصل إلى جانب أخطاء الخلفية والسجلات والتوافر لديك على منصة واحدة.
مراقبة شاملة لـ Svelte
من مكوّن معطوب في المتصفّح إلى دالة load خلفه، يغطّي AllStak تطبيق SvelteKit لديك على جانبي الشبكة.
تتبّع الأخطاء
يلتقط handleErrorWithAllStak أخطاء SvelteKit في ملفّي الـ hooks معًا، ويتكامل createErrorBoundaryHandler مع svelte:boundary في Svelte 5 فيبلّغ المكوّن المعطوب عن نفسه بدلًا من إسقاط الصفحة.
تتبّع طلبات الخادم
يغلّف allstakHandle() كل طلب وارد في span من نوع http.server، ويواصل التتبّع، ويضبط ترويسة تتبّع في الاستجابة — رؤية على جانب الخادم بسطر تصدير واحد.
إعادة تشغيل الجلسات
شاهد ما فعله المستخدم فعلًا قبل الخطأ — النقرات والتنقّل ولحظة العطل — مع إخفاء للخصوصية يضمن ألّا تغادر المدخلات الحساسة المتصفّح.
خرائط المصدر عبر Vite
أضف allstakSvelteKit() إلى vite.config.ts فتُربط source maps وقت البناء — وتُحَلّ traces الإنتاج المصغّرة إلى مكوّناتك الأصلية.
HTTP الصادرة والـ breadcrumbs
تُجهَّز نداءات HTTP الصادرة تلقائيًا عبر خطّ أنابيب @allstak/js الأساسي، مع جمع الـ breadcrumbs في الطريق — فيحمل كل خطأ الرحلة التي قادت إليه.
التنبيهات والحوادث
تلقَّ إشعارًا لحظة ظهور خطأ جديد أو ارتفاع خطأ قديم — قبل وصول تذاكر الدعم لا بعدها.
أضف AllStak خلال دقائق
ثبّت الحزمة والحزمة الأساسية، ثم هيّئ في hooks.client.ts وhooks.server.ts — وتُلتقط الأخطاء على الجانبين من تلك اللحظة.
npm install @allstak/svelte @allstak/js
// 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();أضف allstakSvelteKit() من @allstak/svelte/vite إلى إضافات vite.config.ts لخرائط المصدر وربط البناء — واحتفظ بمفتاح API في VITE_ALLSTAK_API_KEY لا في الشيفرة. دليل الإعداد الكامل ومرجع الـ SDK.
ما تراه في AllStak
تفاصيل الخطأ مع سياق كامل
افتح أي مشكلة لترى stack trace مقروءًا (عبر source maps)، والـ breadcrumbs التي سبقته، والإصدار الذي وصل فيه — إعادة إنتاج دون تخمين.
إعادة تشغيل جلسة العطل
شاهد جلسة المستخدم حول لحظة الخطأ — ما الذي نقر عليه، وأين تنقّل، وكيف بدت الصفحة عندما تعطّلت.
العميل والخادم في تتبّع واحد
يواصل allstakHandle() التتبّع عبر الطلب، فيظهر خطأ المتصفّح وطلب الخادم خلفه كقصة واحدة مترابطة، لا كحدثين منفصلين.
لوحة تحكّم موحّدة آنية
أخطاء الواجهة الأمامية إلى جانب أخطاء الخلفية والسجلات وتوافر الـ APIs خلفها — لوحة واحدة، بالعربية أو الإنجليزية، للفريق بأكمله.
لماذا تختار الفرق AllStak لـ Svelte
- تغطية العميل والخادم بملفّي hooks — حزمة مبنية لـ SvelteKit، لا محوّلات مُلصقة.
- الواجهة الأمامية والخلفية على منصة واحدة — الأخطاء والسجلات والتوافر والبنية التحتية بفاتورة واحدة.
- تحوّل إعادة تشغيل الجلسات وsource maps بلاغات الأخطاء الغامضة إلى أدلة مرئية ومقروءة.
- تربط إضافة allstakSvelteKit() لـ Vite خرائط المصدر في البناء — دون سكربتات رفع يدوية.
- تسعير واضح بالريال السعودي مع باقة مجانية حقيقية — ابدأ دون بطاقة ائتمان.
- تبقى بياناتك داخل السعودية، مع لوحة تحكّم بالعربية والإنجليزية للفريق بأكمله.
أسئلة شائعة حول مراقبة Svelte
كيف أضيف تتبّع الأخطاء إلى تطبيق SvelteKit؟
ثبّت @allstak/svelte و@allstak/js من npm، واستدعِ initAllStak في hooks.client.ts، وصدّر handleError = handleErrorWithAllStak() من hooks.client.ts وhooks.server.ts معًا. وأضف allstakHandle() كـ handle للخادم لتتبّع الطلبات، وإضافة allstakSvelteKit() لـ Vite لخرائط المصدر.
هل يدعم AllStak حدود الأخطاء في Svelte 5؟
نعم. يعيد createErrorBoundaryHandler معالج onerror تمرّره إلى svelte:boundary، فيبلّغ الجزء المتعطّل عن الخطأ إلى AllStak بينما يعرض مقطع failed بديلًا — تبقى الصفحة قائمة وتصلك التقارير كاملة.
هل AllStak مجاني لـ Svelte؟
نعم. يوفّر AllStak باقة مجانية يمكنك البدء بها دون بطاقة ائتمان، مع تسعير واضح بالريال السعودي مع نموّك. وحزمة Svelte SDK نفسها مجانية الاستخدام.
هل AllStak بديل لـ Sentry في Svelte؟
نعم. تحصل على تتبّع أخطاء SvelteKit مع source maps وإعادة تشغيل الجلسات كما في Sentry، إضافة إلى السجلات والتوافر ومراقبة البنية التحتية لخلفيتك على المنصة نفسها — بفاتورة واحدة بالريال السعودي وبيانات مخزّنة داخل السعودية بدلًا من كومة أدوات منفصلة.
هل ستُبطئ حزمة الـ SDK تطبيق Svelte لديّ؟
صُمّمت الحزمة للإنتاج: فخطّافات الالتقاط خفيفة، وتُرسَل القياسات في الخلفية، ويضيف handle الخادم غلافًا رفيعًا حول طلبات كنت تخدمها أصلًا. فلا تتأثر تجربة مستخدميك بشكل ملموس.
استكشف المزيد
ابدأ تتبّع أخطاء Svelte اليوم
اربط ملفّي الـ hooks، وأضف إضافة Vite، وانشر — وشاهد أخطاء العميل والخادم تصل إلى لوحة واحدة. ابدأ مجانًا — دون الحاجة إلى بطاقة ائتمان.