استخدام OpenReplay مع React
جعل المتتبع يعمل على تطبيق React أمر بسيط للغاية.
إضافة كود التتبع
Section titled إضافة كود التتبعبينما يمكنك الحصول على نسخة جاهزة للنسخ واللصق من الكود مباشرةً من المنصة عند إنشاء مشروع جديد، فإن هذا الكود أساسي للغاية وسيجعل تخصيصه وإضافة الإضافات الإضافية أكثر صعوبة.
بافتراض أنك تقوم ببناء تطبيق SPA (تطبيق صفحة واحدة)، كل ما عليك فعله هو إضافة الكود التالي إلى نقطة الدخول الخاصة بك:
import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
projectKey: "<مفتاح مشروعك>",
});
function YourMainComponent({props}) {
//بعض الكود هنا...
useEffect(() => {
tracker.start();
}, [])
return //....
}بمعنى آخر، يمكنك تهيئة المتتبع في بداية السكربت، وبمجرد تحميل الصفحة، يمكنك تشغيله باستخدام خطاف useEffect.
التعامل مع “projectKey” في كودك
Section titled التعامل مع “projectKey” في كودككملاحظة، projectKey الذي تقوم بتكوينه هو المقدم من منصة OpenReplay. يجب عدم تخزين هذه القيمة بشكل صلب في الكود لأسباب أمنية، بل في نوع من ملف/نظام التكوين.
هناك خيارات مختلفة لحل هذه المشكلة، اعتمادًا على إعدادك، قد تستخدم شيئًا مثل دعم المتغيرات ENV من create-react-app.
بناء شيء أكثر تعقيدًا؟
Section titled بناء شيء أكثر تعقيدًا؟إذا كنت تبني تطبيقًا معقدًا باستخدام React، فمن المحتمل أنك تستخدم Next، Remix أو شيئًا مشابهًا. تأكد من التحقق من قسم الإعداد لدينا للعثور على الإطار الذي تعمل معه.
هل لديك أسئلة؟
Section titled هل لديك أسئلة؟إذا واجهت أي مشاكل في إعداد المتتبع على مشروع React الخاص بك، يرجى التواصل معنا في مجتمع Slack لدينا واسأل مطورينا مباشرةً!
