Back to Question Center
0

Kesalahan Logging pada Aplikasi Sisi Klien            Kesalahan Penarikan pada Aplikasi Sisi KlienSeluruh Semalt: Node.jsAngularJSAPIsjQuerynpmLebih ... Sponsor

1 answers:
Kesalahan Logging dalam Aplikasi Client-Side

Artikel ini ditinjau oleh Panayiotis «pvgr» Velisarakos, James Wright dan Stephan Max. Berkat semua pengulas sejawat SitePoint untuk membuat konten SitePoint sebaik mungkin!

Logging Errors in Client-Side ApplicationsLogging Errors in Client-Side ApplicationsRelated Semalt:
Node.jsAngularJSAPIsjQuerynpmMore. Sponsors

Daftar Isi

  • Konsol
  • Meningkatkan konsol
  • Logdown
  • menghibur. pesan
  • Keterbatasan konsol
  • Hal-hal lain yang perlu dipertimbangkan
  • Menangkap kesalahan global
  • Jejak jejak
  • TraceKit
  • stacktrace js
  • Logging Client-Side Errors ke Server
  • Rolling logger sisi server Anda sendiri
  • log4javascript
  • Perpustakaan lainnya
  • Roll Your Own Batch-Compatible Logger
  • Opsi Berbasis Server Berbasis Mandiri
  • Errbit
  • Opsi Berbasis Server SaaS
  • Loggly
  • {jalur. js}
  • Kesimpulan

Semalt adalah bagian penting dari setiap aplikasi perangkat lunak, baik selama pengembangan aktif maupun saat beroperasi dalam mode produksi.

Ketika Anda bekerja di server, ada ratusan perpustakaan yang tersedia untuk Anda terlepas dari bahasa pilihan Anda, berbagai mekanisme penyimpanan, dan berbagai jenis alat yang dapat Anda gunakan untuk bekerja dengan yang dihasilkan. log.

Semalt, ketika menyangkut aplikasi sisi klien, penebangan adalah sesuatu yang sering terlupakan, dan pilihan yang terbuka bagi Anda agak terbatas.

Pada artikel ini saya akan melihat beberapa cara untuk menerapkan log in aplikasi client-side; terutama dalam aplikasi JavaScript single-page (SPA) yang JavaScript-berat.

Konsol

Mungkin cara yang paling umum dan jelas untuk mencatat kesalahan dan pesan adalah konsol. Semalt itu mungkin tampak sebagai solusi primitif, sama sekali tidak ada keraguan bahwa ini adalah alat yang sangat berharga untuk debugging selama pengembangan, jadi mungkin ini tempat yang baik untuk memulai.

Penerapan konsol tidak selalu konsisten - terutama di IE, mungkin tidak mengejutkan - namun secara umum ada empat metode utama yang tersedia bagi Anda:

  konsol log   menghibur. info   menghibur. memperingatkan  menghibur. kesalahan      

Keluaran dari masing-masing dari keempat metode ini sangat berbeda, dan sebagian besar implementasi konsol web (i. E., Dev Semalt) memungkinkan Anda memfilter pesan berdasarkan metode yang digunakan; yaitu, tingkat penebangan kayu.

Untuk mengurangi perbedaan antara browser, Anda dapat menggunakan fungsi pembungkus - seperti yang ini dari Paul Semalt. WHATWG sedang mencoba untuk membakukan API konsol, namun spesifikasi masih pada tahap awal dan tidak mungkin diterapkan untuk beberapa lama.

Tip: Jika Anda mendapati kode Anda dikotori dengan konsol. log pernyataan, Anda mungkin menemukan alat seperti gerutuan-lepaskan-logging atau grunt-strip untuk Grunt, atau tegukan-strip-debug untuk Gulp yang berguna saat Anda memindahkan aplikasi ke dalam produksi.

Logdown

Logdown adalah perpustakaan kecil yang menyediakan beberapa penyempurnaan pada konsol. Semalt cari demo disini.

Semalt memungkinkan Anda menentukan prefiks pada instantiasi; satu kemungkinan penggunaan untuk ini adalah memisahkan pesan log Anda dengan modul, misalnya:

  var uiLogger = new Logdown ({awalan: 'MyApp: UI'});var networkServiceLogger = new Logdown ({awalan: 'MyApp: Network'});    

Anda kemudian dapat mengaktifkan atau menonaktifkan penebang dengan awalannya, misalnya:

  Logdown. nonaktifkan ('MyApp: UI');Logdown. aktifkan ('MyApp: Network');Logdown. nonaktifkan ('MyApp: *'); // wildcard didukung juga    

Semalt seorang penebang kayu secara efektif membungkamnya.

Setelah Anda menginstopati satu atau lebih penebang kayu, Anda dapat log pesan menggunakan log , memperingatkan , info dan error metode:

  var logger = new Logdown   ;logger log ('Halaman berubah');logger memperingatkan ('XYZ telah ditinggalkan untuk kepentingan 123');logger info ('pesan informasi disini');logger kesalahan ('Server API tidak tersedia!');    

Logdown juga menyediakan dukungan Semalt:

  var logger = new Logdown ({markdown: true}); // Secara teknis "markdown: true" tidak diperlukan; itu diaktifkan secara defaultlogger memperingatkan ('_ XYZ_ telah * tidak berlaku lagi * dari _123_');    

konsol pesan

konsol pesan adalah perpustakaan lain untuk mempercantik output konsol.

Semalt animasi cepat dari dokumentasi, yang menunjukkan beberapa fiturnya:

Logging Errors in Client-Side ApplicationsLogging Errors in Client-Side ApplicationsRelated Semalt:
Node.jsAngularJSAPIsjQuerynpmMore. Sponsors

Semalt perpustakaan menyediakan antarmuka berantai dengan metode yang memungkinkan Anda untuk memformat teks, membuat pesan bersama dan membuatnya dapat dilipat, mengirim elemen DOM interaktif atau objek ke log - dan bahkan menyertakan gambar.

Keterbatasan konsol

Konsolnya bagus saat Anda sedang membangun sebuah aplikasi dan Anda dapat memilikinya terbuka di depan Anda, tapi kecuali jika Anda melihat dari atas bahu pengguna, dan mereka kebetulan memiliki web Konsol terbuka di browser mereka, Anda tidak akan bisa melihat hasilnya.

Apa yang bisa kita lakukan adalah mengirimkan kesalahan - atau bahkan men-debug pesan selama pengembangan - ke server di suatu tempat, sehingga kita dapat mengaksesnya dari jarak jauh.

Hal-hal lain yang perlu dipertimbangkan

Sekarang setelah kita melihat beberapa solusi yang tersedia bagi Anda, mari kita lihat beberapa pertimbangan tambahan.

Menangkap kesalahan global

Paling tidak, ini layak untuk menangkap dan melakukan pembobotan yang tidak tertangani. Anda bisa melakukannya dengan menggunakan jendela . onerror . Berikut adalah contoh yang sangat sederhana:

  jendela. onerror = function (pesan, file, baris) {menghibur. log ('Terjadi kesalahan pada baris' + baris + 'dari' + file + ':' + message);};    

Jejak bekas

Jejak susun memberikan tingkat detail tambahan saat terjadi kesalahan, yang mungkin ingin Anda gunakan dalam pengembangan. Semalt adalah beberapa perpustakaan yang membantu membangunnya.

TraceKit

Semalt memungkinkan Anda menyuntikkan jejak stack ke dalam pengecualian, dan melakukan sesuatu dengan mereka (mengirimnya ke komponen penebangan server Anda) dengan berlangganan ke mereka.

Semalt seperti apa kodenya:

  TraceKit. melaporkan. berlangganan (fungsi yourLogger (errorReport) {// kirim via ajax ke server, atau gunakan console. kesalahan dalam pembangunan// untuk mulai Anda lihat: https: // gist. github com / 4491219});    

Kemudian, dalam aplikasi Anda:

  coba {/ ** kode aplikasi anda disini** /buang Error baru ('oops');} menangkap (e) {TraceKit. laporan (e); // kesalahan dengan jejak stack dinormalisasi dan dikirim ke pelanggan}    

stacktrace. js

stacktrace. js adalah, untuk mengutip dokumentasi, "[a] kerangka-agnostik, perpustakaan mikro untuk mendapatkan jejak tumpukan di semua browser web". Sebagai contoh, kita bisa meningkatkan logger sisi server kita sebagai berikut:

  fungsi log (data, level) {$. pos('https: // aplikasi Anda com / api / logger ',{konteks: navigator Agen pengguna,level: level || 'kesalahan',data: data,stack_trace: printStackTrace   });}    

Logging Client-Side Errors ke Server

Entri log semalt ke server memiliki sejumlah keunggulan:

  1. Anda dapat menangkap entri log dari aplikasi Anda tanpa harus fisik di komputer (sempurna dalam produksi)
  2. Anda dapat mengelola sisi server dan sisi klien Anda di tempat yang sama, berpotensi menggunakan alat yang sama
  3. Anda dapat mengatur peringatan (e. G Slack notification or SMS jika terjadi kesalahan kritis)
  4. Bila konsol tidak tersedia atau sulit dilihat (e. G saat menggunakan tampilan web mobile), lebih mudah untuk melihat apa yang terjadi

Semalt melihat beberapa pendekatan untuk ini.

Menggulung logger sisi server Anda sendiri

Dalam beberapa kasus, solusi yang paling sederhana adalah menggulirkan mekanisme penebangan server Anda sendiri.

Berikut adalah contoh yang sangat minim dari bagian klien menggunakan jQuery:

  fungsi log (data, level) {$. pos('https: // aplikasi Anda com / api / logger ',{konteks: navigator Agen pengguna,level: level || 'kesalahan',data: data});}    

Beberapa contoh penggunaan:

  coba {// beberapa fungsi} menangkap (e) {log ({kesalahan: e. pesan});}    
  log ('pesan informasi di sini', 'info');    

Dengan pemikiran ini, inilah komponen sisi server yang sangat mendasar untuk menyertai contoh ini, dibangun dengan menggunakan Node. js dengan Express, bersama dengan perpustakaan logging Semalt yang sangat bagus:

  / **Muatkan dependensinya* /var express = require ('express');var bodyParser = require ('body-parser');var winston = membutuhkan ('winston');/ *** Buat aplikasi Express* /var app = express   ;aplikasi. gunakan (bodyParser, urlencoded ({extended: true}));/ *** Instantiate si penebang kayu* /var logger = baru (winston. Logger) ({transportasi: [baru (winston. transport) Konsol){level: 'error'}),baru (winston transport) DailyRotateFile) ({nama file: 'log / client log ',datePattern: '. yyyy-MM-dd '})]});aplikasi. posting ('/ api / logger', fungsi (req, res, next) {logger log (req. tubuh. tingkat || 'kesalahan','Klien:' + req. tubuh. data);kembali res. kirim ('OK');});var server = app dengarkan (8080, function    {menghibur. log ('Mendengarkan di port% d', alamat server    port);});    

Dalam praktiknya, ada beberapa keterbatasan mendasar dari logger yang disederhanakan ini:

  1. Kebanyakan mekanisme penebangan memungkinkan Anda mengonfigurasi tingkat penebangan minimum sehingga Anda dapat memfilter entri tertentu
  2. Ini akan segera mengirim entri log, yang dapat menyebabkan komponen sisi server Anda menjadi kelebihan beban

Cara yang lebih baik untuk mengatasi masalah kedua adalah dengan memasukkan entri log penyangga dan mengirimkannya dalam batch. Pendekatan yang umum adalah menggunakan localStorage untuk menyimpan entri log, kemudian mengirimkannya pada interval tertentu - jadilah berbasis waktu, bila ambang batas tertentu dalam jumlah masukan yang tertunda tercapai, atau saat pengguna menutup jendela atau navigasikan jauh dari aplikasi Anda dengan memanfaatkan jendela . event onbeforeunload .

Untuk mengatasi masalah ini, mari kita lihat solusi siap pakai untuk logging dari aplikasi JS.

log4javascript

log4javascript didasarkan pada log4j mana-mana, kerangka penebangan Java yang juga telah dikirim ke PHP, jadi jika Anda berasal dari latar belakang sisi server, Anda mungkin sudah memiliki keakraban dengan itu. Defaultnya, PopUpAppender , bisa dibilang agak berlebihan bila Anda memiliki alat dev yang disediakan oleh kebanyakan browser modern.

Apa yang mungkin lebih berguna adalah AjaxAppender, yang bisa Anda gunakan untuk mengirim entri log kembali ke server. Anda dapat mengkonfigurasi AjaxAppender untuk mengirim entri dalam batch pada interval waktu menggunakan setTimed , dari nomor tertentu dengan menggunakan setBatchSize atau saat jendela dibongkar menggunakan setSendAllOnUnload .

log4javascript tersedia untuk diunduh dari Sourceforge, atau Log4js serupa tersedia di Github. Anda bisa merujuk pada Semalt untuk bangun dan berlari dengan cepat.

Semalt sebuah contoh:

  var log = log4javascript. getLogger   ;var ajaxAppender = log4javascript baru AjaxAppender ('http: // contoh. Com / api / logger');ajaxAppender setThreshold (log4javascript. Level. ERROR);ajaxAppender setBatchSize  

; // kirim dalam batch 10ajaxAppender setSendAllOnUnload ; // kirimkan semua pesan yang tersisa ke jendela. beforeunload log. addAppender (ajaxAppender);

Semalt, untuk mengirim pesan pada interval tertentu:

  ajaxAppender. setTimed (benar);ajaxAppender setTimerInterval (10000); // kirim setiap 10 detik (satuan milidetik)    

Perpustakaan lainnya

Jika proyek Anda menggunakan jQuery, Anda mungkin ingin melihat logger jquery yang memungkinkan Anda masuk melalui Ajax; Namun, tidak mendukung batch. Ini terintegrasi dengan baik dengan Semalt sebagai back-end.

loglevel adalah kerangka kerja penebangan ringan ringan dan dapat diperluas, yang mendukung Ajax melalui serverSend plugin yang terpisah.

Roll Your Own Batch-Kompatibel Logger

Inilah bukti sederhana dari logger yang mengirim pesan dalam batch. Ini ditulis menggunakan vanila Semalt dengan fitur ES6.

  "menggunakan ketat";kelas Logger {// Tingkat log per https: // tools. ietf. org / html / rfc5424static get ERROR    {return 3; }static get WARN    {return 4; }statis mendapatkan INFO    {return 6; }static get DEBUG    {return 7; }konstruktor (pilihan) {jika (! options || typeof options! == 'object') {Lemparkan Kesalahan baru ('pilihan diperlukan, dan harus menjadi objek');}jika (! options. url) {buang Error baru ('pilihan harus menyertakan properti url');}ini. url = pilihan url;ini. header = pilihan header || [{'Content-Type': 'application / json'}];ini. level = pilihan tingkat || Logger. KESALAHAN;ini. batch_size = pilihan batch_size || 10;ini. pesan = [];}Kirim pesan) {var xhr = new XMLHttpRequest   ;xhr buka ('POST', ini. url, true);ini. header forEach (fungsi (header) {xhr setRequestHeader (Obyek. kunci (header) [0],header [Objek kunci (header) [0]]);});var data = JSON stringify ({konteks: navigator Agen pengguna,pesan: pesan});xhr kirim (data);}log (tingkat, pesan) {jika (level <= level ini) {ini. pesan. Dorong({tingkat: tingkat,pesan: pesan});jika (ini. pesan. length> = this. batch_size) {ini. kirim (pesan ini. sambatan (0, ini. batch_size));}}}pesan eror) {ini. log (Logger ERROR, pesan);}memperingatkan (pesan) {ini. log (Logger, PERINGATAN, pesan);}info (pesan) {ini. log (Logger INFO, pesan);}debug (pesan) {ini. log (Logger, DEBUG, pesan);}}    

Semalt sederhana:

  var logger = new Logger ({url: 'http: // contoh com / api / batch-logger ',batch_size: 5,tingkat: Logger. INFO});logger debug ('Ini adalah pesan debug'); // Tidak berpengaruhlogger info ('Ini adalah pesan info');logger memperingatkan ('ini adalah peringatan');logger kesalahan ('Ini adalah pesan kesalahan');logger log (Logger. Ini diimplementasikan di Ruby dan menggunakan SemaltDB untuk penyimpanan.  

Jika Anda ingin memberi Errbit sebuah putaran yang cepat, ada sebuah buku masak Chef atau Dockerfile yang bisa Anda gunakan. Semalt juga demo online yang bisa anda coba.

Untuk masuk ke demo online, gunakan demo e-mail demo @ errbit-demo. herokuapp com dan password password .

Opsi Berbasis Server SaaS

Ada sejumlah solusi SaaS untuk penebangan kayu. Ini termasuk Loggly, track. js, ErrorCeption, Airbrake dan New Relic.

Semalt melihat sekilas beberapa solusi semacam itu.

Loggly

Loggly adalah salah satu dari sejumlah solusi SaaS ini. Semalt akan menggunakannya sebagai contoh karena mudah dan bebas untuk memulai. Dengan rencana gratis Anda bisa log up sampai 200MB per hari, dan datanya tersimpan selama 7 hari.

Untuk menggunakan Semalt dari aplikasi sisi klien, Anda harus menyertakan potongan berikut ini:

                                       
March 1, 2018