تسجيل الدخول إلى React Native: كل ما تحتاج إلى معرفته!

يعد التسجيل جانبًا مهمًا في مشاريع تطوير تطبيقات React Native لأنه أحد أسهل الطرق وأسرعها لتصحيح أخطاء التطبيق في مرحلة التطوير نفسها. يوفر التسجيل معلومات مفصلة وتعليقات حول المشكلة أثناء تشغيل الكود. كما أنه يساعد المطورين على فهم سلوك التطبيق.

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

يقدم هذا المنشور رؤى شاملة فيما يتعلق بتسجيل الدخول في مشاريع وأساليب React Native لحل القيود. ولكن ، قبل أن نتعمق أكثر ، دعنا نلقي نظرة خاطفة على بنية تطبيق React Native.

رد فعل العمارة الأصلية / بيئة التنفيذ

تتكون بيئة تنفيذ React Native من ثلاثة خيوط رئيسية - الخيط "Native" وخيط "JS" وخيط الخلفية الذي يعالج عقدة الظل. تتواصل سلاسل الرسائل هذه مع بعضها البعض عبر مكتبة تسمى "Bridge".

تسجيل الدخول إلى React Native: الخطوات الأساسية التي يجب مراعاتها

الآن ، دعنا نجمع رؤى شاملة حول التسجيل في بيئة React Native.

كيف تقرأ السجلات

تظهر سجلات JavaScript داخل جزء "وحدة التحكم" من قسم "أدوات المطورين". ستجد "أدوات المطورين" في المستعرض المستخدم لتصحيح أخطاء JavaScript عن بُعد. ولكن ، يمكن لمطوري React Native عرض هذه السجلات عندما يكون مصحح الأخطاء متصلاً وقد يؤدي ذلك إلى إبطاء عملية تنفيذ التطبيق إلى حد معين. إذن ما الحل؟ تحتاج إلى استخدام أوامر مثل رد الفعل الأصلي log-ios (لتطبيقات iOS) والتفاعل الأصلي log-android (لتطبيقات Android) للتأكد من أن جهازك لا يبطئ أثناء تسجيل الدخول. بهذه الطريقة ، ستتعرف أيضًا على المزيد حول ما يحدث في التطبيق بأكمله وليس فقط سلسلة JavaScript.

دعونا نناقش هذا بالتفصيل لتزويدك بمزيد من الوضوح عند قراءة السجلات!

سجلات وحدة التحكم

لعرض سجلات وحدة التحكم ، تحتاج إلى تشغيل الأمر npx expo start وتوصيل جهاز ؛ ستظهر سجلات وحدة التحكم في العملية الطرفية. يرسل وقت التشغيل هذه السجلات إلى Expo CLI من خلال مآخذ الويب. هنا ، تحصل على سجلات منخفضة الدقة لأن أدوات التطوير غير متصلة مباشرة بالمحرك. لإنشاء سجلات عالية الدقة ، يمكنك استخدام وظائف تسجيل متقدمة مثل console.table. لهذا ، تحتاج إلى إنشاء بناء تطوير باستخدام Hermes ثم توصيل المفتش. Hermes هو محرك JS مُحسَّن لبيئة React Native. تعمل Hermes على تحسين وقت بدء التطبيق من خلال تجميع JS في وقت مبكر إلى رمز ثانوي.

سجلات النظام

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

لأجهزة Android: npx React-native log-android

لأجهزة iOS: سجل التفاعل الأصلي npxios

كيف تكتب السجلات

إليك كيفية كتابة السجلات! يظهر إخراجك إلى سجل React Native Console في سجلات التطبيق. من المهم استخدام مستوى السجل المناسب أثناء كتابة السجلات. إلى جانب console.log ، هناك مستويات أخرى من السجلات مثل console.info و console.warn و console.debug وما إلى ذلك. كل من هذه السجلات لها غرض محدد وتوفر تحكمًا أكثر دقة في مستوى المعلومات المطلوبة. يمكنك استخدام console.info لمعرفة ما إذا كانت مجموعة من الأحداث قد وقعت وفقًا للنمط المتوقع. يتم استخدام console.warn في حالة حدوث بعض الحالات غير المتوقعة ؛ على سبيل المثال ، استجابة الخادم غير الصحيحة تمامًا ولكنها تبدو مشكوك فيها. يتم استخدام consoe.debug عندما تطلب سجلات مؤقتة لحل المشكلات.

أهمية تسجيل المكتبات

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

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

تفاعل مكتبات التسجيل الأصلية: أمثلة

رد فعل مسجل ملف أصلي

React-native-file-logger هو مسجل ملفات لبيئة التفاعل الأصلية ويمكنه إلحاق رسائل من مكالمات وحدة التحكم في ملفات السجل التي تستخدم مسجلات الملفات من Logback (لنظام Android) و CocoaLumberjack (لنظام iOS). قم بتكوينه باستخدام الأمر: FileLogger.configure (). بمجرد تكوينه ، سيقوم تلقائيًا بتسجيل جميع مكالمات console.log / debug /… الموجودة في ملف.

React-native-file-logger مكتوب بلغة TypeScript ويقدم سياسة تشغيل ملفات اختيارية. يتم لف الملفات بناءً على الحجم والوقت المطلوب. سياسة التدحرج قابلة للتخصيص بدرجة كبيرة. يمكنك تخصيص مستوى السجل لإخراج الملف ودليل السجل ، وهو المسار الذي يتم فيه تخزين ملفات السجل. علاوة على ذلك ، إذا كنت لا ترغب في استخدام استدعاءات وحدة التحكم لتسجيل الملفات ، فلديك خيار كتابة الرسائل مباشرة إلى ملف السجل باستخدام واجهة برمجة تطبيقات المسجل.

يمكن لهذا المسجل أيضًا إرسال سجلات ملفات بالبريد الإلكتروني إلى المطورين دون الحاجة إلى الاعتماد على أي مكتبة أخرى. يستخدم المُسجِّل الملف global غير الموثق الخاص بـ React Native. باستخدام React-native-file-logger ، يمكنك اعتراض مكالمات وحدة التحكم واسترداد رسالة السجل المنسقة.

رد فعل السجلات الأصلية

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

للتثبيت ، قم بتشغيل أي من هذين الأمرين:

npm install –s save-native-logs. تثبيت npm

أو

إضافة الغزل سجلات رد فعل أصلية

الآن ضع الكرة تتدحرج! انتقل إلى سجلات التفاعل الأصلية ومن هناك ،

استيراد {المسجل}.

ثم قم بتشغيل الأمر var log = logger.createLogger

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

عند القدوم إلى "النقل" ، يمكن للمطورين كتابة مواصفات "النقل" الخاصة بهم لإرسال السجلات إلى خدمة Cloud. يمكنك أيضًا الاختيار من بين العديد من خيارات "النقل" الافتراضية مثل hideDate و hideLevel و loggerName و dateFormat وما إلى ذلك ؛ إذا قمت بتعيين المعلمة - خيارات النقل. هنا ، ستتمكن أيضًا من إضافة خيارات جديدة يتم تمريرها إلى وسائل النقل ويمكنها الكتابة فوق خيارات النقل المحددة مسبقًا.

يمكن تعيين مستوى خطورة السجلات ؛ لهذا ، تحتاج إلى تمرير اسم (سلسلة) المستوى الأقل أهمية. هنا ، يمكنك الكتابة فوق أي خيار config.severity تم تعيينه عند إنشاء المسجل.

كيفية التعامل مع أنواع مختلفة من الأخطاء التي تعرضها السجلات

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

أخطاء وحدة التحكم

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

يمكنك إخفاء الإخطارات المذكورة أعلاه باستخدام الأمر: LogBox.ignoreAllLogs (). يكون هذا النهج مفيدًا أثناء تقديم عروض توضيحية للمنتج. يمكنك أيضًا إخفاء الإشعارات باتباع نهج "لكل سجل". هنا ، تحتاج إلى كتابة الأمر: LogBox.ignoreLogs (). يمكن استخدام هذا الأسلوب للتعامل مع التحذيرات الصاخبة التي لا يمكنك إصلاحها ؛ على سبيل المثال ، تلك الموجودة في تبعية طرف ثالث.

أخطاء في بناء الجملة

عندما يكون هناك خطأ في بناء الجملة ، يظهر خطأ LogBox ملء الشاشة. يعرض لك LogBox تتبع المكدس بالإضافة إلى موقع الخطأ النحوي. لا يمكن استبعاد مثل هذا الخطأ لأنه يشير إلى تنفيذ JS غير صالح والذي يجب بالضرورة حله قبل متابعة عملية تطوير التطبيق. هذه هي الطريقة التي يجب أن تتصرف بها لرفض الأخطاء النحوية. أصلح الخطأ. بعد ذلك ، يمكنك استخدام أي من هاتين الطريقتين - تمكين التحديث السريع وحفظه كـ "رفض تلقائيًا" أو تعطيل التحديث السريع وإعادة التحميل باستخدام الأمر cmd + r.

أخطاء JS التي لم تتم معالجتها

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

الحد الأدنى

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