Beranda>Kode sumber ASP>Kategori lainnya
Unduh

santai

log + ajax, solusi logging front-end.

lajax mencoba untuk memecahkan masalah ini:

  • Tidak ada log di ujung depan, atau ada log tetapi tidak ada persistensi, sehingga sulit untuk melacak dan menganalisis masalah online;

  • Meskipun pustaka log front-end digunakan, biasanya pustaka tersebut bergantung pada pengembang untuk mencatat log secara manual, dan hal ini tidak dapat diandalkan;

  • Pengecualian yang tidak tertangkap di lingkungan produksi sering kali diabaikan;

  • Browser seluler tidak dapat melihat log yang dicetak oleh console . Sebelumnya, alert atau vConsole biasanya digunakan untuk menemukan masalah, namun kekurangannya adalah kode sumber perlu dimodifikasi khusus untuk tujuan ini;

  • Untuk halaman web yang dihasilkan secara dinamis oleh server, log server asli sistem tidak dapat dikorelasikan dengan log front-end.

Daftar isi

  • Fitur

  • Contoh daring

  • mulai cepat

  • Api

  • Format catatan

  • permintaan identitas

  • Contoh pelayan

  • tes

  • lisensi

Fitur

  • Catat log secara manual, mendukung 3 level log: info , warn , dan error ;

  • Log akan dicetak di konsol browser dalam format yang dioptimalkan;

  • Secara otomatis mencatat kesalahan skrip yang tidak tertangkap;

  • Secara otomatis mencatat pengecualian Janji yang tidak tertangkap;

  • Secara otomatis mencatat awal dan penyelesaian permintaan ajax;

  • Secara otomatis menghasilkan ID permintaan untuk memfasilitasi lokasi log dan korelasi;

  • Log akan dikirim secara batch ke server log yang dikonfigurasi secara teratur;

  • Kompatibilitas yang baik dan mekanisme penanganan pengecualian.

Contoh daring

http://eshengsky.github.io/lajax/

mulai cepat

unduh

  • Unduh melalui npm: 
 > npm install lajax
  • Atau unduh paket terkompresi di halaman rilis.

memperkenalkan

  • Anda dapat menggunakan tag script untuk memperkenalkan 
 < script src =" ./dist/build.min.js " > </ script >
  • Juga mendukung impor modul ES2015 
 import Lajax from './src/lajax-module' ;

menggunakan 

 // 传入接口服务器地址进行实例化
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;

// 记录一条信息日志
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ;

// 记录一条警告日志
logger . warn ( '这是一条警告日志！' ) ;

try {
    JSON . parse ( undefined ) ;
} catch ( err ) {
    // 记录一条错误日志
    logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}

Silakan lihat API untuk dokumentasi terperinci.

Mengemas

Lajax menggunakan sintaks ES2015 dan perlu dikemas menggunakan webpack + babel.

  • Instal modul yang diperlukan 
 > npm install
  • Plugin pengemasan 
 > webpack

Direktori file yang dikemas adalah ./dist , dengan build.js versi tidak terkompresi dan build.min.js versi terkompresi.

Api

Lajax baru (Opsi)

Inisialisasi plugin dan kembalikan instance plugin.

Options : string atau objek. Jika sebuah string diteruskan, itu akan dianggap sebagai alamat server log: 

 const logger = new Lajax ( 'https://path/to/your/log/server' ) ;

Jika Anda ingin menyesuaikan beberapa konfigurasi, silakan masukkan objek: 

 const logger = new Lajax ( {
    url : 'https://path/to/your/log/server' ,
    interval : 5000
} ) ;

Semua properti yang didukung oleh objek adalah sebagai berikut:

nama atribut menjelaskan tipe nilai nilai bawaan
url Catat URL server rangkaian batal
autoLogError Apakah akan mencatat kesalahan yang tidak tertangkap secara otomatis boolean BENAR
penolakan log otomatis Apakah akan merekam kesalahan Promise secara otomatis boolean BENAR
autoLogAjax Apakah akan merekam permintaan ajax secara otomatis boolean BENAR
logAjaxFilter Ajax secara otomatis mencatat fungsi pemfilteran bersyarat. Parameter yang diteruskan oleh fungsi tersebut adalah URL dan metode permintaan. Jika benar, itu berarti mencatat log, dan salah berarti tidak mencatat log. fungsi 
 /**
 * @param {string} ajaxUrl - 请求url
 * @param {string} ajaxMethod - 请求方式
 */
 function ( ajaxUrl , ajaxMethod ) {
    return true ;
}
menyesuaikan dgn mode Apakah akan memformat konten yang dicetak oleh konsol boolean BENAR
tampilkanDesc Apakah akan menampilkan informasi deskripsi (dicetak di konsol saat inisialisasi selesai) boolean BENAR
kustomDesc Fungsi yang menghasilkan informasi deskripsi khusus. Parameter yang diteruskan adalah jumlah log yang belum terkirim sebelum halaman terakhir dibongkar, id permintaan saat ini, apakah id permintaan berasal dari server, dan string dikembalikan. fungsi 
 /**
 * @param {number} lastUnsend - 上次页面卸载前未发送的日志数
 * @param {string} reqId - 请求id
 * @param {boolean} idFromServer - 请求id是否来自服务器
 */
function ( lastUnsend , reqId , idFromServer ) {
    return ` lajax 前端日志模块加载完成。
自动记录页面错误：      ${ this . autoLogError ? '✔' : '✘' }
自动记录Promise异常：   ${ this . autoLogRejection ? '✔' : '✘' }
自动记录Ajax请求：      ${ this . autoLogAjax ? '✔' : '✘' }
当前页面请求id： ${ reqId } ${ idFromServer 
? ' (来自服务端)' 
: ' (自动生成)' } ` ;
}
selang Interval antara pengiriman log ke server (milidetik) nomor 10.000
maxErrorReq Jumlah maksimum kesalahan berturut-turut saat mengirim permintaan log. Jika melebihi jumlah ini, permintaan tidak akan dikirim lagi (tetapi permintaan akan tetap dicatat dalam antrian) nomor 5

info(arg1, arg2, ...args)

Metode instance mencatat log informasi dan dapat meneruskan jenis dan jumlah parameter apa pun. 

 const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ;

catatan(arg1, arg2, ...args)

Metode instan, sama seperti info . 

 const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;

peringatan(arg1, arg2, ...args)

Metode instan, mencatat log peringatan, dapat meneruskan jenis apa pun dan sejumlah parameter apa pun. 

 logger . warn ( '这是一条警告日志！' ) ;

kesalahan(arg1, arg2, ...args)

Metode instans mencatat log kesalahan dan dapat meneruskan jenis dan jumlah parameter apa pun. 

 try {
    JSON . parse ( undefined ) ;
} catch ( err ) {
    // 记录一条错误日志
    logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}

antre

Atribut tipe array, antrian log saat ini yang akan dikirim. 

 logger . queue

kebutuhan

Atribut tipe string, id permintaan halaman saat ini. 

 logger . reqId

idFromServer

atribut tipe boolean, apakah id permintaan dihasilkan oleh server. 

 logger . idFromServer

warnaEnum{...}

Objek statis, enumerasi warna log. Jika Anda ingin menyesuaikan warna log, Anda dapat mengubah properti objek sebelum memanggil metode instan. Objek bawaan: 

 Lajax . colorEnum = {
    /**
     * 信息日志颜色，默认宝蓝色
     */
    info : 'DodgerBlue' ,

    /**
     * 警告日志颜色，默认橘黄色
     */
    warn : 'orange' ,

    /**
     * 错误日志颜色，默认红色
     */
    error : 'red' ,

    /**
     * ajax分组颜色，默认紫色
     */
    ajaxGroup : '#800080' ,

    /**
     * 日志发送成功颜色，默认绿色
     */
    sendSuccess : 'green' ,

    /**
     * 描述文字颜色，默认粉红色
     */
    desc : '#d30775' ,
}

Format catatan

Log yang dikirim ke server melalui ajax harus berupa array yang tidak kosong. 2 log dicatat di sini secara bersamaan: 

 logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;

Data log sebenarnya yang dikirim adalah sebagai berikut: 

[{ 
    "time" : " 2017-08-23 16:35:01.989 " , 
    "level" : " info " , 
    "messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条info日志" , " Hello " , " lajax " ], 
    "url" : " http://127.0.0.1:5500/demo/index.html " , 
    "agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 " 
}, { 
    "time" : " 2017-08-23 16:35:02.369 " , 
    "level" : " warn " , 
    "messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条warn日志" ], 
    "url" : " http://127.0.0.1:5500/demo/index.html " , 
    "agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 " 
}]

Deskripsi setiap bidang:

  • time : string, waktu catatan log ini

  • level : string, level log, yang dibagi menjadi tiga jenis: info , warn , dan error .

  • messages : array. Elemen pertama dari array adalah id permintaan unik yang dibungkus dalam tanda kurung kurawal. Semua elemen berikutnya sesuai dengan konten log yang diteruskan dengan memanggil logger[level]

  • url : string, URL halaman tempat log berada

  • agent : string, agen pengguna dari halaman tempat log berada

permintaan identitas

Setiap log yang dikirim ke server berisi ID permintaan. Dalam permintaan yang sama, ID permintaan dari semua log harus sama; dalam permintaan yang berbeda, ID permintaan dari log yang dicatat harus berbeda.

Misalnya: Ketika pengguna A mengakses index.html, lajax mencatat dan mengirim 10 log, dan ID permintaan dari 10 log ini sama; Pengguna B juga mengunjungi halaman tersebut, dan juga menghasilkan 10 log, dan ID permintaan dari log ini tadinya harus sama, tetapi berbeda dengan id permintaan pengguna A.

Tujuan utama ID permintaan: memungkinkan Anda menemukan secara akurat semua log terkait selama permintaan tertentu di sisi server.

Pembuatan dan pengiriman id permintaan:

  • Jika halaman Anda dibuat secara dinamis di sisi server dan Anda ingin menghubungkan log sisi server dengan log front-end, Anda dapat membuat id permintaan di sisi server dan mengirimkannya ke front-end. Lajax berturut-turut akan mencoba menemukan id permintaan dari konten <meta name="_reqId" content="xxxx-xxx"> halaman atau window._reqId ;

  • Jika pencarian di atas gagal, halaman Anda dianggap sebagai halaman front-end murni. Lajax akan menghasilkan ID unik berbasis waktu sebagai ID permintaan selama inisialisasi. Sebelum halaman dibongkar, semua log akan berisi id permintaan ini;

  • Untuk permintaan ajax yang dipantau, id permintaan di atas akan ditambahkan ke header permintaan X-Request-Id . Anda dapat mencatat id permintaan di log server untuk korelasi.

Contoh pelayan

Di direktori ./demo , contoh server log sederhana server.js berdasarkan node.js disertakan.

Mulai server log: 

 > node server.js

Antarmuka log berjalan di http://127.0.0.1:2017/log. Saat menguji secara lokal, atur parameter inisialisasi Lajax ke alamat ini: 

 const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;

Server sampel ini mendukung permintaan lintas domain ajax :)

tes

Akses halaman ./test/index.html secara lokal untuk menjalankan pengujian.

lisensi

Lisensi MIT (MIT)

Hak Cipta (c) 2017 Sun Zhenghua

Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk namun tidak terbatas pada hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.

PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK ADA PELANGGARAN DALAM HAL APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS APAPUN KLAIM, KERUSAKAN ATAU LAINNYA TANGGUNG JAWAB, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, DARI ATAU BERHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua