การเข้าสู่ระบบ React Native: ทั้งหมดที่คุณต้องการทราบ!

การบันทึกเป็นส่วนสำคัญในโครงการพัฒนาแอป React Native เนื่องจากเป็นหนึ่งในวิธีที่ง่ายและรวดเร็วที่สุดในการดีบักแอปในขั้นตอนการพัฒนา การบันทึกจะให้ข้อมูลโดยละเอียดและข้อเสนอแนะเกี่ยวกับปัญหาในขณะที่โค้ดกำลังทำงาน นอกจากนี้ยังช่วยให้นักพัฒนาเข้าใจพฤติกรรมของแอพ

แต่ควรดำเนินการบันทึกในระหว่างขั้นตอนการพัฒนาแอป มันไม่มีประโยชน์อีกต่อไปเมื่อแอพได้รับการปรับใช้ นี่เป็นเพราะบันทึกเหล่านี้ถูกสร้างขึ้นในฝั่งไคลเอ็นต์ ดังนั้น ในระหว่างขั้นตอนหลังการปรับใช้ ข้อผิดพลาดที่ตรวจพบผ่านบันทึกจะสามารถเข้าถึงได้โดยผู้ใช้เท่านั้น และจะหายไปในเบราว์เซอร์ของพวกเขา ทีมพัฒนาสามารถระบุข้อผิดพลาดเหล่านี้ได้ก็ต่อเมื่อผู้ใช้กรอกรายงานข้อบกพร่อง ซึ่งมีโอกาสเกิดขึ้นน้อยที่สุด ผู้ใช้ส่วนใหญ่จะละทิ้งแอปแทนที่จะรายงานปัญหา

โพสต์นี้ให้ข้อมูลเชิงลึกที่รวมทุกอย่างเกี่ยวกับการเข้าสู่ระบบในโครงการ React Native และวิธีการแก้ไขข้อจำกัด แต่ก่อนที่เราจะลงลึกไปกว่านี้ ลองมาดูสถาปัตยกรรมของ React Native App กันก่อน

ตอบสนองสถาปัตยกรรมพื้นเมือง/สภาพแวดล้อมการดำเนินการ

สภาพแวดล้อมการดำเนินการ React Native ประกอบด้วยเธรดหลักสามเธรด - เธรด "Native" เธรด "JS" และเธรดพื้นหลังที่จัดการโหนดเงา เธรดเหล่านี้สื่อสารระหว่างกันผ่านไลบรารีชื่อ "บริดจ์"

การเข้าสู่ระบบ React Native: ขั้นตอนสำคัญที่ต้องพิจารณา

ตอนนี้มารวบรวมข้อมูลเชิงลึกเกี่ยวกับการเข้าสู่ระบบในสภาพแวดล้อมแบบเนทีฟของ React

วิธีอ่านบันทึก

บันทึก JavaScript จะมองเห็นได้ในส่วน "คอนโซล" ของส่วน "เครื่องมือสำหรับนักพัฒนา" คุณจะพบ "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ในเบราว์เซอร์ที่ใช้สำหรับการดีบัก JavaScript ระยะไกล แต่นักพัฒนา React Native สามารถดูบันทึกเหล่านี้ได้เมื่อเชื่อมต่อดีบักเกอร์ และสิ่งนี้อาจทำให้กระบวนการดำเนินการแอพช้าลงในระดับหนึ่ง ดังนั้นทางออกคืออะไร? คุณต้องใช้คำสั่ง เช่น react-native log-ios (สำหรับแอป iOS) และ react-native log-android (สำหรับแอป Android) เพื่อให้แน่ใจว่าอุปกรณ์ของคุณจะไม่ทำงานช้าลงในขณะที่กำลังบันทึก ด้วยวิธีนี้ คุณจะทราบข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นในแอปทั้งหมด ไม่ใช่เฉพาะเธรด JavaScript

เรามาคุยกันในรายละเอียดเพื่อให้คุณมีความชัดเจนมากขึ้นในการอ่านบันทึก!

บันทึกคอนโซล

หากต้องการดูบันทึกคอนโซล คุณต้องเรียกใช้คำสั่ง npx expo start และเชื่อมต่ออุปกรณ์ บันทึกคอนโซลจะปรากฏในกระบวนการเทอร์มินัล รันไทม์จะส่งบันทึกเหล่านี้ไปยัง Expo CLI ผ่านเว็บซ็อกเก็ต ที่นี่ คุณจะได้รับบันทึกที่มีความเที่ยงตรงต่ำเนื่องจากเครื่องมือสำหรับการพัฒนาไม่ได้เชื่อมต่อโดยตรงกับเครื่องมือ หากต้องการสร้างบันทึกที่มีความเที่ยงตรงสูง คุณสามารถใช้ฟังก์ชันการบันทึกขั้นสูง เช่น console.table สำหรับสิ่งนี้ คุณต้องสร้างโครงสร้างการพัฒนาโดยใช้ Hermes จากนั้นเชื่อมต่อกับตัวตรวจสอบ Hermes เป็นเครื่องมือ JS ที่ปรับให้เหมาะกับสภาพแวดล้อมดั้งเดิมของ React Hermes ปรับปรุงเวลาเริ่มต้นของแอปโดยการรวบรวม JS ล่วงหน้าเป็น bytecode

บันทึกระบบ

บันทึกประเภทนี้มีประโยชน์หากคุณต้องการดูบันทึกสำหรับทุกสิ่งที่เกิดขึ้นบนอุปกรณ์ของคุณและบันทึกที่สร้างโดยระบบปฏิบัติการเช่นเดียวกับแอปอื่นๆ คุณต้องใช้คำสั่งต่อไปนี้ในเทอร์มินัลเพื่อจุดประสงค์นี้

สำหรับอุปกรณ์ Android: npx react-native log-android

สำหรับอุปกรณ์ iOS: react-native log-npxios

วิธีเขียนบันทึก

นี่คือวิธีการเขียนบันทึก! ผลลัพธ์ของคุณไปยังบันทึก React Native Console จะปรากฏในบันทึกของแอปพลิเคชัน สิ่งสำคัญคือต้องใช้ระดับการบันทึกที่เหมาะสมในขณะที่เขียนบันทึก นอกจาก console.log แล้ว ยังมีล็อกระดับอื่นๆ เช่น console.info, console.warn, console.debug เป็นต้น แต่ละล็อกเหล่านี้มีวัตถุประสงค์เฉพาะและให้การควบคุมที่ละเอียดยิ่งขึ้นในระดับข้อมูลที่จำเป็น คุณสามารถใช้ console.info เพื่อหาว่าชุดของเหตุการณ์เกิดขึ้นตามรูปแบบที่คาดไว้หรือไม่ ใช้ console.warn หากเกิดอินสแตนซ์ที่ไม่คาดคิด ตัวอย่างเช่น การตอบสนองของเซิร์ฟเวอร์ที่ไม่ได้ผิดทั้งหมดแต่ดูน่าสงสัย consoe.debug จะใช้เมื่อคุณต้องการบันทึกชั่วคราวเพื่อแก้ไขปัญหา

ความสำคัญของการบันทึกไลบรารี

ขอแนะนำให้ใช้ไลบรารีการบันทึกขณะเขียนบันทึก เนื่องจากจะบันทึกบันทึกตามระดับต่างๆ ตามความต้องการของลูกค้า บันทึกจะถูกบันทึกในรูปแบบไฟล์ที่เข้ารหัส และข้อความบันทึกจะถูกส่งหรือแสดงสำหรับการอ้างอิงของนักพัฒนา เครื่องมือตัดไม้ที่พร้อมใช้งานดังกล่าวช่วยประหยัดเวลาและความพยายามสำหรับนักพัฒนา

หากไม่มีไฟล์บันทึกที่เหมาะสมในสภาพแวดล้อมการใช้งานจริง การแก้ปัญหาจะยากขึ้น เนื่องจากไฟล์บันทึกเป็นแหล่งข้อมูลเดียวที่ช่วยคุณแก้ไขจุดบกพร่องของปัญหาที่ไม่คาดคิดหรือข้อผิดพลาดที่ไม่ได้เชื่อมต่อ การใช้ไลบรารีการบันทึกช่วยแก้ไขข้อจำกัดนี้

ตอบโต้ Native Logging Libraries: ตัวอย่าง

React-native-file-logger

React-native-file-logger เป็นตัวบันทึกไฟล์สำหรับสภาพแวดล้อมแบบเนทีฟแบบโต้ตอบ และสามารถต่อท้ายข้อความจากการเรียกคอนโซลลงในไฟล์บันทึกที่ใช้ตัวบันทึกไฟล์จาก Logback (สำหรับ Android) และ CocoaLumberjack (สำหรับ iOS) กำหนดค่าโดยใช้คำสั่ง: FileLogger.configure() เมื่อกำหนดค่าแล้ว มันจะบันทึกการเรียก console.log/debug/… ที่มีอยู่ทั้งหมดลงในไฟล์โดยอัตโนมัติ

React-native-file-logger เขียนใน TypeScript และเสนอนโยบายการม้วนไฟล์เพิ่มเติม ไฟล์จะถูกรีดตามขนาดและเวลาที่ต้องการ นโยบายการหมุนสามารถปรับแต่งได้สูง คุณสามารถปรับแต่งระดับบันทึกสำหรับเอาต์พุตไฟล์และไดเร็กทอรีบันทึก ซึ่งเป็นพาธที่เก็บไฟล์บันทึก นอกจากนี้ หากคุณไม่ต้องการใช้การเรียกคอนโซลสำหรับการบันทึกไฟล์ คุณมีตัวเลือกในการเขียนข้อความไปยังไฟล์บันทึกโดยตรงโดยใช้ logger API ของคุณ

คนตัดไม้นี้ยังสามารถส่งไฟล์บันทึกทางอีเมลให้กับนักพัฒนาโดยไม่ต้องพึ่งไลบรารี่อื่นใด คนตัดไม้ใช้ global._inspectorLog ที่ไม่มีเอกสารของ React Native เมื่อใช้ React-native-file-logger คุณสามารถสกัดกั้นการเรียกคอนโซลและดึงข้อความบันทึกที่จัดรูปแบบได้

บันทึกพื้นเมืองตอบสนอง

ตัวบันทึก React Native นี้มาพร้อมกับ "ระดับการบันทึก" และ "การขนส่ง" ที่กำหนดเอง เช่น การเขียนไฟล์ คอนโซลสี ฯลฯ ความรุนแรงของแต่ละระดับการบันทึกจะแสดงขึ้น ระดับบันทึกจะจัดเรียงจากน้อยไปหามากตามระดับความสำคัญ หลังจากนั้น “ขนส่ง” จะจัดการบันทึก “การขนส่ง” เป็นฟังก์ชันที่บันทึก แสดง และส่งข้อความบันทึก

สำหรับการติดตั้ง ให้รันหนึ่งในสองคำสั่งต่อไปนี้:

ติดตั้ง npm – บันทึกบันทึกการตอบสนองดั้งเดิม

หรือ

เส้นด้ายเพิ่ม react-native-log

ตอนนี้ตั้งลูกบอลกลิ้ง! ไปที่ react-native-logs และจากนั้น

นำเข้า { คนตัดไม้ }

จากนั้นรันคำสั่ง var log = logger.createLogger

เมธอด “createLogger” ช่วยให้คุณสร้างตัวบันทึกอย่างง่ายที่มีระดับคำเตือน ดีบัก และข้อผิดพลาด สำหรับการปรับแต่งตัวบันทึกนี้ คุณต้องส่งออบเจกต์การกำหนดค่าไปยังเมธอด “createLogger”

เมื่อมาถึง "การขนส่ง" นักพัฒนาสามารถเขียนข้อกำหนด "การขนส่ง" ของตนเองสำหรับการส่งบันทึกไปยังบริการคลาวด์ คุณยังสามารถเลือกจากตัวเลือก "การขนส่ง" เริ่มต้นหลายตัว เช่น HideDate, HideLevel, loggerName, dateFormat เป็นต้น หากคุณตั้งค่าพารามิเตอร์ – transportOptions ที่นี่ คุณจะสามารถเพิ่มตัวเลือกใหม่ที่ส่งผ่านไปยังการขนส่งและสามารถเขียนทับตัวเลือกการขนส่งที่ตั้งไว้ล่วงหน้าได้

สามารถตั้งค่าระดับความรุนแรงของบันทึกได้ สำหรับสิ่งนี้คุณต้องส่งชื่อ (สตริง) ของระดับที่มีความสำคัญน้อยที่สุด ที่นี่ คุณสามารถเขียนทับตัวเลือก config.severity ใดๆ ที่ได้รับการตั้งค่าไว้เมื่อสร้างตัวบันทึก

วิธีจัดการข้อผิดพลาดประเภทต่างๆ ที่แสดงโดยบันทึก

คำเตือนและข้อผิดพลาดทั้งหมดในการสร้างการพัฒนาจะปรากฏภายใน LogBox ที่มีอยู่ในแอป LogBox นี้ถูกปิดใช้งานโดยอัตโนมัติระหว่างการเผยแพร่บิลด์การผลิต โปรดจำไว้ว่าการเพิกเฉยต่อบันทึกไม่ใช่แนวปฏิบัติที่ดีและควรเป็นทางเลือกสุดท้าย และถ้าคุณต้องเพิกเฉยต่อบันทึกใดๆ เนื่องจากเหตุผลที่หลีกเลี่ยงไม่ได้ ให้สร้างงานเพื่อแก้ไขบันทึกเหล่านั้นในภายหลัง

ข้อผิดพลาดของคอนโซล

คุณสามารถดูข้อผิดพลาดและคำเตือนของคอนโซลได้ในรูปแบบของการแจ้งเตือนบนหน้าจอที่มีป้ายสีเหลืองหรือสีแดง จำนวนคำเตือนและข้อผิดพลาดจะแสดงขึ้นด้วย หากต้องการอ่านคำเตือนและข้อผิดพลาดของคอนโซล คุณต้องคลิกการแจ้งเตือน หลังจากนั้น ข้อมูลแบบเต็มหน้าจอเกี่ยวกับบันทึกจะปรากฏขึ้น และคุณจะสามารถแบ่งหน้าผ่านทุกบันทึกที่อยู่ในคอนโซลได้

คุณสามารถซ่อนการแจ้งเตือนดังกล่าวได้โดยใช้คำสั่ง: LogBox.ignoreAllLogs() วิธีการนี้มีประโยชน์ในขณะที่คุณกำลังสาธิตผลิตภัณฑ์ คุณยังสามารถซ่อนการแจ้งเตือนโดยใช้วิธี "ต่อบันทึก" ที่นี่ คุณต้องพิมพ์คำสั่ง: LogBox.ignoreLogs() วิธีการนี้สามารถใช้เพื่อจัดการกับคำเตือนที่มีเสียงดังซึ่งคุณไม่สามารถแก้ไขได้ ตัวอย่างเช่น การพึ่งพาบุคคลที่สาม

ข้อผิดพลาดทางไวยากรณ์

เมื่อใดก็ตามที่มีข้อผิดพลาดทางไวยากรณ์ ข้อผิดพลาด LogBox แบบเต็มหน้าจอจะปรากฏขึ้น LogBox จะแสดงการติดตามสแต็กและตำแหน่งของข้อผิดพลาดทางไวยากรณ์ ข้อผิดพลาดดังกล่าวไม่สามารถยกเลิกได้เนื่องจากแสดงถึงการดำเนินการ JS ที่ไม่ถูกต้องซึ่งจำเป็นต้องได้รับการแก้ไขก่อนที่คุณจะดำเนินการตามขั้นตอนการพัฒนาแอปต่อไป นี่คือวิธีที่คุณต้องดำเนินการเพื่อยกเลิกข้อผิดพลาดทางไวยากรณ์ แก้ไขข้อผิดพลาด จากนั้น คุณสามารถใช้หนึ่งในสองวิธีนี้ – เปิดใช้งานการรีเฟรชอย่างรวดเร็วและบันทึกเป็น “ปิดโดยอัตโนมัติ” หรือปิดใช้งานการรีเฟรชอย่างรวดเร็วและโหลดซ้ำโดยใช้คำสั่ง cmd+r

ข้อผิดพลาด JS ที่ไม่ได้จัดการ

ข้อผิดพลาด JavaScript ที่ไม่ได้รับการจัดการก่อนหน้านี้จะแสดง LogBox แบบเต็มหน้าจอโดยอัตโนมัติ โดยแสดงแหล่งที่มาของข้อผิดพลาด คุณสามารถปิดหรือย่อข้อผิดพลาดดังกล่าวเพื่อดูสถานะของแอปพลิเคชันเมื่อข้อผิดพลาดเหล่านี้เกิดขึ้น อย่างไรก็ตาม ขอแนะนำให้แก้ไขข้อผิดพลาดเหล่านี้

บรรทัดล่าง

ฉันหวังว่าคุณจะได้รวบรวมข้อมูลเชิงลึกที่นำไปปฏิบัติได้เกี่ยวกับแนวทางต่างๆ ในการเข้าสู่ระบบ React Native ในการสร้างแอป React Native ระดับสูง ทีมพัฒนาจะต้องมีความพร้อมในการแก้ไขเหตุการณ์และข้อผิดพลาดที่ไม่คาดคิด และการบันทึกช่วยให้คุณค้นหาสาเหตุของข้อผิดพลาดและทำให้นักพัฒนาสามารถแก้ไขปัญหาได้ง่าย อย่างไรก็ตาม คุณต้องดำเนินกระบวนการบันทึกอย่างเหมาะสมเพื่อเก็บเกี่ยวผลประโยชน์โดยไม่ส่งผลกระทบต่อ UX ดังนั้น สิ่งสำคัญคือต้องเลือกบริษัทพัฒนาแอป React Native ที่มีประสบการณ์เพื่อดำเนินโครงการพัฒนาซอฟต์แวร์ของคุณ