تشغيل أداة التتبع في تطبيق React أمر بسيط للغاية.

بافتراض أنك تبني تطبيق صفحة واحدة (SPA - Single Page Application)، كل ما عليك فعله هو إضافة الكود التالي إلى نقطة الدخول (entry point) الخاصة بك:

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

وبدلاً من ذلك، يمكنك أيضًا استخدام الفئة Tracker مباشرةً لإدارة نسختها يدويًا:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

بعبارة أخرى، يمكنك إنشاء نسخة من أداة التتبع في بداية السكربت، وبمجرد تحميل الصفحة يمكنك بدء تشغيلها باستخدام الخطّاف (hook) المسمّى useEffect.

لأسباب أمنية، تجنّب كتابة projectKey بشكل ثابت مباشرةً في كود تطبيقك. بدلاً من ذلك، قم بتخزينه في ملف إعدادات أو في نظام بيئة (environment).

تتوفر عدة طرق حسب إعداد مشروعك:

• متغيرات البيئة: إذا كنت تستخدم Create React App، فاستفد من الدعم المدمج لمتغيرات البيئة
• ملفات الإعدادات: استخدم ملفات إعدادات مخصّصة يتم استبعادها من نظام التحكم بالإصدارات
• إدارة البيئات: يمكن لأدوات مثل dotenv أن تساعدك في إدارة مفاتيح مختلفة عبر البيئات المختلفة

فيما يلي مثال:

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

إذا كنت تبني تطبيقًا معقدًا باستخدام React، فمن المرجّح أنك تستخدم Next أو Remix أو إطار عمل مشابه. تأكّد من الاطلاع على قسم إعداد أداة التتبع للعثور على إطار العمل الذي تعمل به.

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