ما الفائدة من قياس أداء تطبيقك إذا لم يكن لديك مكان مركزي للاطّلاع على تلك المقاييس؟

لا فائدة، هذا هو الجواب.

وفي الوقت نفسه، هذا هو السبب في أن OpenReplay أضافت مؤخرًا لمستخدميها إمكانية إنشاء لوحات معلومات مخصّصة.

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

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

دعونا نلقي نظرة على كيفية قيام المستخدمين بذلك.

ملاحظة: إذا كنت تريد شرحًا سريعًا يوضّح لك كيفية تنفيذ لوحة معلومات بمقاييس مخصّصة، يمكنك مشاهدة هذا الفيديو على YouTube.

انقر على قسم Dashboards في القائمة الرئيسية للبدء.

ثم انقر على زر “Create Dashboard” الذي يحدّق بك مباشرةً من منتصف الشاشة:

بمجرد النقر عليه، ستُعرض لك كل مقياس على حدة من المقاييس التي تلتقطها OpenReplay عن تطبيقك.

يمكنك التفكير في هذه المقاييس ضمن الفئات التالية:

• المتعلقة بالأخطاء: ستُظهر لك هذه المقاييس المشكلات في تطبيقك.
• المتعلقة بالأداء: من خلال هذه المقاييس ستتمكّن من تقييم مدى جودة تشغيل تطبيقك بالنسبة لمستخدميك.
• المتعلقة بالموارد: مشكلات عدم تحميل الصور، أو التباطؤ بسبب ملفات JavaScript الكبيرة جدًا هي نوع المشكلات التي ستحدّدها بدقة باستخدام هذه المقاييس.
• Web Vitals: هذه هي المقاييس التي تستخدمها محركات البحث مثل Google لتحديد جودة صفحة/تطبيق ويب.
• المتعلقة بالجلسات: هذه مقاييس حول عمليات إعادة التشغيل الفعلية، وهي تعطيك فكرة عن حجم الزيارات التي يحظى بها تطبيقك وعن النسبة المئوية منها التي تلتقطها.

دعونا نلقي نظرة على كيفية تنظيم مقاييسنا ضمن هذه المجموعات وما الذي يعنيه كل منها:

• Errors by Origin: عدد الأخطاء في اليوم مقسّمة إلى أخطاء الطرف الثالث مقابل أخطاء الطرف الأول (الخاصة بك).
• Errors by Type: عدد الأخطاء المصنّفة حسب رمز الحالة أو JavaScript أو التكامل مع الخدمات الأخرى.
• Errors Per Domain: عدد الأخطاء (مجمّعة حسب النطاق) خلال الفترة المحدّدة.
• Fetch Calls with Errors: استدعاءات/استجابات fetch التي تحمل أكواد 5xx-4xx.
• Sessions Affected by JS Errors: عدد الجلسات في اليوم المتأثرة بأخطاء JS.
• Top Domains with 4XX Fetch Errors: النطاقات الرئيسية التي تحمل أخطاء من نوع Bad Request
• Top Domains with 5XX Fetch Errors: النطاقات الرئيسية التي تكون فيها الأخطاء من جانب الخادم.
• Crashes: عدد حالات التعطّل في اليوم لتطبيقك.

• CPU Load: متوسط حمل وحدة المعالجة المركزية في اليوم.
• DOM Build Time: متوسط الوقت الذي يستغرقه بناء DOM الكامل لتطبيقك، موزّعًا عبر الزمن.
• Slowest Domains: النطاقات التي تم تنزيل أبطأ الموارد منها (js، css، الصور).
• Request Load Time: زمن استجابة طلب http (fetch/xhr/axios).
• Response Time: متوسط زمن الاستجابة للطلبات التي يرسلها تطبيقك.
• Memory Consumption: متوسط استهلاك الذاكرة عبر جميع تسجيلات مشروعك.
• Sessions impacted by Slow Pages: عدد الجلسات التي يتم فيها اكتشاف صفحات بطيئة كل يوم.
• Frame Rate: متوسط استجابة واجهة المستخدم الخاصة بك.
• Page Load Time: متوسط الوقت المنقضي من لحظة إرسال متصفحك الطلب إلى الخادم الخلفي وحتى لحظة انتهاء تحميل الصفحة.
• Pages Response Time: متوسط الوقت الذي يستغرقه خادمك لإرسال الاستجابة إلى المتصفح.
• Pages Response Time Distribution: توزيع أزمنة استجابة الصفحات (عمليات التحميل) حتى تتمكن من رصد

• Breakdown of Loaded Resources: عدد الموارد المحمّلة في اليوم مفصولة حسب CSS والصور والنصوص البرمجية.
• Missing Resources: الصور (بشكل أساسي) أو الخطوط أو الأيقونات أو أوراق الأنماط أو js التي تعذّر تحميلها وبالتالي فهي مفقودة. وهذا يعني أن الصفحات التي تعرضها ستتأثر.
• Resources Fetch Time: متوسط الوقت الذي تستغرقه الموارد المختلفة في التحميل
• Slowest Resources: قائمة بأبطأ الموارد مع أزمنة التحميل المرتبطة بها.
• Image Load Time: متوسط الوقت الذي تستغرقه صورك في التحميل.
• Resources Loaded vs. Visually Complete: عدد الموارد المحمّلة مقابل مقدار الوقت الذي تستغرقه لتُحمّل بصريًا (مثل الصور، ولكن مع أخذ النصوص البرمجية وCSS في الاعتبار أيضًا).
• Resources loaded vs. Response End: عدد الموارد المحمّلة عبر XHR (وأنواع الطلبات الأخرى) مقابل الوقت الذي يستغرقه الخادم الخلفي في تسليمها.

• Time to Interactive: متوسط مقدار الوقت الذي تستغرقه واجهة المستخدم الخاصة بك لتصبح تفاعلية بالكامل (مستجيبة لإدخال المستخدم).
• Speed Index by Location: متوسط الوقت (لكل بلد) الذي يستغرقه المحتوى المرئي في صفحتك ليملأها.
• First Paint: متوسط الوقت الذي يستغرقه المتصفح لعرض أول بكسل من واجهة المستخدم الخاصة بك.
• DOM Content Loaded: متوسط الوقت الذي يستغرقه مستند HTML الأولي ليُحمّل بالكامل ويُحلَّل بواسطة المتصفح (دون الأخذ في الاعتبار أوراق الأنماط والصور والإطارات الفرعية).
• Time to Render: الوقت الذي يستغرقه المتصفح لعرض DOM المحمّل. سيكون من الجيد إظهار الفرق مع DOM Content Loaded.
• Time Till First Byte: متوسط الوقت الذي يستغرقه متصفح المستخدم لتلقّي أول بايت بعد طلب صفحة.

• Captured Requests: عدد الطلبات التي تمت في كل جلسة مسجَّلة.
• Captured Sessions: عدد الجلسات الملتقطة لمشروع ما على مدار الزمن.
• No. of Visited Pages: متوسط عدد الصفحات التي تمت زيارتها خلال جلسة.
• Sessions Per Browser: كم عدد الجلسات الملتقطة لمتصفح معيّن (مثل Chrome).
• Session Duration: متوسط مدة الجلسة في اليوم لمشروعك.

لديك 40 مقياسًا للاختيار من بينها، وهذا يعني أنه يمكنك إنشاء نوع لوحة المعلومات التي تحتاجها، بغضّ النظر عمّا تبحث عنه.

بمجرد عرض قائمة المقاييس لك، كل ما عليك فعله هو النقر على تلك التي تريدها، وعندما تحصل عليها جميعًا، انقر على زر “Create” الموجود في الزاوية السفلية اليسرى من الشاشة.

إلى جانب المقاييس المعرَّفة مسبقًا التي تقدّمها المنصة، يمكنك إنشاء مقاييسك الخاصة لتخصيص مستوى التفاصيل الذي لديك داخل لوحات معلوماتك تخصيصًا كاملاً. ضمن قسم Dashboards نفسه، وبدلاً من إنشاء لوحة معلومات جديدة، انقر على خيار Metrics في الجانب الأيسر من الشاشة واختر “Create Metric”.

امنحه اسمًا، وفي حالتي سأسمّيه “Sessions from Spain” (سترى السبب بعد قليل). ثم اختر نوع المقياس، لديك:

• Timeseries: سيرسم هذا عدد الجلسات التي تطابق معايير التصفية الموجودة في الأسفل.
• Table of [option]: سيُدرج هذا أيًا كان ما تحدّده مقابل “option” (يمكن أن يكون Users أو Sessions أو JS Errors أو Issues أو Browsers أو Devices أو Countries وURLs). سيكون كل عنصر في هذه القائمة قابلاً للنقر وستتمكّن من الحصول على مزيد من التفاصيل منه.
• Funnels: سيُنشئ مسارًا قمعيًا استنادًا إلى الفلاتر التي تحدّدها (اطّلع على هذا الشرح التعليمي لفهم كيفية الاستفادة من المسارات القمعية).

إذا كنت ترغب في معرفة كيفية التعامل مع قائمة JSErrors، فاطّلع على هذا الشرح التعليمي الآخر.

في هذا المثال، سأنشئ مقياسًا يُدرج جميع الجلسات الواردة من إسبانيا من صفحة المنتج. سيتيح لي هذا رؤية عدد الجلسات التي أحصل عليها بسرعة داخل نافذتي الزمنية المختارة، وفي الوقت نفسه، سأتمكّن من إعادة تشغيلها بنقرة بسيطة.

يمكنك تكرار هذا المقياس وتصفيته حسب بلدان أخرى، وبهذه الطريقة يمكنك الحصول على لمحة سريعة عمّن يصل إلى قسم معيّن من موقعك من بلدان مختلفة وكيف يتفاعلون معه.

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

لذا ستختار:

• Slowest resources
• Sessions impacted by Slow Pages
• Framerate
• Response time
• Time to Interactive
• مقياسك المخصّص “Sessions from spain”

اعتمادًا على حالة الاستخدام الخاصة بك، يمكنك التفكير في إضافة مقاييس أخرى، ولكن في هذا المثال، ستزوّدنا هذه المقاييس بالصورة الكاملة لما نحاول فهمه: ما إذا كانت صفحاتنا بطيئة وما الذي يسبّب ذلك. ينبغي أن تبدو النتيجة على نحو يشبه هذا:

يمكن تحريك الأدوات (widgets) التي أضفتها لضمان رؤية تلك التي تهمّك أكثر أولاً.

يمكنك أيضًا تغيير النافذة الزمنية المستخدمة لرسم هذه المقاييس بيانيًا. بشكل افتراضي، كما يمكنك أن ترى في الزاوية العلوية اليمنى من لوحة المعلومات، تعرض لك هذه الأدوات بيانات آخر 7 أيام. يمكنك تغيير النطاق الزمني إلى:

• Today، الذي يعرض لك فقط البيانات المجمّعة حتى الآن اليوم.
• Yesterday، الذي يعرض لك ملخصًا لليوم السابق.
• Past seven days، وهو الخيار المحدّد افتراضيًا.
• Past 30 days، الذي يعرض لك نطاقًا زمنيًا أكبر.
• Custom range، الذي يتيح لك تحديد النطاق الزمني الذي تريده.

يمكنك أيضًا الاستمرار في إضافة مقاييس إلى لوحة المعلومات الجديدة باستخدام زر “Add Metric” في الزاوية العلوية اليسرى بجوار العنوان.

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

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