مراقبة React

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

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

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

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

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

ثبّت @sentry/react وهيّئه باستخدام DSN من إعداد مشروع AllStak واضبط الإصدار والبيئة باتساق. تصل الأحداث المدعومة بعدها إلى مشروع AllStak نفسه مع سياقك التشغيلي.

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

ابدأ بتثبيت واحد لحِزمة Sentry الرسمية لـ React وDSN من إعداد مشروع AllStak.

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

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

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

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

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

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

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

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

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

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

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

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

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

ثبّت حزمة Sentry الرسمية واضبط DSN الخاص بمشروع AllStak وتحقق من خطأ تجريبي. فعّل تكاملات الطلبات والأداء الاختيارية المدعومة في دليل الإعداد.

main.tsx
npm install @sentry/react

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: globalThis._importMeta_.env.VITE_ALLSTAK_DSN,
  environment: globalThis._importMeta_.env.MODE,
});

createRoot(document.getElementById('root')!).render(<App />);

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

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

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

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

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

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

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

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

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

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

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

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

ثبّت @sentry/react من npm وهيّئه باستخدام DSN من إعداد مشروع AllStak. تجد إعداد الحِزمة الرسمية كاملًا في وثائقنا.

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

نعم. لدى 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 مجانًا، وثبّت @sentry/react، وتحقق من أول حدث باستخدام DSN للمشروع. دون الحاجة إلى بطاقة.

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