React — التثبيت

المتطلبات

React 18+‎

هذه مكتبة React مخصّصة — مكوّن LerixProvider، ومكوّن LerixErrorBoundary، والخطّافان (hooks) useLerix()/useLerixNotifications() — مبنية فوق @lerix-dev/lerix-core، المحرّك المستقل عن أي إطار عمل والمشترك بين كل حزم Lerix للويب. تبني تطبيق Angular بدلاً من ذلك؟ راجع حزمة Angular. إذا كنت لا تستخدم React ولا Angular، تعمل @lerix-dev/lerix-core مباشرة أيضاً.

1. أضف الاعتمادية (Dependency)

npm install @lerix-dev/lerix-react

2. سجّل الـ SDK

غلّف تطبيقك بـ LerixProvider، وبـ LerixErrorBoundary لالتقاط أخطاء العرض (render):

main.tsx

import { createRoot } from 'react-dom/client';
import { LerixErrorBoundary, LerixProvider } from '@lerix-dev/lerix-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <LerixProvider
    options={{
      apiKey: 'your-api-key',
      projectId: 'your-project-id',
      debugMode: true,
    }}
  >
    <LerixErrorBoundary fallback={<p>Something went wrong.</p>}>
      <App />
    </LerixErrorBoundary>
  </LerixProvider>,
);

ستجد مفتاح الـ API ومعرّف المشروع في لوحة تحكم Lerix ضمن إعدادات المشروع (Project Settings).

يعمل التسجيل مع الخادم (backend)، ومعالج الأعطال التلقائي، مرة واحدة عند التركيب (mount) — آمن حتى تحت الاستدعاء المزدوج للـ effects في React 18 StrictMode أثناء التطوير، لأن التهيئة آمنة عند إعادة الدخول (re-entrant-safe).

المعاملات (Parameters)

خاصية options في LerixProvider:

المعامل	النوع	مطلوب	الوصف
`apiKey`	`string`	نعم	مفتاح API الخاص بمشروعك من لوحة التحكم
`projectId`	`string`	نعم	معرّف مشروعك (slug) من لوحة التحكم
`url`	`string`	لا	رابط الخادم الأساسي. الافتراضي هو `https://api.lerix.dev/v1` — غيّره فقط إذا كنت تستضيف الخادم بنفسك
`release`	`string`	لا	الإصدار الذي يُنشر به هذا البناء (مثل `1.4.0` أو معرّف commit). مرّر القيمة نفسها عند رفع خرائط المصدر لتظهر تتبّعات الإنتاج بملفاتك الأصلية: راجع خرائط المصدر
`debugMode`	`boolean`	لا	طباعة سجلّات طلبات/استجابات الـ SDK في الـ console (الافتراضي: `false`)
`enableCrashReporting`	`boolean`	لا	تثبيت معالج الأعطال التلقائي (الافتراضي: `true`) — راجع تتبع الأخطاء
`onError`	`(error: unknown) => void`	لا	يُستدعى إذا فشلت التهيئة نفسها (مثلاً تعذّر الوصول للشبكة)

3. تحقّق من التكامل

استخدم useLerix() وأرسل خطأً تجريبياً للتأكّد من أن كل شيء يعمل:

import { useLerix } from '@lerix-dev/lerix-react';

function MyComponent() {
  const lerix = useLerix();

  return <button onClick={() => lerix.throwError('Test error')}>Test</button>;
}

ثم افتح لوحة التحكم — يجب أن يظهر الخطأ خلال ثوانٍ.

كل شيء جاهز! تابع إلى تتبع الأخطاء لإرسال أخطاء مخصّصة وتفعيل الالتقاط التلقائي، أو إلى الإشعارات لتفعيل الإشعارات.

البدء

أطر العمل

الوحدات

المطورون

React — التثبيت

المتطلبات

1. أضف الاعتمادية (Dependency)

2. سجّل الـ SDK

المعاملات (Parameters)

3. تحقّق من التكامل

​المتطلبات

​1. أضف الاعتمادية (Dependency)

​2. سجّل الـ SDK

​المعاملات (Parameters)

​3. تحقّق من التكامل

المتطلبات

1. أضف الاعتمادية (Dependency)

2. سجّل الـ SDK

المعاملات (Parameters)

3. تحقّق من التكامل