diff --git a/public/static/custom-events-1.png b/public/static/custom-events-1.png index 5f419446a..0d7e083c2 100644 Binary files a/public/static/custom-events-1.png and b/public/static/custom-events-1.png differ diff --git a/public/static/custom-events-2.png b/public/static/custom-events-2.png index 85dd91912..d2288bde5 100644 Binary files a/public/static/custom-events-2.png and b/public/static/custom-events-2.png differ diff --git a/src/config.ts b/src/config.ts index 4cf1cd703..97be22789 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,9 +3,13 @@ export const OPEN_GRAPH = { }; export const VERSIONS = [ { - title: '1.26.0', + title: '1.27.0', url: '', }, + { + title: '1.26.0', + url: '/v1.26.0', + }, { title: '1.25.0', url: '/v1.25.0', diff --git a/src/pages/ar-ae/v1.26.0/deployment.mdx b/src/pages/ar-ae/v1.26.0/deployment.mdx new file mode 100644 index 000000000..6990c7ee9 --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/deployment.mdx @@ -0,0 +1,33 @@ +--- +title: "النشر" +metaTitle: "النشر" +metaDescription: "نشر سهل على مزودي السحابة العامة الرئيسيين (AWS، GCP، Azure، DigitalOcean، Scaleway و OVHcloud)" +--- +import ORCard from '~/components/Card/ORCard.astro' +import IconText from '~/components/Card/IconText.astro' + +يمكن نشر OpenReplay في أي مكان. إليك الدروس التعليمية خطوة بخطوة لخيارات النشر باستخدام جميع مزودي السحابة الرئيسيين. + +## دليل خطوة بخطوة +
+ + + + + + + + + +
+ +يمكنك أيضًا [النشر من المصدر](/deployment/deploy-source). على الرغم من أن هذه الطريقة تتطلب جهدًا أكبر، إلا أنها توفر الكثير من المرونة حيث يمكنك استخدام أحدث الرموز وتخصيصها إذا لزم الأمر. + +
+ + +
diff --git a/src/pages/ar-ae/v1.26.0/deployment/deploy-aws.mdx b/src/pages/ar-ae/v1.26.0/deployment/deploy-aws.mdx new file mode 100644 index 000000000..e2991620c --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/deployment/deploy-aws.mdx @@ -0,0 +1,124 @@ +--- +layout: ~/layouts/MainLayout.astro +i18nReady: true +title: "نشر على AWS" +metaTitle: "نشر على AWS" +metaDescription: "دليل خطوة بخطوة لنشر OpenReplay على Amazon AWS." +--- +import YoutubeVideo from '~/components/YoutubeVideo.astro' + + + + +يمكن تثبيت حزمة OpenReplay على جهاز واحد ويعتبر AWS EC2 مرشحًا مثاليًا. + +## تشغيل نموذج EC2 + +1. اذهب إلى لوحة تحكم AWS EC2 +2. 'تشغيل نموذج جديد' +3. اختر AMI الخاص بك. لهذا الدليل، سنستخدم Ubuntu Server 20.04 LTS +4. اختر نوع نموذجك. المواصفات الدنيا هي 2 vCPUs، 8 جيجابايت من ذاكرة الوصول العشوائي، 50 جيجابايت من التخزين، وإلا فإن خدمات الخلفية لـ OpenReplay لن تبدأ ببساطة. لذلك، نوصي على الأقل بـ t3.large (أو ما يعادله)، وهو كافٍ لحجم منخفض/معتدل. إذا كنت تتوقع حركة مرور عالية، يجب أن تبدأ التوسع من هنا. +5. تكوين تفاصيل النموذج: قم بضبط معلمات الشبكة/الشبكة الفرعية إذا لزم الأمر أو احتفظ بالإعدادات الافتراضية +6. إضافة تخزين: ضبط الحجم إلى 50 جيجابايت (SSD للأغراض العامة (gp2)) +7. إضافة علامات: قم بضبط المعايير أو احتفظ بالإعدادات الافتراضية +8. مجموعات الأمان: احتفظ بقاعدة SSH الحالية وأضف اثنتين آخرين لـ HTTP (80) و HTTPS (443) (المصدر: 0.0.0.0/0) +9. انقر على ‘مراجعة وتشغيل’ +10. أنشئ/حمل مفتاح SSH ثم اضغط على ‘تشغيل النماذج’ + +## نشر OpenReplay + +1. تأكد من أن نموذجك قيد التشغيل ثم اتصل به: + +```bash +## From your terminal +SSH_KEY=~/Downloads/openreplay-key.pem #! wherever you've saved the SSH key +INSTANCE_IP=REPLACE_WITH_INSTANCE_PUBLIC_IP +chmod 400 $SSH_KEY +ssh -i $SSH_KEY ubuntu@$INSTANCE_IP +``` + +2. قم بتثبيت OpenReplay عن طريق تقديم النطاق الذي سيعمل عليه (مثال: DOMAIN_NAME=openreplay.mycompany.com): + +```bash +sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay +sudo chmod +x /bin/openreplay +openreplay -i DOMAIN_NAME +``` + +## تكوين TLS/SSL + +يتعامل OpenReplay مع بيانات المستخدم الحساسة وبالتالي يتطلب HTTPS للعمل. هذا إلزامي، وإلا فإن المتعقب ببساطة لن يبدأ التسجيل. الشيء نفسه ينطبق على لوحة التحكم، بدون HTTPS لن تتمكن من إعادة تشغيل جلسات المستخدمين. + +أسهل طريقة للتعامل مع SSL في AWS هي إعداد موازن التحميل (ELB) وتشغيل OpenReplay خلفه. خيار آخر هو توليد أو استخدام شهادة SSL الخاصة بك وتوجيه النطاق الفرعي الخاص بك (أي openreplay.mycompany.com) إلى نموذج OpenReplay. المزيد حول كلا الخيارين أدناه. + +### إعداد موازن التحميل في AWS (الخيار 1) + +1. اذهب إلى ‘EC2’ > ‘موازنات الحمل’ +2. ‘إنشاء موازن تحميل’ واختيار موازن تحميل التطبيقات +3. أضف مستمعًا إلى HTTPS (احتفظ بهذا فقط) وتأكد من اختيار نفس الشبكة الفرعية التي تعمل فيها نسخة OpenReplay الخاصة بك. +4. اختر شهادة موجودة (مثلاً *.mycompany.com) أو قم بتوليد واحدة جديدة من مدير شهادات AWS (ACM). يمكنك أيضًا استيراد شهادتك. +5. تكوين مجموعات الأمان: اختر مجموعة الأمان التي تم إنشاؤها مسبقًا لنموذج OpenReplay (يمكنك العثور عليها في ‘لوحة تحكم EC2’ تحت تبويب ‘الأمان’) +6. تكوين المستمع والتوجيه: احتفظ بالبروتوكول الافتراضي والمنفذ (HTTP:80). الآن، قم بإنشاء مجموعة أهداف جديدة. أعطها اسمًا واختر عناوين IP في نوع الهدف. تأكد من ضبط مسار فحص الصحة على /healthz مع الاحتفاظ بالمعايير الافتراضية الأخرى. انقر على ‘التالي’ لتسجيل الأهداف، أضف IPv4 الخاص بنسخة OpenReplay (المنافذ 80) ثم أضف الهدف إلى القائمة (يمكن العثور على العنوان IP الخاص في لوحة تحكم EC2). راجع ثم انقر على ‘إنشاء مجموعة أهداف’. +7. الآن، عد إلى صفحة إنشاء LB وقم بتوجيه هذه المجموعة الجديدة إلى المستمع LB. +8. راجع ثم ‘إنشاء موازن تحميل’ + +بمجرد الإنشاء، اذهب إلى Route 53 (أو مزود خدمة DNS الخاص بك) وأنشئ سجل A يشير إلى موازن التحميل باستخدام اسم DNS الخاص به (يمكن العثور عليه في لوحة تحكم ELB). + +أخيرًا، قم بتفعيل use-forwarded-headers، من خلال إلغاء تعليق السطر أدناه تحت قسم ingress-nginx، في /var/lib/openreplay/vars.yaml: + +```yaml +ingress-nginx: &ingress-nginx + controller: + config: + use-forwarded-headers: true +``` + +أنت الآن جاهز، يجب أن يكون بإمكانك الوصول بأمان إلى OpenReplay على النطاق الفرعي الذي قمت بإعداده للتو. يمكنك إنشاء حساب عن طريق زيارة صفحة /signup (أي openreplay.mycompany.com/signup). + +### جلب/توليد شهادتك SSL (الخيار 2) + +بدلاً من إنشاء موازن تحميل، يمكنك جلب (أو توليد) شهادة SSL الخاصة بك. + +1. أولاً، اذهب إلى Route 53 (أو مزود خدمة DNS الآخر لديك) وأنشئ سجلًا من نوع A Record. استخدم النطاق الذي قدمته مسبقًا أثناء خطوة التثبيت ووجهه إلى النموذج باستخدام العنوان IP العام (يمكن العثور عليه في لوحة تحكم EC2). + +2. إذا كنت ستجلب شهادتك الخاصة، أنشئ سر SSL باستخدام الأمر التالي: kubectl create secret tls openreplay-ssl -n app --key="private_key_file.pem" --cert="certificate.crt". + +> ملاحظة: إذا لم تكن تمتلك شهادة، قم بتوليد واحدة تتجدد تلقائيًا للنطاق الفرعي الخاص بك (الذي تم توفيره أثناء التثبيت) باستخدام Let’s Encrypt. ما عليك سوى الاتصال بنموذج OpenReplay EC2، وتشغيل cd /var/lib/openreplay/openreplay/scripts/helmcharts && bash certmanager.sh واتباع الخطوات. + +3. إذا كنت ترغب في تفعيل إعادة التوجيه من http إلى https (موصى به)، فقم بإلغاء تعليق الكتلة أدناه، تحت قسم ingress-nginx، في /var/lib/openreplay/vars.yaml: + +```yaml +ingress-nginx: &ingress-nginx + controller: + config: + ssl-redirect: true + force-ssl-redirect: true +``` + +من الجدير بالذكر أن ingress-nginx الخاص بنا يعمل افتراضيًا على المنافذ 80|443، لكن يمكن تغيير ذلك بسهولة، إذا لزم الأمر، في vars.yaml: + +```yaml +ingress-nginx: &ingress-nginx + controller: + service: + ports: + http: 80 + https: 443 +``` + +4. أخيرًا، أعد تثبيت OpenReplay NGINX: + +```bash +openreplay -R +``` + +كل شيء جاهز الآن، يجب أن يكون بإمكانك الوصول إلى OpenReplay على النطاق الفرعي الخاص بك. يمكنك إنشاء حساب عن طريق زيارة صفحة /signup (أي openreplay.mycompany.com/signup). + +## هل لديك أسئلة؟ + +إذا واجهت أي مشاكل، اتصل بـ Slack الخاص بنا واحصل على المساعدة من مجتمعنا. + +[Slack](https://slack.openreplay.com) diff --git a/src/pages/ar-ae/v1.26.0/deployment/deploy-docker.mdx b/src/pages/ar-ae/v1.26.0/deployment/deploy-docker.mdx new file mode 100644 index 000000000..0970a6f7d --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/deployment/deploy-docker.mdx @@ -0,0 +1,43 @@ +--- +layout: ~/layouts/MainLayout.astro +i18nReady: true +title: "النشر باستخدام Docker Compose" +metaTitle: "النشر باستخدام Docker Compose" +metaDescription: "دليل خطوة بخطوة لنشر OpenReplay باستخدام Docker Compose." +--- +import Aside from '~/components/Aside.astro' + + + +يمكن تثبيت مجموعة OpenReplay على جهاز واحد يعمل بـ Docker Compose. + +## المتطلبات الأساسية + +1. Ubuntu 20.04 LTS (يُوصى باستخدام الإصدار LTS) +2. عنوان IP عام مرتبط بالجهاز. يعني أن الخادم الخاص بك يمكن الوصول إليه من الإنترنت. +3. يجب أن يكون لديك اسم نطاق مرتبط بعنوان IP. +4. اختر نوع النسخة الخاصة بك. المواصفات الدنيا هي `2 vCPUs, 8 GB of RAM, 50 GB of storage`، وإلا فإن خدمات الخلفية لـ OpenReplay لن تبدأ ببساطة. لذلك، نوصي **على الأقل** بـ `t3.large` (أو ما يعادله)، والذي يكفي لحجم منخفض/معتدل. إذا كنت تتوقع حركة مرور عالية، يجب أن تبدأ بالتوسع من هنا. + +## نشر OpenReplay + +```bash +## من الطرفية الخاصة بك +SSH_KEY=~/Downloads/openreplay-key.pem #! أينما قمت بحفظ مفتاح SSH +INSTANCE_IP=REPLACE_WITH_INSTANCE_PUBLIC_IP +chmod 400 `SSH_KEY +ssh -i `SSH_KEY ubuntu@`INSTANCE_IP +``` + +2. قم بتثبيت OpenReplay من خلال توفير النطاق الذي سيعمل عليه (مثلاً DOMAIN_NAME=openreplay.mycompany.com): + +```bash +/bin/bash -c "`(curl -fsSL https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/docker-compose/docker-install.sh)" +``` + +الآن كل شيء جاهز، يجب أن يكون OpenReplay متاحًا بأمان على النطاق الذي قمت بإنشائه أولاً. يمكنك إنشاء حساب من خلال زيارة صفحة `/signup` (أي openreplay.mycompany.com/signup). + +## هل لديك أسئلة؟ + +إذا واجهت أي مشكلات، تواصل مع مجتمعنا على [Slack](https://slack.openreplay.com) واحصل على المساعدة من مجتمعنا. diff --git a/src/pages/ar-ae/v1.26.0/deployment/deploy-kubernetes.mdx b/src/pages/ar-ae/v1.26.0/deployment/deploy-kubernetes.mdx new file mode 100644 index 000000000..e0f8c77d2 --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/deployment/deploy-kubernetes.mdx @@ -0,0 +1,128 @@ +--- +title: "النشر على Kubernetes" +metaTitle: "النشر على Kubernetes" +metaDescription: "دليل خطوة بخطوة لنشر OpenReplay على Kubernetes." +--- + +يعتمد نشر OpenReplay على [Helm Charts](https://helm.sh)، مما يجعله متوافقًا تمامًا مع Kubernetes. نحن نقوم بتضمين PostgreSQL وRedis، والتي تعتبر ضرورية لـ OpenReplay. إليك كيفية القيام بذلك. + +## المتطلبات الأساسية + +يحتاج نشر OpenReplay على Kubernetes إلى: + - Kubernetes **v1.18+** + - helm **3.10+** + - **RWX PVC مع معرف المستخدم 1001 وإذن RW** (للمكونات المشتركة، إذا كان العقدة لديها أكثر من عقدة واحدة). تأكد من إلغاء التعليق على الكتلة أدناه في `/var/lib/openreplay/vars.yaml` وتحديث اسم PVC لمكونات **sink, storage** و **chalice**: + +```yaml +# في حالة وجود عدة عقد في مجموعة Kubernetes، +# سيتعين عليك إنشاء PVC RWX للمكونات المشتركة. +# إذا كانت عقدة واحدة، سنستخدم hostVolume، وهو الافتراضي للنسخة المجتمعية/oss. +pvcRWXName: "hostPath" +``` + +يتطلب OpenReplay أيضًا **2 vCPUs، 8 جيجابايت من الرام، 50 جيجابايت من التخزين** للعمل بشكل صحيح، وإلا فإن خدمات الخلفية لـ OpenReplay لن تبدأ ببساطة. هذه المواصفات كافية لحجم معتدل، ولكن إذا كنت تتوقع حركة مرور عالية، فيجب عليك التوسع من هنا. + +تم اختبار النشر على المنصات التالية: +- مجموعة Kube المحلية بعقدة واحدة +- Google Kubernetes Engine (GKE) +- Amazon Elastic Kubernetes Service (EKS) +- Microsoft Azure Kubernetes Service (AKS) +- Scaleway Elements Kubernetes (Kapsule) + +## نشر OpenReplay + +قم بالاتصال بمجموعتك وانسخ مستودع OpenReplay: + +```bash +git clone https://github.com/openreplay/openreplay.git +cd openreplay/scripts/helmcharts +``` + +> إذا كان هناك عدة عقد في مجموعة Kubernetes، +ستحتاج إلى إنشاء PVC RWX (على سبيل المثال efs، في حالة AWS) لمشاركة البيانات بين الحاويات. +إذا كانت عقدة واحدة، سنستخدم hostVolume، وهو الافتراضي للتثبيت المجتمعي. + +ثم افتح الملف `vars.yaml` باستخدام الأمر `vim vars.yaml` ثم استبدل: +- `domainName`: هذا هو المكان الذي سيكون فيه OpenReplay متاحًا (أي openreplay.mycompany.com) +- `postgresqlPassword`: كلمة مرور Postgres (قم بتعيينها أو توليد واحدة عشوائية) +- `accessKey`: مطلوب لخدمة تخزين الكائنات (استخدم سلسلة عشوائية) +- `secretKey`: مطلوب لخدمة تخزين الكائنات (استخدم سلسلة عشوائية) +- `jwt_secret`: مطلوب للواجهة البرمجية للتطبيقات API (استخدم سلسلة عشوائية) + +تأكد من تثبيت [helm](https://helm.sh/docs/intro/install/) ثم قم بإعداد OpenReplay: + +```bash +cd openreplay/scripts/helmcharts +helm upgrade --install databases ./databases -n db --create-namespace --wait -f ./vars.yaml --atomic +helm upgrade --install openreplay ./openreplay -n app --create-namespace --wait -f ./vars.yaml --atomic +``` + +## تكوين TLS/SSL + +يتعامل OpenReplay مع بيانات المستخدم الحساسة وبالتالي يتطلب HTTPS للعمل. هذا إلزامي، وإلا فإن المتتبع لن يبدأ التسجيل ببساطة. نفس الأمر بالنسبة للوحة التحكم، بدون HTTPS لن تتمكن من إعادة تشغيل جلسات المستخدم. + +إذا كان مجموعة Kubernetes الخاصة بك في السحاب (مثل EKS، AKS أو GKE)، فإن أسهل طريقة للتعامل مع SSL هي إعداد موازن تحميل السحاب وتشغيل مجموعتك خلفه. خيار آخر هو إنشاء أو استخدام شهادة SSL الخاصة بك وتوجيه النطاق الفرعي الخاص بك (أي openreplay.mycompany.com) إلى مجموعتك. المزيد عن كلا الخيارين أدناه. + +### إعداد موازن تحميل السحاب (الخيار 1) + +أحد الفوائد الرئيسية لتشغيل OpenReplay خلف موازن تحميل السحاب هو أن يتم إدارة الشهادة من قبل مزود السحاب. فيما يلي أدلة خطوة بخطوة حول كيفية إنشاء: +- [AWS - Elastic Load Balancing](/deployment/deploy-aws#setupawsloadbalancer(option1)) +- [Google - Cloud Load Balancing](/deployment/deploy-gcp#setupgoogleloadbalancer(option1)) +- [Azure - Load Balancer]([/deployment/deploy-azure#setupazurefrontdoor(option1)) +- [Digital Ocean - تكوين TLS/SSL](/deployment/deploy-digitalocean#configuretls/ssl) + +ثم تأكد من أن مجموعتك توفر [نوع الخدمة](https://kubernetes.io/ar/docs/concepts/services-networking/service/#loadbalancer) `LoadBalancer` حتى يتم توجيه حركة المرور من موازن تحميل السحاب إلى الخلفية لـ OpenReplay. الآن، اذهب إلى مزود خدمة DNS الخاص بك وأنشئ `سجل A` يشير إلى المجموعة باستخدام عنوان IP العام لها. + +أخيرًا، قم بتمكين `use-forwarded-headers`، من خلال إلغاء التعليق على السطر أدناه تحت قسم `ingress-nginx`، في `/var/lib/openreplay/vars.yaml`: + +```yaml +ingress-nginx: &ingress-nginx +controller: +config: +use-forwarded-headers: true +``` + +أنت الآن جاهز، يجب أن يكون OpenReplay متاحًا على نطاقك الفرعي. يمكنك إنشاء حساب بزيارة صفحة `/signup` (أي openreplay.mycompany.com/signup). + +### جلب/إنشاء شهادتك SSL (الخيار 2) + +بديلًا لإنشاء موازن التحميل، يمكنك جلب (أو إنشاء) شهادتك SSL الخاصة. + +1. أولاً، اذهب إلى مزود خدمة DNS الخاص بك وأضف `سجل A`. استخدم النطاق الذي قدمته سابقًا أثناء خطوة التثبيت ووجهه إلى المجموعة باستخدام عنوان IP العام لها. + +2. إذا كنت تجلب شهادتك الخاصة، أنشئ سر SSL باستخدام الأمر التالي: `kubectl create secret tls openreplay-ssl -n app --key="private_key_file.pem" --cert="certificate.crt"`. + +> **ملاحظة:** إذا لم يكن لديك شهادة، قم بإنشاء واحدة تتجدد تلقائيًا لنطاقك الفرعي (الذي قدمته أثناء التثبيت) باستخدام Let's Encrypt. ما عليك سوى الاتصال بمثيل OpenReplay، وتشغيل `cd /var/lib/openreplay/openreplay/scripts/helmcharts && bash certmanager.sh` واتباع الخطوات. + +3. إذا كنت ترغب في تمكين إعادة التوجيه من http إلى https (موصى به)، فقم بإلغاء التعليق على الكتلة أدناه، تحت قسم `ingress-nginx`، في `/var/lib/openreplay/vars.yaml`: + +```yaml +ingress-nginx: &ingress-nginx +controller: +config: +ssl-redirect: true +force-ssl-redirect: true +``` + +تجدر الإشارة إلى أن `ingress-nginx` الخاص بنا يعمل افتراضيًا على المنافذ `80|443`، ولكن يمكن تغيير ذلك بسهولة، إذا لزم الأمر، في `vars.yaml`: + +```yaml +ingress-nginx: &ingress-nginx +controller: +service: +ports: +http: 80 +https: 443 +``` + +4. أخيرًا، أعد تثبيت OpenReplay NGINX: + +```bash +openreplay -R +``` + +أنت الآن جاهز، يجب أن يكون OpenReplay متاحًا على نطاقك الفرعي. يمكنك إنشاء حساب بزيارة صفحة `/signup` (أي openreplay.mycompany.com/signup). + +## هل لديك أسئلة؟ + +يرجى إعلامنا على Slack أو بمشكلة على Github إذا كنت تواجه صعوبات على منصتك. سنكون سعداء بمساعدتك في تشغيلها. diff --git a/src/pages/ar-ae/v1.26.0/deployment/deploy-ubuntu.mdx b/src/pages/ar-ae/v1.26.0/deployment/deploy-ubuntu.mdx new file mode 100644 index 000000000..e763ecfbc --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/deployment/deploy-ubuntu.mdx @@ -0,0 +1,73 @@ +--- +title: "النشر على Ubuntu" +metaTitle: "النشر على Ubuntu" +metaDescription: "دليل خطوة بخطوة لنشر OpenReplay على أي جهاز Ubuntu." +layout: ~/layouts/MainLayout.astro +i18nReady: true +--- + +يمكن تثبيت حزمة OpenReplay على جهاز واحد يعمل بنظام Ubuntu. إليك كيفية القيام بذلك. + +## المتطلبات الأساسية + +- يجب أن يكون نظام التشغيل *Ubuntu Server 20.04 Focal Fossa*. +- الحد الأدنى لمواصفات الجهاز الذي يعمل بـ OpenReplay هو `2 vCPUs, 8 GB of RAM, 50 GB of storage`، وإلا فإن خدمات الخلفية لـ OpenReplay لن تبدأ ببساطة. يجب أن يكون هذا كافيًا لحجم منخفض/معتدل. إذا كنت تتوقع حركة مرور عالية، يجب أن تبدأ بالتوسع من هنا. +- عنوان IP عام يشير إلى جهازك. + +## نشر OpenReplay + +1. تأكد من تشغيل جهازك ثم قم بالاتصال به عبر SSH كمستخدم root + +2. قم بتثبيت OpenReplay من خلال توفير النطاق الذي سيعمل عليه (مثلاً DOMAIN_NAME=openreplay.mycompany.com): + +```bash +sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay +sudo chmod +x /bin/openreplay +openreplay -i DOMAIN_NAME +``` + +## تكوين TLS/SSL + +يتعامل OpenReplay مع بيانات المستخدم الحساسة وبالتالي يتطلب HTTPS للعمل. هذا إلزامي، وإلا فإن المتتبع ببساطة لن يبدأ التسجيل. وكذلك الأمر بالنسبة للوحة التحكم، بدون HTTPS لن تتمكن من إعادة تشغيل جلسات المستخدمين. + +يجب عليك إحضار (أو توليد) شهادة SSL الخاصة بك. + +1. أولاً، اذهب إلى مزود خدمة DNS الخاص بك، عدل منطقة DNS الخاصة بك وأنشئ سجل `A Record`. استخدم النطاق الذي قدمته سابقًا أثناء خطوة التثبيت ووجهه إلى الجهاز باستخدام عنوان IP العام الخاص به. + +2. إذا كنت تحضر شهادتك الخاصة، أنشئ سر SSL باستخدام الأمر التالي: `kubectl create secret tls openreplay-ssl -n app --key="private_key_file.pem" --cert="certificate.crt"`. + +> **ملاحظة:** إذا لم يكن لديك شهادة، قم بتوليد واحدة تتجدد تلقائيًا لنطاقك الفرعي (الذي قدمته أثناء التثبيت) باستخدام Let's Encrypt. ما عليك سوى الاتصال بجهاز OpenReplay، وتشغيل `cd /var/lib/openreplay/openreplay/scripts/helmcharts && bash certmanager.sh` واتبع الخطوات. + +3. إذا كنت ترغب في تمكين إعادة التوجيه من http إلى https (موصى به)، قم بإلغاء التعليق على الكتلة أدناه، تحت قسم `ingress-nginx`، في `/var/lib/openreplay/vars.yaml`: + +```yaml +ingress-nginx: &ingress-nginx +controller: +config: +ssl-redirect: true +force-ssl-redirect: true +``` + +من المهم ذكر أن `ingress-nginx` الخاص بنا يعمل بشكل افتراضي على المنافذ `80|443`، ولكن يمكن تغيير ذلك بسهولة، إذا لزم الأمر، في `vars.yaml`: + +```yaml +ingress-nginx: &ingress-nginx +controller: +service: +ports: +http: 80 +https: 443 +``` + +4. أخيرًا، أعد تثبيت OpenReplay NGINX: + +```bash +openreplay -R +``` + +أنت الآن جاهز، يجب أن يكون OpenReplay متاحًا على نطاقك الفرعي. يمكنك إنشاء حساب بزيارة صفحة `/signup` (أي openreplay.mycompany.com/signup). + +## هل لديك أسئلة؟ + +إذا واجهت أي مشاكل، تواصل مع مجتمعنا على [Slack](https://slack.openreplay.com/) واحصل على المساعدة من مطورينا. + diff --git a/src/pages/ar-ae/v1.26.0/getting-started.mdx b/src/pages/ar-ae/v1.26.0/getting-started.mdx new file mode 100644 index 000000000..5c68f6e1f --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/getting-started.mdx @@ -0,0 +1,156 @@ +--- +title: "البدء" +metaTitle: "توثيق OpenReplay" +metaDescription: "هو مجموعة إعادة تشغيل جلسات مفتوحة المصدر ومستضافة ذاتيًا تتيح لك رؤية ما يفعله المستخدمون في تطبيق الويب الخاص بك، مما يساعدك على استكشاف الأخطاء وإصلاحها بشكل أسرع." + +--- +import ORCard from '~/components/Card/ORCard.astro' +import IconText from '~/components/Card/IconText.astro' + +نحن هنا لمساعدتك على البدء باستخدام منصتنا والبدء في جني فوائد متعقبنا القوي. اتبع الخطوات التالية للبدء والتشغيل: + +## نشر OpenReplay + +
+
+
+
+
+ + + +
+

النشر في أي مكان

+
+ اتبع دليلنا خطوة بخطوة لنشره على السحابات العامة والمنصات الرئيسية. +
+
+ +
+ + + + +
+
+
+ تعرف أكثر +
+
+
+ + +## إعداد +
+
+
+
+
+
+ + + +
+

إعداد المتعقب

+
+ قم بإعداد OpenReplay في دقائق وابدأ في تسجيل جلسات المستخدمين. +
+
+
+ + + + + + + +
+
+
+ + تعرف أكثر + +
+
+
+
+
+
+
+
+ + + +
+

تكوين

+
+ قم بتكوين المتعقب لالتقاط المزيد من المعلومات. +
+
+
+ +
+
+
+ + تعرف أكثر + +
+
+
+
+
+
+
+
+ + + +
+

توسيع

+
+ قم بتوسيع تجربة التسجيل الخاصة بك باستخدام الإضافات. +
+
+
+ +
+
+
+ + تعرف أكثر + +
+
+
+
diff --git a/src/pages/ar-ae/v1.26.0/home.mdx b/src/pages/ar-ae/v1.26.0/home.mdx new file mode 100644 index 000000000..6b65600c1 --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/home.mdx @@ -0,0 +1,179 @@ +--- +title: "توثيق OpenReplay" +metaTitle: "توثيق OpenReplay" +metaDescription: "OpenReplay هو مجموعة إعادة تشغيل جلسات مفتوحة المصدر ومستضافة ذاتيًا تتيح لك رؤية ما يفعله المستخدمون في تطبيق الويب الخاص بك، مما يساعدك على استكشاف الأخطاء وإصلاحها بشكل أسرع." +baseClass: page-index + +layout: ~/layouts/LandingPage.astro +--- +import ORCard from '~/components/Card/ORCard.astro' +import IconText from '~/components/Card/IconText.astro' + + + +
+
+
+
+
+ + + +
+

نشر

+
+ يمكن نشر OpenReplay في أي مكان. اتبع دليلنا خطوة بخطوة لنشره على السحابات العامة والمنصات الرئيسية. +
+
+ +
+ + + + +
+
+
+ تعرف أكثر +
+
+
+ +
+
+
+
+
+ + + +
+

المتعقب

+
+
+
+ +
+ +
+
+ + +{ +/* +## Looking for help? + - [Getting started with OpenReplay](/getting-started/): Learn how what you need to do to get started and record your first session. +- [Upgrading OpenReplay](/deployment/upgrade/): Learn how to upgrade from your current version to the latest supported version of OpenReplay. +- [Troubleshooting](/troubleshooting): Troubleshoot any issues with your current OpenReplay instance. +- [Sanitizing data](/installation/sanitize-data/): Learn how to protect your user's privacy and still get the most out of your replays. +*/} + +
+

تبحث عن مساعدة؟

+
+ + + البدء + + + + ترقية + + + + استكشاف الأخطاء وإصلاحها + + + + تنظيف البيانات + +
+
+ +
+ + + + + +
+ +
+

انضم إلى مجتمعنا

+
+ +
+
+
+
+

المساهمة في وثائقنا

+
+ اجعل OpenReplay في متناول المزيد من الناس! ترجم وثائقنا إلى لغتك. +
+ + +
+
+
+
+

انضم إلى المحادثة

+
+ شارك خبرتك مع المجتمع، اطرح الأسئلة واعثر على الإجابات التي تحتاجها من أقرانك. +
+ + +
+
+
+
+

شاهد الدروس المصورة

+
+ استكشف شروحات الميزات والدروس الخطوة بخطوة للحصول على إرشادات واضحة حول كيفية القيام بذلك. +
+ +
+
diff --git a/src/pages/ar-ae/v1.26.0/sdk/constructor.mdx b/src/pages/ar-ae/v1.26.0/sdk/constructor.mdx new file mode 100644 index 000000000..8c01e456c --- /dev/null +++ b/src/pages/ar-ae/v1.26.0/sdk/constructor.mdx @@ -0,0 +1,261 @@ +--- +title: "JavaScript SDK - تهيئة SDK" +metaTitle: "JavaScript SDK - تهيئة SDK" +metaDescription: "خيارات التكوين لطريقة المُنشئ في المتتبع" +--- +import Aside from '~/components/Aside.astro' +import ORCard from '~/components/Card/ORCard.astro' + +## التثبيت + +سيقوم السطر التالي بتثبيت المتتبع ومعه الـ SDK لتتمكن من الاستفادة من جميع ميزات المتتبع. + +```bash +npm i @openreplay/tracker +``` + +## التهيئة +عند إنشاء مثيل لمتتبع OpenReplay، هناك عدة خيارات تكوين يمكنك تقديمها لتخصيص العديد من جوانب التسجيل وتجربة التسجيل. + +يجب عليك تعيين خيار `projectKey` في المُنشئ. يمكنك الحصول على هذه القيمة من لوحة تحكم OpenReplay الخاصة بك تحت 'التفضيلات > المشاريع'. + + + + +### تطبيقات الصفحة الواحدة (SPA) +إذا كان موقعك الإلكتروني هو **تطبيق صفحة واحدة (SPA)** استخدم الكود أدناه: + +```js +import { tracker } from '@openreplay/tracker' + +tracker.configure({ + projectKey: PROJECT_KEY, + ingestPoint: "https://openreplay.mydomain.com/ingest", // عند استخدام النسخة المستضافة ذاتيًا +}) + +tracker.start(); // يُرجع وعدًا بمعلومات الجلسة (sessionID، sessionHash، userUUID) +``` + +### العرض من جانب الخادم (SSR) +إذا كان تطبيق الويب الخاص بك **معروضًا من جانب الخادم (SSR)** (مثل NextJS، NuxtJS) استخدم الكود أدناه. تأكد من أن `tracker.start()` يتم استدعاؤه بمجرد بدء التطبيق (في `useEffect` أو `componentDidMount`). + +```js +import OpenReplay from '@openreplay/tracker/cjs'; +//... +const tracker = new OpenReplay({ + projectKey: PROJECT_KEY, +}); +//... +function MyApp() { + useEffect(() => { // استخدم componentDidMount في حالة مكون React من النوع Class + tracker.start(); // يُرجع وعدًا بمعلومات الجلسة (sessionID، sessionHash، userUUID) + }, []) +} +``` + + + +## مثال + +```js +import OpenReplay from '@openreplay/tracker/cjs'; +//... +const tracker = new OpenReplay({ + projectKey: PROJECT_KEY, + ingestPoint: "https://openreplay.mydomain.com/ingest", // عند التعامل مع النسخة المستضافة ذاتيًا من OpenReplay + capturePerformance: true, + __DISABLE_SECURE_MODE: true // للاختبار المحلي +}); +``` + +## خيارات التهيئة + +هناك مجموعة من الخيارات التي يمكنك تمريرها إلى المُنشئ. فقط `projectKey` مطلوب. + +### الأغراض العامة + +- `projectKey: string` معرف المشروع الذي تقوم بتتبعه. +- `sessionHash?: string` تجزئة الجلسة الأولية. هذا مفيد عندما تنتقل الجلسات عبر نطاقات فرعية مختلفة في تطبيق الويب الخاص بك ولكنك تريد دمجها في تسجيل واحد. في حالة عدم إمكانية متابعة الجلسة (غير موجودة أو منتهية)، سيبدأ المتتبع تلقائيًا جلسة جديدة. يتم إرجاعه أيضًا عند `stop()`. مزيد من التفاصيل حول هذا [هنا](/troubleshooting/session-recordings#replaysarebrokenacrosssubdomains). +- `ingestPoint?: string` نطاق OpenReplay الخاص بك (مثل https://openreplay.mydomain.com/ingest)، والذي سيرسل المتتبع إليه الأحداث. هذا اختياري لمستخدمي OpenReplay Cloud. الافتراضي: `https://api.openreplay.com/ingest` (يشير إلى OpenReplay Cloud). +- `revID?: string` معرف الإصدار لتطبيق الويب الخاص بك. مفيد عند البحث عن مشكلات تحدث في إصدار محدد. +- `resourceBaseHref?: string` يشير إلى النطاق العام حيث يمكن لـ OpenReplay جلب الأصول (الأنماط، الخطوط، والرموز). نظرًا لأنها مطلوبة لإعادة تشغيل الجلسة بشكل صحيح، فإن هذا الخيار مفيد لتجاوز قيد استضافة موقعك (وبالتالي الأصول) في نطاق خاص. مثال: `https://mypublicsite.com/assets/`. +- `captureIFrames?: boolean` لالتقاط جميع إطارات iframe من نفس النطاق في تطبيق الويب الخاص بك. إذا كنت ترغب في تتبع إطار iframe محدد، ببساطة أضف سمة HTML `data-openreplay-capture` إلى علامة ` +``` + +Add the `crossdomain` option following to your tracker constructor: + +```js +tracker.configure({ + projectKey: PROJECT_KEY, + crossdomain: { + enabled: true + }, + captureIFrames: true +}); +``` + +Then initialize the tracker instance inside the desired iFrame and add `crossdomain.parentDomain` to its constructor: + +```js +tracker.configure({ + projectKey: PROJECT_KEY, + crossdomain: { + // Specifies the domain of the parent window + // If not specified, it will be set to '*' + // Which means that child window will send messages to all domains inside the browser window + // Consult your CSP settings to ensure that '*' is allowed or specify the parent domain + parentDomain: '*', + enabled: true + } +}); +``` + +Please note that if you're using tracker snippet, we recommend using regular (openreplay.js) instance instead of `openreplay-assist.js` for child iframes (since assist session should connect to parent instance only). + +## Have questions? + +If you encounter any issues, connect to our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com) and get help from our community. diff --git a/src/pages/en/v1.26.0/session-replay/error-reporting.mdx b/src/pages/en/v1.26.0/session-replay/error-reporting.mdx new file mode 100644 index 000000000..f0f86c89d --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/error-reporting.mdx @@ -0,0 +1,104 @@ +--- +title: "Error Tracking" +metaTitle: "Error Tracking" +metaDescription: "Learn how to track and resolve errors with OpenReplay. Get detailed visibility into errors across your web applications and troubleshoot with full context." +--- + +Gain high-level and granular visibility into errors within your web applications. With OpenReplay, you can troubleshoot with full context, enabling faster resolution of issues. + +## Error tracking insights across different views + +### From the Sessions view + +1. Navigate to the session view > **Errors** tab +2. **Use Omnisearch**: select the event **“Error Message”** and enter the specific error message. + +
+ Errors in sessions +
+ +### Inside a single Session + +1. Navigate to **Console > Errors Tab** +2. Open the error to view full sourcemaps. +3. Click on **"Find all sessions with this error"** to see the list of sessions where the error occurred. + +
+ Session error +
+ +### From the Cards view + +1. Navigate to Cards > Add Card > Monitors +2. Select **Table of Errors** card + +{/*
+ Table of errors +
*/} + +## Manually logging exceptions + +The OpenReplay tracker supports logging three types of errors: + +1. **Caught Exceptions** - [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) +2. **Rejected Promises** - [PromiseRejectionEvent](https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent) +3. **Error Events (onError)** - [ErrorEvent](https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent) + +All of these can be reported using a single method: + +```javascript +tracker.handleError(error, metaObject); // metaObject is optional and is a flat object +``` + +Let’s review examples for each type of error: + +### Caught Exceptions (Error) + +By default, caught exceptions are not logged to the ‘Console’ tab. To report an error, use the following pattern: + +```javascript +try { + // application code +} catch (err) { + // application code that handles the error + tracker.handleError(err, metaObject); // metaObject is optional and is a flat object +} +``` + +### Rejected Promises (PromiseRejectionEvent) + +If a promise is rejected and needs to be reported to OpenReplay, use this approach: + +```javascript +function myFunc() { + doSomeAsyncStuff() + .then((result) => { + // application code + }) + .catch(promiseRejectionErr => { + // application code to handle the error + tracker.handleError(promiseRejectionErr, metaObject); // metaObject is optional and is a flat object + }); +} +``` + +### onError (ErrorEvent) + +Report errors triggered by events, such as an `` element failing to load: + +```javascript + +

+ + +``` + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/session-replay/generate-e2e-test.mdx b/src/pages/en/v1.26.0/session-replay/generate-e2e-test.mdx new file mode 100644 index 000000000..c31339ec0 --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/generate-e2e-test.mdx @@ -0,0 +1,113 @@ +--- +title: "Convert Session Events to E2E Test" +metaTitle: "Converting Session Recordings to Automated E2E Test Code" +metaDescription: "Learn how to transform your OpenReplay session recordings into automated E2E test code for Cypress, Playwright, and Puppeteer" +--- + +The Convert Session Events to E2E Test feature lets you transform recorded user sessions into automated end-to-end test code. This powerful capability bridges the gap between real user behavior and test automation, allowing you to quickly replicate user journeys in your testing framework of choice. + +## How it works: convert sessions into E2E test code + +1. Navigate to the **Sessions** view in the dashboard +2. Select any recorded session to open the **Session Replay** view +3. Click on the **Activity** tab to view the event timeline +4. Look for the **Copy Events** icon next to the search bar +5. Click the icon to open the export options dropdown + +
+ Convert Session Events to E2E Test +
+ +## Using Convert Session Events to E2E Test + +### Basic Usage + +1. Click the **Copy Events** icon in the Activity view +2. From the dropdown, select your desired testing framework (Cypress, Playwright, or Puppeteer) +3. Choose between **Events Only** or **Complete Test** +4. Apply "Select events on the timeline" to select which events to include +5. Click **Copy** to copy the generated code to your clipboard +6. Paste directly into your test file + +### Export Options + +#### Testing Frameworks + +The feature supports exporting to three popular testing frameworks: + +- **Cypress** - Web testing framework focused on developer experience and reliability +- **Playwright** - Modern testing library with cross-browser support +- **Puppeteer** - Headless browser automation library + +
+ Testing Frameworks +
+ +#### Export Types + +You can choose between two export types: + +- **Events Only** - Generates only the action commands without any test structure +- **Complete Test** - Creates a fully structured test with appropriate boilerplate + +#### Event Selection + +The timeline selection tool allows you to: + +- Select a specific range of events to include in your export +- Drag handles to adjust the start and end points + +## Example Output + +### Cypress Example + +**Events Only:** +```javascript +cy.visit('/en/deployment/') +cy.get('a:nth-of-type(9)').click() +cy.visit('/en/deployment/deploy-docker/') +cy.get('.active li:nth-of-type(13) > a').click() +cy.visit('/en/deployment/upgrade/') +cy.get('.active > .justify-between').click() +cy.get('.left-nav-parent > li:nth-of-type(4) > .flex').click() +cy.get('.active li:nth-of-type(5) > a').click() +cy.visit('/en/using-or/next/') +cy.get('.left-nav-parent > li:nth-of-type(5) > .flex').click() +cy.get('.left-nav-parent > li:nth-of-type(6) > .flex').click() +cy.visit('/en/installation/') +cy.get('.active li:nth-of-type(2) > a').click() +cy.visit('/en/installation/identify-user/') +cy.get('li:nth-of-type(7) > .flex').click() +cy.get('.logo-clickarea').click() +``` + +**Complete Test:** +```javascript +// cypress/e2e/session_replay_test.cy.js + +describe('Deployment - OpenReplay Documentation', () => { + it('Navigates through /en/deployment/', () => { + cy.visit('/en/deployment/') + cy.get('a:nth-of-type(9)').click() + cy.visit('/en/deployment/deploy-docker/') + cy.get('.active li:nth-of-type(13) > a').click() + cy.visit('/en/deployment/upgrade/') + cy.get('.active > .justify-between').click() + cy.get('.left-nav-parent > li:nth-of-type(4) > .flex').click() + cy.get('.active li:nth-of-type(5) > a').click() + cy.visit('/en/using-or/next/') + cy.get('.left-nav-parent > li:nth-of-type(5) > .flex').click() + cy.get('.left-nav-parent > li:nth-of-type(6) > .flex').click() + cy.visit('/en/installation/') + cy.get('.active li:nth-of-type(2) > a').click() + cy.visit('/en/installation/identify-user/') + cy.get('li:nth-of-type(7) > .flex').click() + cy.get('.logo-clickarea').click() + }) +}) +``` + + +## Have questions? + +If you have any issues creating E2E tests from your sessions, please contact us on our [Slack community](https://slack.openreplay.com/) and ask our devs directly! \ No newline at end of file diff --git a/src/pages/en/v1.26.0/session-replay/highlights.mdx b/src/pages/en/v1.26.0/session-replay/highlights.mdx new file mode 100644 index 000000000..4fc95c7da --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/highlights.mdx @@ -0,0 +1,105 @@ +--- +title: "How to use Highlights" +metaTitle: "Taking advantage of the OmniSearch" +metaDescription: "Take advantage of the powerful search feature in OpenReplay" +--- +import Aside from '~/components/Aside.astro'; + + +**Highlights** provide a structured way to isolate and save meaningful portions of a session replay. Whether it’s an error occurrence, a user interaction, or a notable event, Highlights ensure these moments are easily accessible for future review, collaboration, or reporting. + +## Use cases + +When reviewing a session replay, use **Highlights** to: + +1. Isolate and save the portion where a user encountered a bug (eg: failed API call, a console error…). +2. Identify moments where user behavior reveals usability issues or friction points. +3. Provide context to inform design improvements or future iterations. + +## How it works: create and save a highlight + +**Step 1:** Open a session replay, locate the key portion and select the **'Highlights'** button in the menu bar. + +
+ highlights +
+ +**Step 2:** Use the draggable slider on the timeline or manually modify the **From** and **To** timestamps. + +
+ highlights +
+ +**Step 3:** Add a note in the comments box to provide context or explanation. + +
+ highlights +
+ +**Step 4:** Assign tags _(Issue, Design, Note)_ to categorize the highlight. + +
+ highlights +
+ +**Step 5**: Click on **‘Save Highlight’** + +
+ highlights +
+ +Once saved, the highlight becomes accessible in the **Highlights** tab of your OpenReplay account. + +## Managing Highlights + +#### Access saved Highlights + +Open the **Highlights** tab to view all saved entries. Highlights can be filtered by: + +- Tags (Issue, Design, Note). +- Creator (My Highlights or Team Highlights). +- Search terms (e.g., note content). + +
+ highlights +
+ +#### Play replay from the Highlighted portion + +Replay the session starting at the saved portion. Use the **Navigate to Full Session** button to review the complete session from the relevant timestamp. + +
+ highlights +
+ + + +## Collaboration and sharing + +- **Adjust visibility:** + + Define whether a highlight is visible only to you (Private) or to your team (Team). + +- **Share Highlights:** + + Use the **Copy Link** option to share a specific highlight with colleagues. + +- **Edit or delete Highlights:** + + Modify the notes, or remove the highlight if it is no longer relevant. + +
+ highlights +
+ +## **Make the most out of Highlights** + +1. Focus on saving only the most relevant portions of session replays. +2. Use notes and tags to provide context and categorize highlights for quick reference. +3. Share highlights with your team to quickly address issues or inform design improvements. + +## Have questions? + +If you have any issues creating funnels in you project, please contact us on our [Slack community](https://slack.openreplay.com/) and ask our devs directly! \ No newline at end of file diff --git a/src/pages/en/v1.26.0/session-replay/identify-user.mdx b/src/pages/en/v1.26.0/session-replay/identify-user.mdx new file mode 100644 index 000000000..2b0353eff --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/identify-user.mdx @@ -0,0 +1,87 @@ +--- +title: "Identify a User" +metaTitle: "Identify a User" +metaDescription: "How to associate an internal-user id with the session recording." +--- +import YoutubeVideo from '~/components/YoutubeVideo.astro' + + + +Associate your internal-user-id with the session being recorded by following the below steps. + +### With NPM + +Inject the userID on tracker' start: + +```js +tracker.configure({ + projectKey: PROJECT_KEY +}); + +tracker.start({ + userID: "john@doe.com", + metadata: { + balance: "10M", + plan: "free" + } +}); +``` + +If that's not possible (userID is known later in the navigation flow, so way after the tracker starts), then call the `setUserID` method to identify your users. The identity of the user can be changed anytime during the session by calling `setUserID`. However, OpenReplay will only keep the last injected user ID. + +```js +tracker.setUserID('john@doe.com'); // after tracker.start() +``` + +### With JavaScript snippet + +Below is an example on how to inject the userID using the snippet. Note the `startOpts` variable/line to inject the userID. + +```js + + +``` + +If that's not possible (userID is known later in the navigation flow, so way after the tracker starts), then instead call the `setUserID` method to identify your users. The identity of the user can be changed anytime during the session by calling `setUserID`. However, OpenReplay will only keep the last injected user ID. + +```js + + + ... + OpenReplay.setUserID("john@doe.com"); // set the userID later in your code + ... +``` + +### With iOS app + +Just call `setUserID(String)` at any point during your replay. + +```swift +import ORTracker + +// ... your code + +ORTracker.shared.setUserID(_ userID: String) +``` + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/session-replay/metadata.mdx b/src/pages/en/v1.26.0/session-replay/metadata.mdx new file mode 100644 index 000000000..fdc6cca99 --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/metadata.mdx @@ -0,0 +1,115 @@ +--- +title: "Send Metadata" +metaTitle: "Metadata" +metaDescription: "How to pass user metadata to OpenReplay. Also known as traits or user variables in other platforms." +--- +import Aside from '~/components/Aside.astro' + +Metadata allows you to add additional information about users to session replays in the form of key-value pairs. This feature enhances your ability to filter and search session recordings, making it easier to identify relevant sessions. Refer to this [tutorial](/tutorials/metadata) for more details on how to send metadata. + + + +## Adding Metadata keys to a project + +To set up metadata keys: + +1. Navigate to **Preferences > Projects** in OpenReplay. +2. Choose the project to which you want to add metadata. +3. Navigate to the Metadata tab +4. Click **Add Metadata**. +5. Enter the desired key name in the **Field Name** input. +6. Click **Add** to save the metadata key. + +
+ Send Metadata +
+ + +> **Limit:** You can add up to 10 metadata keys per project. + +## Injecting Metadata into Session Replays + +Once your metadata keys are defined, you can send metadata when recording sessions. Below are the available implementation methods: + +### 1. Using NPM + +Inject metadata when starting the tracker: + +```js +tracker.start({ + userID: "john@doe.com", + metadata: { + balance: "10M", + plan: "free" + } +}); +``` + +If metadata is only available after the tracker starts, use the `setMetadata` method: + +```javascript +tracker.setMetadata('plan', 'free'); // after tracker.start() +``` + +### 2. Using JavaScript Snippet + +To include metadata with the snippet, modify the `startOpts` variable: + +```js + + +``` + +If metadata becomes available later: + +```html + +``` + +### 3. Using iOS SDK + +Inject metadata in your iOS app: + +```swift +import ORTracker + +ORTracker.shared.setMetadata(key: String, value: String) +``` + +## Filtering and searching sessions with Metadata + +Metadata keys allow you to filter and search sessions in OpenReplay: + +1. Open the **Omni-Search** in the Sessions view. +2. Select your metadata key (e.g., `plan`). +3. Enter the metadata value (e.g., `free`) to filter session recordings. + +
+ Filter Metadata +
+ +This feature enables quick and precise identification of sessions based on user-specific details. + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/session-replay/omnisearch.mdx b/src/pages/en/v1.26.0/session-replay/omnisearch.mdx new file mode 100644 index 000000000..349c2dcbc --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/omnisearch.mdx @@ -0,0 +1,118 @@ +--- +title: "How to use OmniSearch" +metaTitle: "Taking advantage of the OmniSearch" +metaDescription: "Take advantage of the powerful search feature in OpenReplay" +--- + +With the OpenReplay tracker set up and capturing user sessions, you're ready to uncover what's really happening in your product. OmniSearch helps you debug issues, identify what’s going wrong, and understand user behavior in detail. It bridges the gap between quantitative data and the qualitative insights hidden within your session replays. + + +## Getting started with OmniSearch + +The OmniSearch component is available across various views in OpenReplay. Here, we focus on how the OmniSearch features in the Session Replays view, the primary interface for exploring all session replays. + +1. **Events dropdown:** Choose from auto-captured user interactions and devTools events +
+ Events dropdown +
+2. **Filters dropdown:** Apply filters to narrow down results by user data, session properties, issues, and metadata +
+ Filters dropdown +
+3. **Logic controls:** Switch between sequential ("Then") and parallel ("And"/"OR") events occurrence. +
+ Logic control options +
+4. **Search operators:** Refine searches with "is," "contains," "starts with," and more +
+ operators +
+5. **Drag-and-drop events**: Rearrange events order to refine your search. +
+ drag and drop events +
+6. **Save frequently used searches for quick access:** Use the Save Search button to store event and filters groups and access them easily for similar future queries. +
+ saved search +
+ +## Understanding events + +**Events** in OmniSearch represent user interactions and system behaviors that occur during a session. + +They are divided into two main categories: **Events** (**Autocaptured:** automatic user interaction tracking and **Custom events:** sent using the SDK) and **DevTools events** (technical monitoring and debugging). + +### Events +| **Event name** | **Description** | +| --- | --- | +| Click | Records user clicks. | +| Text Input | Tracks text entered in fields. | +| Visited URL | Logs visited pages | +| Tagged Element | Tracks custom-tagged elements. | +| Custom Events | User defined events, sent using the SDK. | + + +### DevTools events + +| **Event name** | **Description** | +| --- | --- | +| Network Request | Monitors network activity. | +| GraphQL | Logs GraphQL queries and responses. | +| State Action | Tracks state changes in your application. | +| Error Message | Captures error messages in the console. | +| Average CPU Load | Measures average CPU usage. | +| Average Memory Usage | Tracks average memory consumption. | + +## Understanding filters + +**Filters** in OmniSearch help you narrow down session replays by specific criteria, allowing you to focus on the most relevant user sessions. They work in conjunction with events to create precise searches across your session data. + +Filters are organized into four main categories: + +### User filters + +| **Filter name** | **Description** | +| --- | --- | +| User ID | Filter on specific users using their unique identifiers. | +| Anonymous User ID | Filter sessions of users without a logged-in identity. | + +### Session filters + +| **Filter name** | **Description** | +| --- | --- | +| Country | Filter sessions by country. | +| City | Filter sessions by city. | +| State/Province | Filter sessions by state or province. | +| Operating System (OS) | Filter sessions by the operating system used. | +| Browser | Filter sessions by the browser type. | +| Device | Filter sessions by the user's device. | +| Platform | Filter sessions by the platform type. | +| Version ID | Filter sessions by the version of the application. | +| Referrer | Filter sessions based on the referring URL. | +| Duration | Filter sessions replays by their duration. | +| UTM Source | Filter sessions by UTM source parameter. | +| UTM Medium | Filter sessions by UTM medium parameter. | +| UTM Campaign | Filter sessions by UTM campaign parameter. | + +### Issue filters + +| **Filter name** | **Description** | +| --- | --- | +| Rage Click, Dead Click, Excessive Scrolling, Mouse Thrashing | Identify sessions with user frustration caused by repeated clicks, broken buttons or links, excessive scrolling, erratic mouse movement…. | +| Bad Request | Identify sessions with HTTP 400 errors. | +| Missing Resource | Find sessions with missing resources | +| CPU Issues | Identify sessions with high CPU usage. | +| Slow Resource | Identify sessions with slow-loading resources. | +| Slow Page Load | Identify sessions with slow page load times. | +| Crash | Identify sessions where the app or page crashed. | +| Errors | Identify sessions with application errors. | + +### Metadata filters + +| **Filter name** | **Description** | +| --- | --- | +| Metadata key | Use custom-defined metadata to filter sessions. If undefined, see how you can add metadata [here](/tutorials/metadata) | + +## Have questions? + +If you still have questions, make sure to reach out to our devs on our  [Slack community](https://slack.openreplay.com/). diff --git a/src/pages/en/v1.26.0/session-replay/websockets.mdx b/src/pages/en/v1.26.0/session-replay/websockets.mdx new file mode 100644 index 000000000..ebc4d545f --- /dev/null +++ b/src/pages/en/v1.26.0/session-replay/websockets.mdx @@ -0,0 +1,36 @@ +--- +title: "Capture WebSockets" +metaTitle: "Capture WebSockets" +metaDescription: "How to record WebSockets in session replay." +--- + +OpenReplay can record chosen WebSocket channels and display them in the session replay. This is useful when troubleshooting certain situations by providing additional context. + +## Enable WebSockets Recording + +To enable WebSockets recording, you will need to create a hook that will listen to messages: + +```ts +const wsHook = tracker.trackWs('my_ws_channel') + +myWsChannel.on('important_message', (data) => { + wsHook('important_message', data, 'down') + /** your code */ +}) +myWsChannel.onAnyOutgoing((event, data) => { + wsHook(event, data, 'up') +}) +``` + +Example built with [socket-io docs](https://socket.io/docs/v4/listening-to-events/) + +> Note: This is just a basic example, make sure to read how to listen to message events and plan what you actually need to capture accordingly. Big/heavy traffic will lead to bigger replay sizes. + +### Data Sanitization + +You can sanitize data before it is sent via hook. + +## Have questions? + +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). + diff --git a/src/pages/en/v1.26.0/spot.mdx b/src/pages/en/v1.26.0/spot.mdx new file mode 100644 index 000000000..ddf27d46a --- /dev/null +++ b/src/pages/en/v1.26.0/spot.mdx @@ -0,0 +1,161 @@ +--- +title: "How to use Spot" +metaTitle: "Use the OpenReplay Spot Chrome extension" +metaDescription: "Record and report bugs with all the context developers need to fix them." +--- + +import YoutubeVideo from '~/components/YoutubeVideo.astro' + + + +## What is Spot? + +[**Spot is a Chrome extension**](https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid) that makes bug reporting blazingly fast and simple. + +With Spot, you can easily record bugs right from your browser and share them instantly with your team. The end-result is a complete, ready-to-share bug report in video format, including user actions, console logs and errors, network payloads, and user agent data. In short, you get everything you need to report a bug faster than ever, and everything your team needs to fix it just as quickly. + + +## What you need to know + +- Spot comes with every [OpenReplay plan](https://www.openreplay.com/pricing.html) from our open-source to our enterprise offerings. +- Spot is a *Chrome extension* that also works on any Chromium-based browser, including [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Brave](https://brave.com/) and [Arc](https://arc.net/). + +## How to install and set up the Spot Chrome extension + +### 1. Install the extension + +Installing the Spot Chrome extension is quick and easy: + +1. Go to the [**Spot extension page on the Chrome Web Store**](https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid) and click Add to Chrome. +2. Pin Spot to your Chrome toolbar for easy future access. + +
+ Add Spot to Chrome +
+ + +### 2. Set up your OpenReplay Spot account + +Before you start using Spot, you need to either log in to your existing OpenReplay account or create a new one: + +- #### OpenReplay cloud + - **New users:** + 1. After pinning Spot, click on the Spot icon in your toolbar. + 2. Select **Create Account**. + 3. Choose your **primary use-case** for OpenReplay. + - If you select "report bugs via Spot" as your primary use-case, you can later access the full OpenReplay features by clicking on **Setup Tracker**. +
+ Create account through Spot +
+ - **Existing users:** + 1. Click on the pinned Spot extension in your toolbar. + 2. Select **Log in** and enter your OpenReplay credentials. + - You can find your Spots in the Spot menu in the left sidebar. +
+ Spots Menu +
+- #### OpenReplay self-host + - **New and existing users:** + - Update your OpenReplay instance to the latest version [**(v1.20.0**)](https://github.com/openreplay/openreplay/releases/tag/v1.20.0) that supports Spot. + - Once updated, the Spot menu will appear in the left sidebar. Your Spots will be securely saved on your instance. + +### 3. You’re ready to go! + +Now that you’re logged in, you’re all set to start spotting and reporting bugs with Spot. + +## How to use the Spot Chrome extension + +Here’s how to use the Spot Chrome extension’s key features: + +### Record tab + +- **Start recording:** Click the Spot icon in your toolbar and select **Record Tab** to capture everything in the active tab. +- **Enable microphone:** If needed, toggle on the microphone option to include audio in your recording. +- **Pause recording:** Click on the pause icon from the recording panel at any time. +- **Restart recording:** Click on the restart icon from the recording panel to restart the recording. +- **Stop recording:** Click on the stop icon from the recording panel to stop the recording. +- **Add comments:** You can add comments to provide additional context before saving. +- **Save Spot:** After stopping the recording, it will automatically save with all the relevant technical details, like console logs and network data. + +
+ Use Record Tab feature +
+ +### Record desktop + +- **Start recording:** Click the Spot icon and select **Record Desktop**. Choose to record your entire screen or a specific window. + +### Access DevTools information in Spot recordings + +Spot automatically includes DevTools data in every bug recording, providing your developers with complete context to efficiently debug issues. Each recording captures the following: + +- **Console logs:** All console outputs, warnings, and error messages during the recording session. +- **Network requests:** Logs of all network activity, including: + - **Request and response headers and bodies:** Data sent and received in each request. + - **Status codes:** Quickly identify failed or problematic requests. +- **User agent data:** Information about the user's browser and device to help developers replicate the environment where the bug occurred. +- **User interaction data:** Details about user activity, such as clicks and navigation paths, allowing developers to understand how the issue was encountered. + +**_Note on GraphQL errors_** + +GraphQL typically returns a 200 OK status code for all responses, even when errors are present in the response body (usually placed inside an errors field). This can make it difficult to spot issues based solely on the HTTP status code. + +In Spot, we detect when a GraphQL response contains an `errors` object in the body. When such an error is found, we mark the request with a `400` status code instead of `200`. This adjustment makes it easier for developers to identify and debug problematic GraphQL requests. + +
+ Spot DevTools +
+ +### Spot settings + +- **Access settings:** Click the Spot icon in your toolbar and select the **Settings** icon. +- **Go to Spot tab after save:** Toggle this on to be directed to the Spot recording immediately after saving. +- **Include DevTools:** Toggle this on to include console logs, network calls, and other debugging information in your recording. + +
+ Spot Settings +
+ +### Invite teammates + +- **Send invites:** Click **Preferences**, go to **Team**, and click **Add Team Member**. Enter their full name and email address, then send the invitation. +- **Team access:** All team members can view Spot recordings in the **Spots** view in OpenReplay + +*Spots are not tied to any specific project.* + +### Share Spot + +- **Private sharing:** Spot recordings can be shared via private links for internal viewing within your team on OpenReplay. +- **Public sharing:** You can create public links for external viewing, accessible even without an OpenReplay account. +- **Integration with tools:** Include these links in bug tracking or collaboration tools like Slack, Teams, Jira, or Linear for easy access and teamwork. + +
+ Share Spot +
+ +## Troubleshooting + +### Network Error 520 When Saving Spot + +If you encounter a HTTP 520 Unknown Error when trying to save Spot recordings, this typically indicates that the video file size exceeds Cloudflare's accepted size limit. This can happen when recording longer spots or spots with complex interactions. + +To resolve this issue: + +1. Access your OpenReplay deployment configuration at: `scripts/helmcharts/vars.yaml` +2. Locate the `proxy-body-size` variable (around line 109) +3. Increase the value from the default `10m` to accommodate larger recordings + - For example, if you need to upload files around 36MB, you should set it to at least `40m` + +Example configuration adjustment: +```yaml +proxy-body-size: 40m # Increase this value based on your recording size needs +``` + +After updating the configuration, apply the changes to your deployment for them to take effect. + +## Have questions? + +Having trouble setting up this plugin? Please connect to our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com) and get help from our community. diff --git a/src/pages/en/v1.26.0/structure.mdx b/src/pages/en/v1.26.0/structure.mdx new file mode 100644 index 000000000..4f686be04 --- /dev/null +++ b/src/pages/en/v1.26.0/structure.mdx @@ -0,0 +1,14 @@ +--- +title: "Structure" +metaTitle: "Structure" +metaDescription: "Understanding OpenReplay structure, data model and technical stack." +--- + +Learn about the OpenReplay structure, data model and technical stack. + +## Connectors (Enterprise Edition only) +- [Exported Data](/structure/exported-data) + +## Have questions? + +If you encounter any issues, connect to our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com) and get help from our community. diff --git a/src/pages/en/v1.26.0/structure/exported-data.mdx b/src/pages/en/v1.26.0/structure/exported-data.mdx new file mode 100644 index 000000000..38eb0c3fd --- /dev/null +++ b/src/pages/en/v1.26.0/structure/exported-data.mdx @@ -0,0 +1,146 @@ +--- +title: "Exported Data" +metaTitle: "Exported Data" +metaDescription: "Export data to your data warehouses using OpenReplay connectors (Enterprise Edition)." +--- + +OpenReplay Enterprise Edition comes with different connectors for exporting captured data (user behavior and technical issues) to your data warehouse. We support: +- Amazon Redshift +- Google BigQuery +- PostgreSQL +- Snowflake +- ClickHouse + +## Sessions + +|Column name|Type|Category|Description| +|-----------|----|--------|-----------| +sessionid|text|session metadata|Unique session identifier +user_browser|text|session metadata|User browser +user_browser_version|text|session metadata|User browser version +user_country|text|session metadata|User country +user_city|text|session metadata|User city +user_state|text|session metadata|User state +user_device|text|session metadata|User device +user_device_heap_size|biginteger|session metadata|User device heap size +user_device_memory_size|biginteger|session metadata|The approximate amount of device memory in gigabytes +user_device_type|text|session metadata|User device type +user_os|text|session metadata|User OS +user_os_version|text|session metadata|User OS version +user_uuid|text|session metadata|User unique identifier +connection_effective_bandwidth|biginteger|session metadata|The effective bandwidth estimate in megabits per second +connection_type|text|session metadata|Connection type. One of the following: bluetooth, cellular, ethernet, none, wifi, other, unknown +referrer|text|session metadata|the URI of the page that linked to this page +user_anonymous_id|text|session metadata|Optional user identifier +user_id|text|session metadata|An identifier of a user within a session, that can be set manually with setUserID() [tracker method](https://docs.openreplay.com/installation/identify-user) +tracker_version|text|technical|Version of tracker +rev_id|text|technical|Revision ID +session_start_timestamp|biginteger|session metadata|Timestamp when the first message from the session was generated on the user side +session_end_timestamp|biginteger|session metadata|Timestamp when the last message from a session arrived followed by 2 minutes and 30 seconds of inactivity +session_duration|biginteger|session metadata|The difference between session_end_timestamp and session_start_timestamp in milliseconds +first_contentful_paint|biginteger|loading speed|Time when the browser first rendered any text, image +speed_index|biginteger|loading speed|Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. It is the average time at which visible parts of the page are displayed. Expressed in milliseconds, and dependent on the size of the viewport, the lower the score, the better. +visually_complete|biginteger|loading speed|The time necessary to the zone above the foldline to be rendered under its final form +timing_time_to_interactive|biginteger|loading speed|Time to Interactive is a non-standardized web performance 'progress' metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity. +avg_cpu|biginteger|performance|Average estimated CPU on a user side +avg_fps|biginteger|performance|Maximum number of frames per second on a user side +max_cpu|biginteger|performance|Maximum estimated CPU on a user side +max_fps|biginteger|performance|Maximum number of frames per second on a user side +max_total_js_heap_size|biginteger|performance|Maximum total heap size +max_used_js_heap_size|biginteger|performance|Maximum used heap size +js_exceptions_count|biginteger|issues and events|A count of JavaScript exceptions events within a session +inputs_count|biginteger|issues and events|A count of Input events within a session +clicks_count|biginteger|issues and events|A count of Click events within a session +issues_count|biginteger|issues and events|A count of Issue events within a session +pages_count|biginteger|issues and events|A count of different URL visited during a session +metadata_1|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_2|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_3|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_4|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_5|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_6|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_7|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_8|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_9|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) +metadata_10|text|session metadata|Additional information about users (also known as traits or user variables). Learn more about [metadata](https://docs.openreplay.com/installation/metadata) + + +## Events + +|Column name|Type|Category|Description| +|----------|----|--------|-----------| +sessionid|biginteger|technical|Unique session identifier +consolelog_level|text|technical|Verbose, Info, Warning, or Error +consolelog_value|text|technical|Console log message content +customevent_name|text|technical|Name of the custom event +customevent_payload|text|technical|Custom event's payload +jsexception_message|text|technical|JS exception message content +jsexception_name|text|technical|Exception's name +jsexception_payload|text|technical|Exception's payload +jsexception_metadata|text|technical|Exception’s metadata +networkrequest_type|text|behavioral and technical|Request type (GET, PUT, FETCH,…) +networkrequest_method|text|behavioral and technical|Request method +networkrequest_url|text|behavioral and technical|Requested url site +networkrequest_request|text|behavioral and technical|Request payload +networkrequest_response|text|behavioral and technical|Response from server +networkrequest_status|biginteger|behavioral and technical|Status of the request +networkrequest_timestamp|biginteger|behavioral and technical|Timestamp of request +networkrequest_duration|biginteger|behavioral and technical|Total duration of the request +issueevent_message_id|biginteger|behavioral and technical|Unique identifier +issueevent_timestamp|biginteger|behavioral and technical|Timestamp of the event +issueevent_type|text|behavioral and technical|Type of the issue (see Issue Type documentation for more) +issueevent_context_string|text|behavioral and technical|Issue message with explanation +issueevent_context|text|behavioral and technical|Relevant information on the issue +issueevent_payload|text|behavioral and technical|Payload +issueevent_url|text|behavioral and technical|URL +customissue_name|text|technical|Custom issue name +customissue_payload|text|technical|Custom issue payload +clickevent_label|text|behavioral|Element text if present +clickevent_selector|text|behavioral|Element selector if present +clickevent_url|text|behavioral|URL +clickevent_hesitation_time|biginteger|behavioral|Time between hovering on element and clicking it +clickevent_timestamp|biginteger|behavioral|Timestamp of click event +pageevent_url|text|technical|URL +pageevent_referrer|text|technical|The URI of the page that linked to this page +pageevent_speedindex|biginteger|technical|The average time at which visible parts of the page are displayed. Expressed in milliseconds +pageevent_timestamp|biginteger|technical|Timestamp of the event +inputevent_label|text|behavioral|Element text if exists +inputevent_hesitation_time|biginteger|behavioral|Hesitation time when typing the input +inputevent_input_duration|text|behavioral|Input duration +inputevent_timestamp|biginteger|behavioral|Timestamp of input event +mobile_event_name|text|behavioral and technical|Mobile event name +mobile_event_payload|text|behavioral and technical|Mobile event payload +mobile_networkcall_type|text|technical|Mobile network call type +mobile_networkcall_method|text|technical|Mobile network call method +mobile_networkcall_url|text|technical|Mobile network call URL +mobile_networkcall_request|text|technical|Mobile network request +mobile_networkcall_response|text|technical|Mobile network response +mobile_networkcall_status|text|technical|Mobile network request status +mobile_networkcall_timestamp|biginteger|technical|Mobile network request timestamp +mobile_networkcall_duration|biginteger|technical|Mobile network request duration +mobile_clickevent_x|biginteger|behavioral|Mobile tap event x coordinate +mobile_clickevent_y|biginteger|behavioral|Mobile tap event y coordinate +mobile_clickevent_timestamp|biginteger|behavioral|Mobile tap event timestamp +mobile_clickevent_label|text|behavioral|Mobile tap event label +mobile_swipeevent_x|biginteger|behavioral|Mobile swipe event x coordinate +mobile_swipeevent_y|biginteger|behavioral|Mobile swipe event y coordinate +mobile_swipeevent_timestamp|biginteger|behavioral|Mobile swipe event timestamp +mobile_swipeevent_label|text|behavioral|Mobile swipe event label +mobile_inputevent_label|text|behavioral|Mobile input label +mobile_inputevent_value|text|behavioral|Mobile input value +mobile_crash_name|text|technical|Mobile crash view name +mobile_crash_reason|text|technical|Mobile crash error +mobile_crash_stacktrace|text|technical|Mobile crash stacktrace +mobile_issueevent_timestamp|biginteger|technical|Mobile issue name +mobile_issueevent_type|text|technical|Mobile issue type +mobile_issueevent_context_string|text|technical|Mobile issue context +mobile_issueevent_context|text|technical|Mobile issue +mobile_issueevent_payload|text|technical|Mobile issue payload +mobile_viewcomponentevent_screen_name|text|behavioral|Mobile screen name +mobile_viewcomponentevent_view_name|text|behavioral|Mobile view name +mobile_viewcomponentevent_visible|boolean|behavioral|Is visible +mobile_viewcomponentevent_timestamp|biginteger|behavioral|Mobile screen/view event timestamp +received_at|biginteger|technical|Timestamp when the event is received by connector + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/troubleshooting.mdx b/src/pages/en/v1.26.0/troubleshooting.mdx new file mode 100644 index 000000000..dc872d06d --- /dev/null +++ b/src/pages/en/v1.26.0/troubleshooting.mdx @@ -0,0 +1,21 @@ +--- +title: "Troubleshooting" +metaTitle: "Troubleshooting with OpenReplay" +metaDescription: "How to quickly troubleshoot common issues in OpenReplay" +--- + +Learn more about how to troubleshoot common issues in OpenReplay. + +## Have questions? +- [Session recording issues](/troubleshooting/session-recordings) +- [Javascript errors](/troubleshooting/js-errors) +- [Sourcemaps issues](/troubleshooting/sourcemaps) +- [Content Security Policy (CSP)](/troubleshooting/csp) +- [Testing in localhost](/troubleshooting/localhost) +- [Supported browsers](/troubleshooting/supported-browsers) +- [Deployment issues](/troubleshooting/deployment-issues) + + +## Have questions? + +If you encounter any issues, connect to our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com) and get help from our community. diff --git a/src/pages/en/v1.26.0/troubleshooting/cache.mdx b/src/pages/en/v1.26.0/troubleshooting/cache.mdx new file mode 100644 index 000000000..7d15ebcb2 --- /dev/null +++ b/src/pages/en/v1.26.0/troubleshooting/cache.mdx @@ -0,0 +1,21 @@ +--- +title: "Clear Cache" +metaTitle: "Clear Cache" +metaDescription: "How to clear and reset the cache (CSS, fonts and incons) in OpenReplay." +--- + +OpenReplay needs access to resources, such as your stylesheets, icons and fonts, to make replays work. In fact, these files are copied then cached by our backend so you can see old recordings even if your web app has changed. Follow the below steps to clear your cache: + +1. Run `k9s -n db` +2. Use the keyboard arrows to navigate the list and get to the `minio-*` container +3. Press s to have shell access the Minio (object storage) container +4. Run `export MINIO_ACCESS_KEY=` +5. Run `export MINIO_SECRET_KEY=` +6. Run `mc alias set minio http://localhost:9000 $MINIO_ACCESS_KEY $MINIO_SECRET_KEY` +7. Run `mc rm --recursive --dangerous --force minio/sessions-assets` to remove all cached files (CSS, fonts and icons) +8. Use `exit` to exit the Minio container +9. Run `:quit` to exit the Kubernetes CLI +10. Restart `assets` service by running `openreplay -R` + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/troubleshooting/csp.mdx b/src/pages/en/v1.26.0/troubleshooting/csp.mdx new file mode 100644 index 000000000..9efc5819b --- /dev/null +++ b/src/pages/en/v1.26.0/troubleshooting/csp.mdx @@ -0,0 +1,21 @@ +--- +title: "Content Security Policy (CSP)" +metaTitle: "CSP" +metaDescription: "Content Security Policy for allowing OpenReplay to record sessions." +--- +import Aside from '~/components/Aside.astro' + +Below is the policy (CSP) for allowing OpenReplay to record sessions. + +```html +worker-src ‘self’ blob: https://*.openreplay.com; script-src ‘self’ https://*.openreplay.com; +``` + +Please note that the `worker-src` directive is not supported in Safari (and mobile Safari). Using it should not prevent OpenReplay from recording sessions. + + + +## Have questions? +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). \ No newline at end of file diff --git a/src/pages/en/v1.26.0/troubleshooting/deployment-issues.mdx b/src/pages/en/v1.26.0/troubleshooting/deployment-issues.mdx new file mode 100644 index 000000000..95db55b03 --- /dev/null +++ b/src/pages/en/v1.26.0/troubleshooting/deployment-issues.mdx @@ -0,0 +1,118 @@ +--- +title: "Deployment Issues" +metaTitle: "Deployment Issues" +metaDescription: "Deployment related issues or FAQ" +--- + +## Installation + +### Error: release openreplay failed, and has been uninstalled due to atomic being set + +This might be because of failed helm installation. To debug, follow the below steps: + +```bash +openreplay -s + +# If you see any failed pods, check the log. it should shed some light. +openreplay -l + +# If there is no pods in running/error/crashloop status, then check the status of pod using following command +kubectl describe po -n app -n db +``` + +## Signup is not working + +### Health check shows SSL check failed + +If you've a self-signed certificate, you can use the following command to fix it: + +```bash +openreplay -e + +# Add following line to skip the SSL health check +chalice: + env: + ... + # append the following line under env section + SKIP_H_SSL: true +``` + +Save and quit the config file using `:wq` + +## My installation suddenly stopped working + +There might be multiple reasons for that. Here's how you can debug the situation: + +### Check the status of Installation, using `openreplay -s` + +Check the disk usage section. If it's more than 80%, the services won't run. + +## Upgrade failed without any particular error + +### I see "helm or another operation (install/upgrade/rollback) is in progress" + +This usually means that you retried the installation/upgrade operation multiple times. Run the below command to resolve the situation: + +```bash +helm rollback -n app openreplay +``` + +### I see no errors, just "installation failed" + +```bash +# Check for failed pods +kubectl get pods -n app --field-selector="status.phase!=Succeeded,status.phase!=Running" -o custom-columns="POD:metadata.name" + +# Check for the err logs +openreplay -l `pod name from above` + ``` + +## Self-Hosted Errors + +### Error: You must be logged in to the server (Unauthorized) + +`openreplay -s` or `kubectl get po` throws error `error: You must be logged in to the server (Unauthorized)`. k3s might have regenerated the client certificate for logging onto the cluster, but kubectl hadn't picked this up. Copy the new config with `cp /etc/rancher/k3s/k3s.yaml ~/.kube/config` and you're good to go. + +## Databases + +### Postgres doesn't clean data even after pg-cleanup + +Postgres clean up is handled by PG. Means, we'll delete data before the specified date, and PG will mark that data for deletion. PG deletes the data in a process called AutoVacuum, and it's triggering logic is internal. So we don't have the ETA for data cleanup from disk. If you want to see what tables you've data, and truncate the table if you can afford data loss, for example the table `requests` which have the data related to network requests, and if you don't have data there, you can't search sessions with request URLs. + +To check the table size + +```sql +SELECT nspname AS "name_space", + relname AS "relation", + pg_size_pretty( + pg_total_relation_size(C.oid) + ) AS "total_size" +FROM pg_class C + LEFT JOIN pg_namespace N ON (N.oid = C.relnamespace) +WHERE nspname NOT IN ('pg_catalog','information_schema') + AND C.relkind <> 'i' + AND nspname !~ '^pg_toast' +ORDER BY pg_total_relation_size(C.oid) DESC +LIMIT 20; +``` + +## SSL + +### Offloading SSL to external proxy/LB + +```bash +openreplay -e + +# Under ingress-nginx block disable ssl redirection +ingress-nginx: &ingress-nginx + ... + controller: + ... + config: + ... + ssl-redirect: false + force-ssl-redirect: false +``` +## Have questions? + +If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). diff --git a/src/pages/en/v1.26.0/troubleshooting/js-errors.mdx b/src/pages/en/v1.26.0/troubleshooting/js-errors.mdx new file mode 100644 index 000000000..b28c58fd0 --- /dev/null +++ b/src/pages/en/v1.26.0/troubleshooting/js-errors.mdx @@ -0,0 +1,76 @@ +--- +title: "JS Errors" +metaTitle: "JS Errors" +metaDescription: "All sorts of Javascript errors." +--- + +This section lists the most encountered Javascript errors and reported by our community. + +## Require() of ES module + +This error (as well as one below) generally happens when you try to import the tracker inside serverside context (SSR, Nuxt, Next, Remix apps etc). + +Fixing it requires ensuring that tracker is imported and run inside browser context, via dynamic imports, client components etc. + +## ReferenceError: Navigator is not defined + +Sometimes this error occurs when you try to import `tracker-assist` or `tracker-fetch` plugins, this happens because node is trying to build the page without `window` API in the env. + +The fix is fairly simple. All you have to do is to change the regular import of the trouble-causing plugin: + +```js +import trackerAssist from '@openreplay/tracker-assist/cjs'; +``` + +To dynamically import inside `componendDidMount` or `useEffect` alternative: + +```js +import Tracker, { Options } from "@openreplay/tracker"; +const tracker = new Tracker({ /* your options */ }); + +class TrackerComponent extends React.Component { + + componentDidMount = () => { + import(‘@openreplay/tracker-assist/cjs’).then(({ default: trackerAssist }) => { + tracker.start(/* your options */) + tracker.use(trackerAssist(/* your assist options */)) + }) + } + + /* Other code */ +``` + +This way all window API dependant plugins will be imported when the component gets rendered. + +## Critical dependency: the request of a dependency is an expression + +This may happen with old versions of `tracker-assist` plugin. You should apply this [workaround](https://github.com/peers/peerjs/issues/630#issuecomment-910028230) if you face the below error when compiling: + +```log +Failed to compile. + +./node_modules/peerjs/dist/peerjs.min.js +Critical dependency: the request of a dependency is an expression +``` + +## Uncaught DOMException: Blocked a frame with origin "X" from accessing a cross-origin frame + +OpenReplay tracker captures **same-domain** iFrames by default. However, it throws an error when it tries to capture an iFrame that's NOT from the same-domain as your website. You can either: + +- Disable the entire functionality using the `captureIFrames` property as in the example below: + +```js +tracker.configure({ + projectKey: PROJECT_KEY, + captureIFrames: false +}); +``` + +- Keep capturing iFrames (default behavior) by adding the `data-openreplay-capture` HTML attribute to the same-domain `