Redux Logging dalam Pengeluaran dengan Logrocket

Logrocket: DVR Aplikasi Web Anda, Membantu Redux Application Debugging

Logrocket adalah alat pemaju revolusioner, seperti DVR aplikasi web, merakam setiap peristiwa yang berlaku di laman web. Ia merekodkan tindakan dan status Redux, log konsol, ralat JavaScript, jejak timbunan, permintaan/respons rangkaian, metadata penyemak imbas dan log adat, dan menghasilkan semula video tepat tahap piksel walaupun aplikasi halaman tunggal yang paling kompleks.

sukar untuk memahami masalah dalam aplikasi web. Dari kesilapan JavaScript misteri, bug yang dilaporkan oleh pengguna kepada masalah yang terdapat di QA, pemaju telah bekerja keras untuk menyelesaikan masalah yang mempengaruhi pengguna. Dan ini hanya masalah yang jelas - kebanyakan pepijat tidak pernah dilaporkan kerana pengguna yang menghadapi pengalaman buruk hanya meninggalkan atau menahannya dengan senyap.

Untuk menyelesaikan masalah ini, pemaju semakin mengadopsi alat pembalakan depan, seperti perpustakaan pengurusan negara moden seperti Redux meninggalkan jejak audit yang kaya. Tindakan rakaman dan status dalam persekitaran pengeluaran menjadikannya mudah untuk memahami bug dan isu yang dilaporkan pengguna.

Artikel ini akan menunjukkan kepada anda bagaimana untuk menyediakan pembalakan Redux menggunakan Logrocket dan kemudian membincangkan teknik untuk menjadikan aplikasi Redux lebih mudah untuk debug.

Artikel ini pada asalnya diterbitkan di logrocket.com dan diterbitkan semula di sini dengan kebenaran penulis.

Logrocket: DVR untuk Aplikasi Web

Logrocket adalah jenis alat pemaju baru. Ia seperti DVR untuk aplikasi web, merakam segala yang sebenarnya berlaku di laman web. Ia berfungsi dengan sempurna dengan sebarang aplikasi, tidak kira apa kerangka kerja yang digunakan, dan mempunyai plugin yang dapat merakam konteks tambahan dari React, Redux, Vue.js, dan Angular. Dengan Logrocket, anda boleh memainkan semula sesi yang mengandungi pepijat atau isu pengguna untuk dengan cepat memahami punca akar tanpa meneka mengapa masalah berlaku.

Di samping penebangan tindakan dan status redux, Logrocket juga merekodkan log konsol, ralat JavaScript, jejak timbunan, permintaan rangkaian/respons dengan tajuk dan badan, metadata penyemak imbas dan log adat. Ia juga mengesan DOM untuk merekodkan HTML dan CSS pada halaman, menghasilkan semula video tepat piksel piksel walaupun aplikasi satu halaman yang paling kompleks.

Tetapkan Logrocket

Menyediakan Logrocket adalah mudah, anda hanya perlu menambah beberapa baris kod ke aplikasi anda:

Pasang menggunakan npm: .

Buat akaun percuma di https://app.logrocket.com dan perhatikan ID permohonan anda.

Inisialisasi Logrocket dalam aplikasi anda:
1. npm i --save logrocket
tambah middleware redux:

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

Ini adalah persediaan asas - di sini adalah semua yang anda perlukan untuk mula menggunakan Logrocket!

Logrocket juga menyediakan plugin untuk pelaksanaan fluks lain seperti NGRX dan VUEX, yang boleh anda baca di sini.

Sesi Pengguna Replay



Memainkan semula sesi di Logrocket adalah seperti melihatnya berlaku dalam penyemak imbas anda sendiri. Anda boleh menyemak tindakan Redux, termasuk muatan tindakan penuh dan status sebelumnya dan seterusnya.

Logrocket menangkap permintaan dan tindak balas rangkaian dan membolehkan anda menggali permintaan tertentu dan melihat tajuk dan badan. Carta air terjun memaparkan masa, membolehkan anda melihat permintaan yang perlahan, atau jika keadaan perlumbaan yang berpotensi telah berlaku.

Kadang-kadang, log redux sahaja tidak cukup untuk memahami pepijat, terutamanya apabila berurusan dengan isu yang dilaporkan pengguna. Main balik video Logrocket membantu dengan membolehkan anda melihat apa yang pengguna lihat dalam aplikasi anda.

kerana video ini sebenarnya membina semula DOM (bukan video sebenar), anda boleh menyemak html/css untuk pepijat visual, atau bermain pada kelajuan 2x untuk dengan cepat memahami bagaimana pengguna melakukannya dalam aplikasi ketika berurusan dengan sokongan isu apa yang berlaku.
mengintegrasikan pembalakan redux ke dalam aliran kerja anda
Keupayaan untuk memainkan semula sesi pengguna dan melihat log redux sangat berguna sepanjang aliran kerja pembangunan.
Betulkan Bug
Logrocket mengintegrasikan dengan alat pelaporan pepijat seperti Sentry dan BugsNag, membolehkan anda melihat log dan video redux untuk setiap bug. Ini bukan sahaja membantu memperbaiki pepijat, tetapi juga membantu memahami kesan kesilapan, kerana beberapa kesilapan JavaScript benar -benar tidak relevan. Dengan menonton video apabila ralat berlaku, anda boleh dengan mudah memberitahu sama ada ia sebenarnya memberi kesan kepada pengguna atau boleh diabaikan.

Sokongan

Pengguna sering melaporkan masalah, tetapi tidak memberikan konteks yang cukup untuk memahami dengan tepat apa yang sedang berlaku.

Jika anda menggunakan alat sokongan sembang seperti Intercom, anda boleh mengintegrasikan Logrocket secara langsung untuk menambah komen dengan URL yang direkodkan apabila pengguna mula berbual.

Jika anda mengintegrasikan dengan alat analisis yang lebih umum, anda boleh menambah URL rakaman menggunakan API Penjejakan seperti yang ditunjukkan di bawah:

menggunakan sepenuhnya pembalakan redux dalam persekitaran pengeluaran

Pembalakan persekitaran pengeluaran segera berguna dalam semua aplikasi Redux, tetapi dengan membina permohonan anda dengan pembalakan dalam fikiran, anda boleh memastikan bahawa pembalakan paling berguna apabila masalah debugging.

Cuba simpan sebahagian besar negeri di redux

Saya tidak mahu membincangkan hujah antara negeri tempatan dan Redux State di sini, tetapi apabila memutuskan sama ada bahagian negara tertentu harus berada di Redux, tanya diri anda jika ia membantu melihat keadaan itu ketika menyahpepijat soalan. Jika jawapannya adalah ya, pertimbangkan untuk meletakkan keadaan itu ke Redux supaya ia akan dilog bersama dengan laporan kemalangan dan isu pengguna.

Gunakan perpustakaan pemerolehan data menggunakan redux

perpustakaan seperti Apollo-Client (untuk GraphQL) dan Redux-Query (untuk rehat) semuanya memudahkan pengambilan data dari rangkaian melalui Redux. Mereka menggunakan Redux sebagai lapisan kegigihan, yang bermaksud bahawa apabila menyahpepijat masalah, anda boleh menyemak log redux untuk melihat data yang telah diambil oleh pelanggan -pelanggan ini.

Jika anda lebih suka pendekatan yang lebih mudah, anda boleh menulis data anda sendiri untuk mendapatkan "rangka kerja" dengan hanya menjadualkan tindakan eksplisit apabila menanyakan dan menerima data dari rangkaian.

menggunakan redux untuk mengendalikan sumber ketidakpastian

Apabila mengakses data dari API seperti WebSockets, Storage Local, IndexedDB dan juga tarikh (), pertimbangkan penjadualan tindakan Redux yang mengandungi hasil supaya anda dapat dengan mudah debug data ini pada masa akan datang. Sebagai contoh, apabila mendengar WebSocket, jadilah tindakan Redux pada setiap mesej - supaya anda dapat melihat data dalam log Redux.

Gunakan API Konsol Lain

Kaedah konsol seperti konsol.time (), console.count (), dan console.group () membolehkan anda menambah data yang kaya ke log, seperti kiraan rendering komponen React, masa transaksi, dan log kitaran hayat komponen.

membina dan memuat naik peta sumber ke Logrocket

Logrocket menyokong pemetaan sumber, yang boleh anda muat naik melalui CLI. Dengan melakukan ini, anda dapat melihat ralat JavaScript, tindakan redux, log konsol, dan melambangkan jejak timbunan untuk permintaan rangkaian, yang membolehkan anda melihat di mana tindakan tertentu dicetuskan dalam kod anda.

Kesimpulan

React dan Redux sering dipuji sebagai alat untuk membina yang boleh dipelihara aplikasi -salah satu komponen penting ialah Debugability . Rakaman data Redux dalam persekitaran pengeluaran dapat memberikan pandangan sedemikian kerana pepijat dan isu-isu yang dilaporkan pengguna lain dapat dengan mudah didebitkan dengan memeriksa status Redux, permintaan rangkaian, dan DOM.

Pembalakan Redux dengan Logrocket dapat memudahkan kerja membetulkan pepijat dan pengguna yang menyokong. Anda boleh mula menggunakan Logrocket di sini.

Soalan Lazim (Soalan Lazim) pada Pembalakan Redux dalam Persekitaran Pengeluaran Menggunakan Logrocket

Apakah fungsi utama Logrocket dalam pembalakan redux?

Logrocket adalah alat yang berkuasa yang membantu pemaju menjejaki, merakam dan memahami interaksi pengguna dalam aplikasi web mereka. Ia memberikan pandangan yang komprehensif tentang apa yang sedang berlaku dalam aplikasi, termasuk permintaan rangkaian, log konsol, dan juga tindakan pengguna. Ini menjadikannya lebih mudah untuk mengenal pasti dan menyelesaikan masalah, kerana pemaju dapat melihat dengan tepat apa yang menyebabkan masalah. Logrocket amat berguna dalam aplikasi Redux kerana ia boleh log tindakan dan negeri -negeri yang tidak dapat memaparkan urutan peristiwa dengan jelas.

Bagaimana Logrocket Berbeza dari Alat Pembalakan Lain?

Logrocket menonjol untuk ciri replay sesi. Ciri ini membolehkan pemaju memainkan semula sesi yang bermasalah dan melihat dengan tepat apa yang dilihat pengguna. Ini boleh menjadi tidak ternilai dalam mengenal pasti dan menetapkan pepijat. Di samping itu, Logrocket mengintegrasikan dengan lancar dengan Redux, menjadikannya mudah untuk log tindakan Redux dan keadaan.

Bagaimana untuk mengintegrasikan Logrocket dengan aplikasi Redux saya?

Mengintegrasikan Logrocket dengan Aplikasi Redux sangat mudah. Selepas memasang Logrocket melalui NPM, anda boleh memulakannya dalam fail kemasukan aplikasi. Anda kemudian boleh menggunakan middleware Redux Logrocket untuk log tindakan dan status redux. Middleware ini boleh ditambah apabila membuat storan Redux.

Bolehkah saya menggunakan Logrocket dalam persekitaran pengeluaran?

Ya, Logrocket direka untuk digunakan dalam persekitaran pengeluaran. Ia mempunyai pelbagai ciri yang menjadikannya sesuai untuk kegunaan pengeluaran, seperti kawalan privasi yang melindungi data pengguna sensitif dan pengoptimuman prestasi yang memastikan aplikasi tidak melambatkan.

Apakah jenis data yang boleh mencatatkan rekod?

Logrocket boleh merakam pelbagai data, termasuk permintaan rangkaian, log konsol, tindakan redux dan status, dan interaksi pengguna. Ini memberikan pandangan yang komprehensif tentang apa yang sedang berlaku dalam aplikasi, menjadikannya lebih mudah untuk mengenal pasti dan membetulkan isu -isu.

Bagaimana Logrocket Mengendalikan Data Pengguna Sensitif?

Logrocket mempunyai kawalan privasi yang kuat yang dapat melindungi data pengguna yang sensitif. Anda boleh mengkonfigurasi kawalan ini untuk mengelakkan data tertentu daripada direkodkan. Sebagai contoh, anda boleh menghalang input borang pembalakan untuk melindungi kata laluan pengguna.

Bolehkah saya menggunakan Logrocket dengan perpustakaan pengurusan negeri yang lain?

Ya, sementara Logrocket mengintegrasikan dengan lancar dengan Redux, ia juga boleh digunakan dengan perpustakaan pengurusan negeri yang lain. Ia menyediakan middleware untuk beberapa perpustakaan popular, termasuk Mobx dan Vuex.

bagaimana logrocket membantu debug?

Ciri replay sesi Logrocket boleh menjadi sangat berharga dalam debugging. Dengan memainkan semula sesi yang bermasalah, pemaju dapat melihat dengan tepat apa yang pengguna lihat, menjadikannya lebih mudah untuk mengenal pasti dan memperbaiki pepijat. Di samping itu, pembalakan komprehensif mengenai permintaan rangkaian, log konsol, dan interaksi pengguna dapat memberikan konteks yang berharga apabila debugging.

Bolehkah saya menyesuaikan data yang direkodkan oleh Logrocket?

Ya, Logrocket sangat disesuaikan. Anda boleh mengkonfigurasi data yang akan dilog masuk, dan anda juga boleh menambah log tersuai untuk menjejaki peristiwa atau negeri tertentu dalam aplikasi anda.

Logrocket sesuai untuk aplikasi besar?

Ya, Logrocket direka untuk mengendalikan aplikasi besar. Ia mempunyai pengoptimuman prestasi untuk memastikan bahawa aplikasi tidak diperlahankan dan boleh mengendalikan banyak log. Di samping itu, keupayaan carian dan penapisan yang kuat Logrocket menjadikannya mudah untuk mencari log yang relevan dalam dataset yang besar.

Atas ialah kandungan terperinci Redux Logging dalam Pengeluaran dengan Logrocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!