مراقبة React

تتبّع أخطاء React ومراقبتها، في مكان واحد

شاهد كل خطأ وطلب بطيء وعرض مكسور في تطبيق React لحظة حدوثه — مع التتبّعات والإصدارات والبنية التحتية على الشاشة نفسها.

ابدأ مجاناً دليل الإعداد

لماذا تحتاج فرق React مراقبة حقيقية

تفشل تطبيقات React بطرق لا تُظهرها لك وحدة تحكّم المتصفّح أبدًا: خطأ عرض يبتلعه حدّ الأخطاء، أو نداء API بطيء يجمّد التفاعل، أو انحدار لا يظهر إلا بعد النشر. وبدون تتبّع أخطاء React في الإنتاج، تكون أول إشارة لديك هي شكوى مستخدم — وعندها تُصحّح بلا رؤية، دون أثر استدعاء، ودون الطلب الفاشل، ودون معرفة أي إصدار تسبّب في العطل.

تضع AllStak تتبّع الأخطاء والأداء والطلبات والإصدارات والبنية التحتية والتنبيهات خلف حزمة SDK واحدة ولوحة واحدة — لا خمس أدوات وخمس فواتير. أضف حزمة AllStak React SDK، ووجّهها إلى مفتاح مشروعك، فتبدأ أخطاء العرض غير المُعالَجة والتتبّعات الموزّعة ونداءات HTTP الصادرة بالتدفّق تلقائيًا، مُجمّعة لكل إصدار لتعرف بالضبط ما الذي نُشر وما الذي تعطّل.

ما تحصل عليه لـ React

كل ما يلي يعمل من تثبيت واحد لحزمة AllStak React SDK — دون وكلاء منفصلين لربطهم، ودون موردين إضافيين لإدخالهم.

تتبّع أخطاء العرض والتشغيل

التقط أخطاء العرض غير المُلتقطة، وأعطال حدود الأخطاء، والاستثناءات المرميّة، مع آثار استدعاء كاملة وسياق المكوّن وأفعال المستخدم التي سبقتها.

الأداء والتتبّع الموزّع

التتبّع الموزّع مفعّل افتراضيًا — تُصدِر الحزمة span لكل طلب صادر وتربط الواجهة بالخلفية، لترى بالضبط أين يقضي التفاعل البطيء وقته.

مراقبة الطلبات وواجهات API

يحمل كل طلب fetch صادر ترويسة traceparent بمعيار W3C تلقائيًا، فتظهر نداءات API الفاشلة والبطيئة كطلبات مترابطة — لا كضجيج شبكي مجهول.

تتبّع الإصدارات

وسم كل بناء بإصدار وبيئة لتُجمَّع الأخطاء لكل نشر. اكتشف الانحدار لحظة نشر النسخة، واعرف أي تغيير تتراجع عنه.

البنية التحتية في سياقها

اقرن أخطاء الواجهة بالخادم وواجهة API خلفها. يُبلّغ وكيل خفيف عن CPU والذاكرة والقرص والشبكة والعمليات وDocker على اللوحة نفسها.

تنبيهات ذكية وحوادث

تلقَّ إشعارًا عند مجموعات أخطاء جديدة وارتفاعات وانحدارات بدل مراقبة اللوحة. وجّه التنبيهات إلى فريقك، وحوّل الإشارات الصاخبة إلى حوادث متابَعة.

أضف AllStak خلال دقائق

ثبّت الـ SDK ويبدأ AllStak في التقاط الأخطاء والطلبات والأداء تلقائيًا.

main.tsx
npm install @allstak/react

import { AllStakProvider } from '@allstak/react';

createRoot(document.getElementById('root')!).render(
  <AllStakProvider apiKey={import.meta.env.VITE_ALLSTAK_API_KEY} environment={import.meta.env.MODE}>
    <App />
  </AllStakProvider>,
);

إعداد بسيط — يبدأ تتبّع الأخطاء ومراقبة الطلبات والأداء تلقائيًا. دليل الإعداد الكامل ومرجع الـ SDK.

ما ستراه في اللوحة

تفاصيل الخطأ بسياق كامل

افتح أي خطأ في React لترى أثر الاستدعاء، والمكوّن والمسار الذي جاء منه، ومسار breadcrumb لأفعال المستخدم، والإصدار والبيئة، وعدد المستخدمين الذين تأثّروا به.

التتبّعات والخطّ الزمني للأداء

تتبّع تفاعلًا بطيئًا من النقرة عبر كل طلب صادر وصولًا إلى الخلفية على شلّال واحد، ليصبح عنق الزجاجة الحقيقي واضحًا — لا تخمينًا.

لوحة موحّدة واحدة

الأخطاء والطلبات والأداء ووقت التشغيل وSSL ونتائج الأمان والبنية التحتية لتطبيق React تظهر جنبًا إلى جنب — رؤية واحدة بدل التنقّل بين الأدوات.

لماذا تختار فرق React منصّة AllStak

  • منصّة واحدة وفاتورة واحدة للأخطاء والأداء والطلبات والبنية التحتية ووقت التشغيل والأمان — بديل أبسط عن Sentry.
  • حزمة React SDK من الدرجة الأولى تلتقط أخطاء العرض والتتبّعات ونداءات HTTP تلقائيًا — إعداد بسيط دون شيفرة نمطية.
  • تتبّع موزّع عبر الواجهة والخلفية على صيغة سلكية متوافقة مع OpenTelemetry لا تُقيَّد بها.
  • الإصدارات والبيئات مدمجة، فترتبط الانحدارات بالنشر الذي تسبّب فيها.
  • مقرّها السعودية بتسعير بالريال السعودي وباقة مجانية.
  • تسعير واضح — دون فواتير تجاوز مفاجئة مع نمو حركة تطبيق React لديك.

أسئلة شائعة عن مراقبة React

كيف أضيف المراقبة إلى تطبيق React؟

ثبّت حزمة AllStak React SDK من npm، وغلّف تطبيقك بالمزوّد، ومرّر مفتاح API لمشروعك. يبدأ تتبّع الأخطاء والطلبات ومراقبة الأداء تلقائيًا — والإعداد الكامل في وثائقنا.

هل توجد باقة مجانية؟

نعم. لدى AllStak باقة مجانية تبدأ بها اليوم دون بطاقة، وتسعير بالريال بحدود واضحة مع نموّك.

هل يلتقط الأخطاء داخل حدود أخطاء React؟

نعم. توفّر الحزمة حدّ أخطاء ومعالج أخطاء React يمكنك ربطه بـ createRoot، فتُبلَّغ أخطاء العرض غير المُلتقطة مع أثر استدعائها وسياق مكوّنها بدل ابتلاعها بصمت.

هل يراقب نداءات API والأداء أيضًا؟

نعم. التتبّع الموزّع مفعّل افتراضيًا: تحقن الحزمة ترويسة traceparent بمعيار W3C وتُصدِر span لكل طلب صادر، فتظهر نداءات API البطيئة والفاشلة كتتبّعات مترابطة إلى جانب أخطائك.

هل يعمل مع Next.js وVite وإعدادات React الأخرى؟

تعمل حزمة React SDK مع Vite وCreate React App والإعدادات أحادية الصفحة المشابهة. وفي Next.js، توفّر AllStak حزمة Next.js مخصّصة تغطّي العميل والخادم ومعالِجات المسارات.

كيف تختلف AllStak عن Sentry؟

توحّد AllStak تتبّع الأخطاء والأداء والطلبات والبنية التحتية ووقت التشغيل وSSL والأمان في منصّة واحدة وفاتورة واحدة، بتسعير بالريال السعودي — بدل دمج منتجات منفصلة.

استكشف المزيد

القدرات

قارن

ابدأ تتبّع أخطاء React اليوم

أنشئ مشروع AllStak مجانًا، أضف حزمة React SDK، وشاهد أول أخطائك وتتبّعاتك تصل خلال دقائق. دون الحاجة إلى بطاقة.

ابدأ مجاناً عرض الأسعار