Masuk Bereaksi Asli: Yang Perlu Anda Ketahui!

Logging adalah aspek penting dalam proyek pengembangan aplikasi React Native karena merupakan salah satu metode termudah dan tercepat untuk men-debug aplikasi pada fase pengembangan itu sendiri. Logging memberikan informasi rinci dan umpan balik tentang masalah saat kode sedang berjalan. Ini juga membantu pengembang untuk memahami perilaku aplikasi.

Namun, logging harus dilakukan selama proses pengembangan aplikasi; itu tidak bermanfaat lagi, setelah aplikasi diterapkan. Ini karena log ini dibuat di sisi klien. Oleh karena itu, selama fase pasca penerapan, kesalahan yang terdeteksi melalui log hanya akan dapat diakses oleh pengguna dan hilang di browser mereka. Tim pengembangan dapat mengidentifikasi kesalahan ini hanya jika pengguna mengisi laporan bug, yang kemungkinan kecil akan terjadi. Sebagian besar pengguna akan meninggalkan aplikasi alih-alih melaporkan masalah.

Posting ini memberikan wawasan menyeluruh tentang masuk ke proyek React Native dan metode untuk mengatasi keterbatasan. Namun, sebelum kita menyelami lebih dalam, mari kita intip arsitektur React Native App.

React Native Architecture/Lingkungan Eksekusi

Lingkungan eksekusi React Native terdiri dari tiga utas utama – utas “Native”, utas “JS”, dan utas latar belakang yang menangani node bayangan. Utas ini berkomunikasi satu sama lain melalui perpustakaan bernama "Jembatan".

Masuk Bereaksi Asli: Langkah-Langkah Penting untuk Dipertimbangkan

Sekarang, mari kumpulkan wawasan komprehensif tentang login di lingkungan React Native.

Cara Membaca Log

Log JavaScript terlihat di dalam bagian "konsol" dari bagian "alat pengembang". Anda akan menemukan "alat pengembang" di browser yang digunakan untuk debugging JavaScript jarak jauh. Namun, pengembang React Native dapat melihat log ini saat debugger terhubung dan ini mungkin memperlambat proses eksekusi aplikasi sampai batas tertentu. Jadi, apa solusinya? Anda perlu menggunakan perintah seperti react-native log-ios (untuk aplikasi iOS) & react-native log-android (untuk aplikasi Android) untuk memastikan bahwa perangkat Anda tidak melambat saat login sedang berlangsung. Dengan cara ini, Anda juga mengetahui lebih banyak tentang apa yang terjadi di seluruh aplikasi dan bukan hanya utas JavaScript.

Mari kita bahas ini secara detail untuk memberi Anda kejelasan lebih lanjut tentang membaca Log!

Log Konsol

Untuk melihat log Konsol, Anda perlu menjalankan perintah npx expo start dan menghubungkan perangkat; log Konsol akan muncul dalam proses terminal. Runtime mengirimkan log ini ke Expo CLI melalui soket web. Di sini, Anda mendapatkan log fidelitas rendah karena alat dev tidak terhubung langsung ke mesin. Untuk menghasilkan log dengan fidelitas lebih tinggi, Anda dapat menggunakan fungsi logging tingkat lanjut seperti console.table. Untuk ini, Anda perlu membuat bangunan pengembangan menggunakan Hermes, lalu menghubungkan inspektur. Hermes adalah mesin JS yang dioptimalkan untuk lingkungan React Native. Hermes meningkatkan waktu mulai aplikasi dengan kompilasi JS sebelumnya menjadi bytecode.

Log Sistem

Jenis log ini bermanfaat jika Anda ingin melihat log untuk semua yang terjadi di perangkat Anda dan juga log yang dihasilkan oleh sistem operasi serta oleh aplikasi lain. Anda perlu menggunakan perintah berikut di terminal untuk tujuan ini.

Untuk perangkat Android: npx react-native log-android

Untuk perangkat iOS: react-native log-npxios

Cara Menulis Log

Inilah cara menulis log! Keluaran Anda ke log React Native Console muncul di log Aplikasi. Penting untuk menggunakan level log yang tepat saat menulis log. Selain console.log, ada level log lain seperti console.info, console.warn, console.debug, dll. Masing-masing log ini memiliki tujuan tertentu dan memberikan kontrol yang lebih terperinci pada level informasi yang dibutuhkan. Anda dapat menggunakan console.info untuk mencari tahu apakah serangkaian peristiwa terjadi sesuai dengan pola yang diharapkan. console.warn digunakan jika beberapa kejadian tak terduga terjadi; misalnya, respons server yang tidak sepenuhnya salah tetapi terlihat meragukan. consoe.debug digunakan saat Anda memerlukan log sementara untuk menyelesaikan masalah.

Pentingnya Perpustakaan Logging

Dianjurkan untuk menggunakan pustaka logging saat menulis log karena akan menyimpan log berdasarkan level yang berbeda sesuai kebutuhan klien. Log akan disimpan dalam format file terenkripsi dan pesan log akan dikirim atau ditampilkan untuk referensi pengembang. Logger siap pakai seperti itu menghemat waktu dan tenaga bagi pengembang.

Jika file log yang tepat tidak ada di lingkungan produksi, akan menjadi tantangan untuk men-debug masalah. Ini karena file log adalah satu-satunya sumber informasi yang membantu Anda untuk men-debug masalah tak terduga atau kesalahan terputus. Penggunaan pustaka logging mengatasi batasan ini.

React Native Logging Library: Contoh

Bereaksi-asli-file-logger

React-native-file-logger adalah file-logger untuk lingkungan asli reaksi dan dapat menambahkan pesan dari panggilan konsol ke file log menggunakan file logger dari Logback (untuk Android) & CocoaLumberjack (untuk iOS). Konfigurasikan menggunakan perintah: FileLogger.configure(). Setelah dikonfigurasi, itu akan secara otomatis mencatat semua panggilan console.log/debug/… yang ada ke dalam file.

React-native-file-logger ditulis dalam TypeScript dan menawarkan kebijakan pengguliran file opsional. File-file tersebut digulung berdasarkan ukuran dan waktu yang dibutuhkan. Kebijakan bergulir sangat dapat disesuaikan. Anda dapat menyesuaikan tingkat log untuk keluaran file dan direktori log, jalur tempat file log disimpan. Selain itu, jika Anda tidak ingin menggunakan panggilan konsol untuk pencatatan file, Anda memiliki opsi untuk langsung menulis pesan ke file log menggunakan API logger Anda.

Logger ini juga dapat mengirim log file melalui email ke pengembang tanpa harus bergantung pada perpustakaan lain. Logger menggunakan global._inspectorLog React Native yang tidak berdokumen. Menggunakan React-native-file-logger, Anda dapat mencegat panggilan konsol dan mengambil pesan log yang diformat.

reaksi-asli-log

React Native logger ini hadir dengan "level log" dan "transport" khusus seperti penulisan file, konsol berwarna, dll. Tingkat keparahan setiap level log ditampilkan; tingkat log disusun dalam urutan menaik berdasarkan tingkat kepentingannya. Setelah itu, "transportasi" mengelola log. "Transportasi" adalah fungsi yang menyimpan, menampilkan, & mengirim pesan log.

Untuk instalasi, jalankan salah satu dari dua perintah ini:

npm install –save react-native-logs

atau

benang tambahkan react-native-logs

Sekarang atur bola menggelinding! Pergi ke react-native-logs dan dari sana,

impor {pencatat}.

Kemudian jalankan perintah var log = logger.createLogger

Metode "createLogger" memungkinkan Anda membuat logger sederhana yang menawarkan tingkat peringatan, debug, & kesalahan. Untuk menyesuaikan logger ini, Anda perlu meneruskan objek konfigurasi ke metode "createLogger".

Datang ke "transportasi", pengembang dapat menulis spesifikasi "transportasi" mereka sendiri untuk mengirim log ke layanan Cloud. Anda juga dapat memilih dari beberapa opsi "transportasi" default seperti hideDate, hideLevel, loggerName, dateFormat, dll.; jika Anda mengatur parameter – transportOptions. Di sini, Anda juga dapat menambahkan opsi baru yang diteruskan ke transport dan dapat menimpa opsi transport yang telah ditentukan sebelumnya.

Tingkat keparahan log dapat diatur; untuk ini, Anda harus memberikan nama (string) level yang paling tidak penting. Di sini, Anda dapat menimpa opsi config.severity apa pun yang telah disetel saat logger dibuat.

Cara Menangani Berbagai Jenis Kesalahan yang Ditampilkan oleh Log

Semua peringatan & kesalahan dalam build pengembangan muncul di dalam LogBox yang ada di aplikasi. LogBox ini dinonaktifkan secara otomatis selama rilis build produksi. Ingat, mengabaikan log bukanlah praktik yang baik dan harus menjadi pilihan terakhir. Dan, jika Anda harus mengabaikan log apa pun karena beberapa alasan yang tidak dapat dihindari, buatlah tugas untuk memperbaiki log tersebut nanti.

Kesalahan Konsol

Anda dapat melihat kesalahan dan peringatan konsol dalam bentuk notifikasi di layar dengan lencana kuning atau merah. Jumlah peringatan dan kesalahan juga ditampilkan. Untuk membaca peringatan dan kesalahan konsol, Anda perlu mengklik notifikasi. Setelah itu, informasi layar penuh tentang log akan muncul dan Anda akan dapat melakukan paginasi melalui setiap log yang ada di dalam konsol.

Anda dapat menyembunyikan notifikasi tersebut dengan menggunakan perintah: LogBox.ignoreAllLogs(). Pendekatan ini berguna saat Anda memberikan demo produk. Anda juga dapat menyembunyikan notifikasi dengan mengikuti pendekatan “per-log”. Di sini, Anda perlu mengetikkan perintah: LogBox.ignoreLogs(). Pendekatan ini dapat digunakan untuk menangani peringatan bising yang tidak dapat Anda perbaiki; misalnya, yang berada dalam ketergantungan pihak ketiga.

Kesalahan sintaks

Setiap kali ada kesalahan Sintaks, kesalahan LogBox layar penuh muncul. LogBox menunjukkan kepada Anda jejak tumpukan serta lokasi kesalahan Sintaks. Kesalahan seperti itu tidak dapat diabaikan karena menunjukkan eksekusi JS yang tidak valid yang harus diselesaikan sebelum Anda melanjutkan proses pengembangan aplikasi. Ini adalah bagaimana Anda harus bertindak untuk menghilangkan kesalahan Sintaks. Perbaiki kesalahan. Kemudian, Anda dapat menggunakan salah satu dari dua cara ini – Aktifkan Fast Refresh dan simpan sebagai “otomatis tutup” atau nonaktifkan Fast Refresh dan muat ulang menggunakan perintah cmd+r.

Kesalahan JS yang Tidak Tertangani

Kesalahan JavaScript yang sebelumnya tidak tertangani menampilkan LogBox layar penuh secara otomatis, menunjukkan sumber kesalahan. Anda dapat mengabaikan atau meminimalkan kesalahan tersebut untuk melihat status aplikasi saat kesalahan ini muncul. Namun, mengatasi kesalahan ini sangat dianjurkan.

Intinya

Saya harap Anda telah mengumpulkan wawasan yang dapat ditindaklanjuti tentang berbagai pendekatan untuk masuk ke React Native. Untuk membuat aplikasi React Native kelas atas, tim pengembangan harus diperlengkapi dengan baik untuk mengatasi kejadian dan kesalahan yang tidak terduga. Dan, pencatatan membantu Anda menemukan akar penyebab kesalahan dan memudahkan pengembang untuk menyelesaikan masalah. Namun, Anda harus melakukan proses logging dengan tepat untuk mendapatkan manfaatnya tanpa memengaruhi UX. Oleh karena itu, penting untuk memilih perusahaan pengembang aplikasi React Native yang berpengalaman untuk menjalankan proyek pengembangan perangkat lunak Anda.