lajaxダウンロード - lajaxソースコードのダウンロード

lajax

その他のカテゴリー

v1.1.6

ダウンロード

ラジャックス

log + ajax、フロントエンドロギングソリューション。

lajax はこれらの問題を解決しようとします。

フロントエンドにログがないか、ログはあっても永続性がないため、オンラインの問題の追跡と分析が困難になります。
フロントエンドログライブラリが使用されている場合でも、通常は開発者が手動でログを記録することに依存しているため、信頼性が低くなります。
実稼働環境でキャッチされなかった例外は無視されることがよくあります。
モバイルブラウザでは、 consoleによって出力されるログを確認できません。これまでは、問題を特定するためにalertまたは vConsole が使用されていましたが、この目的のためにソースコードを特別に変更する必要があるという欠点がありました。
サーバーによって動的に生成された Web ページの場合、システムの元のサーバーログをフロントエンドログと関連付けることはできません。

特徴

手動でログを記録し、 info 、 warn 、 error 3 つのログレベルをサポートします。
ログは、最適化された形式でブラウザコンソールに出力されます。
捕捉されなかったスクリプトエラーを自動的にログに記録します。
キャッチされなかった Promise 例外を自動的にログに記録します。
Ajax リクエストの開始と完了を自動的に記録します。
リクエスト ID を自動的に生成して、ログの場所と関連付けを容易にします。
ログは、設定されたログサーバーに定期的にバッチで送信されます。
優れた互換性と例外処理メカニズム。

オンラインの例

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

クイックスタート

ダウンロード

npm 経由でダウンロード:

 > npm install lajax

または、リリースページから圧縮パッケージをダウンロードします。

導入

scriptタグを使用して導入できます

 < script src =" ./dist/build.min.js " > </ script >

ES2015モジュールのインポートもサポート

 import Lajax from './src/lajax-module' ;

使用

 // 传入接口服务器地址进行实例化
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 ) ;
}

詳細なドキュメントについては API を参照してください。

パック

Lajax は ES2015 構文を使用し、webpack + babel を使用してパッケージ化する必要があります。

必要なモジュールをインストールする

 > npm install

プラグインのパッケージ化

 > webpack

パッケージ化されたファイルのディレクトリは./distです。ここで、 build.jsは非圧縮バージョン、 build.min.jsは圧縮バージョンです。

アピ

newLajax(オプション)

プラグインを初期化し、プラグインのインスタンスを返します。

Options : 文字列またはオブジェクト。文字列が渡された場合、それはログサーバーのアドレスとみなされます。

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

構成をカスタマイズしたい場合は、オブジェクトを渡してください。

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

オブジェクトによってサポートされるすべてのプロパティは次のとおりです。

属性名	説明する	値の型	デフォルト値
URL	ログサーバーのURL	弦	ヌル
自動ログエラー	捕捉されなかったエラーを自動的にログに記録するかどうか	ブール値	真実
自動ログ拒否	Promise エラーを自動的に記録するかどうか	ブール値	真実
autoLogAjax	Ajaxリクエストを自動的に記録するかどうか	ブール値	真実
logAjaxフィルター	Ajax は条件付きフィルタリング関数を自動的に記録します。関数によって渡されるパラメータはリクエストの URL とメソッドです。true が返された場合はログを記録することを意味し、false はログを記録しないことを意味します。	関数	/** * @param {string} ajaxUrl - 请求url * @param {string} ajaxMethod - 请求方式 */ function ( ajaxUrl , ajaxMethod ) { return true ; }
様式化する	コンソールによって出力されるコンテンツをフォーマットするかどうか	ブール値	真実
ショーデスク	説明情報（初期化完了時にコンソールに出力）を表示するかどうか	ブール値	真実
カスタムデスク	カスタム説明情報を生成する関数。渡されるパラメータは、最後のページがアンロードされるまでの未送信ログの数、現在のリクエスト ID、リクエスト ID がサーバーからのものであるかどうか、および文字列が返されます。	関数	/** * @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 ? ' (来自服务端)' : ' (自动生成)' } ` ; }
間隔	サーバーにログを送信する間隔 (ミリ秒)	番号	10000
maxErrorReq	ログリクエストを送信する際の連続エラーの最大数。この数を超えると、リクエストは送信されなくなります (ただし、リクエストはキューに記録されます)。	番号	5

info(arg1, arg2, ...args)

インスタンスメソッドは情報ログを記録し、任意のタイプおよび任意の数のパラメータを渡すことができます。

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

log(arg1, arg2, ...args)

インスタンスメソッド。 infoと同じ。

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

warn(arg1, arg2, ...args)

インスタンスメソッドは、警告ログを記録し、任意のタイプおよび任意の数のパラメータを渡すことができます。

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

エラー(引数1、引数2、...引数)

インスタンスメソッドはエラーログを記録し、任意の型および任意の数のパラメータを渡すことができます。

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

列

配列タイプの属性、送信される現在のログキュー。

 logger . queue

必須ID

文字列型の属性、現在のページのリクエスト ID。

 logger . reqId

idFromServer

ブール型属性。リクエスト ID がサーバーによって生成されるかどうか。

 logger . idFromServer

colorEnum{...}

静的オブジェクト、ログの色の列挙。ログの色をカスタマイズする場合は、インスタンスメソッドを呼び出す前にオブジェクトのプロパティを変更できます。デフォルトのオブジェクト:

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

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

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

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

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

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

ログ形式

Ajax 経由でサーバーに送信されるログは、空ではない配列である必要があります。ここには 2 つのログが同時に記録されます。

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

実際に送信されるログデータは以下のとおりです。

[{ 
    "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 " 
}]

各フィールドの説明:

time : string、このログレコードの時刻
level : string、ログのレベル。 info 、 warn 、 errorの 3 つのタイプに分けられます。
messages : 配列。配列の最初の要素は、中括弧で囲まれた一意のリクエスト ID です。後続の要素はすべて、 logger[level]
url : 文字列、ログが存在するページの URL
agent : 文字列、ログが存在するページのユーザーエージェント

リクエストID

サーバーに送信される各ログにはリクエスト ID が含まれます。同じリクエストでは、すべてのログのリクエスト ID は同じでなければなりません。異なるリクエストでは、記録されるログのリクエスト ID は異なっていなければなりません。

例: ユーザー A が Index.html にアクセスしたとき、lajax は 10 個のログを記録して送信しました。これらの 10 個のログのリクエスト ID は同じでした。ユーザー B もそのページにアクセスし、10 個のログとこれらのログのリクエスト ID を生成しました。これは同じである必要がありますが、ユーザー A のリクエスト ID とは異なります。

リクエスト ID の主な目的: サーバー側で特定のリクエスト中に関連するすべてのログを正確に見つけることができます。

リクエスト ID の生成と送信:

ページがサーバー側で動的に生成され、サーバー側のログをフロントエンドログに接続する場合は、サーバー側でリクエスト ID を生成し、それをフロントエンドに送信できます。 Lajax は、ページまたはwindow._reqIdの<meta name="_reqId" content="xxxx-xxx">コンテンツからリクエスト ID を見つけようとします。
上記の検索が失敗した場合、ページは純粋なフロントエンドページであるとみなされ、ページがアンロードされる前に、Lajax は時間ベースの一意の ID をリクエスト ID として生成します。
監視対象の Ajax リクエストの場合、上記のリクエスト ID がX-Request-Idリクエストヘッダーに追加され、関連付けのためにリクエスト ID をサーバーログに記録できます。

サーバーの例

./demoディレクトリには、node.js に基づいた単純なログサーバーのサンプル server.js が含まれています。

ログサーバーを起動します。

 > node server.js

ログインターフェイスは http://127.0.0.1:2017/log で実行されます。ローカルでテストする場合は、Lajax 初期化パラメータを次のアドレスに設定します。

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

このサンプルサーバーは、Ajax クロスドメインリクエストをサポートしています:)

テスト

./test/index.htmlページにローカルでアクセスしてテストを実行します。

ライセンス

MIT ライセンス (MIT)

本ソフトウェアおよび関連ドキュメントファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそのことを許可すること。

上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。

ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、非侵害の保証を含むがこれらに限定されない、いかなる保証も行われず、作者または著作権者はいかなる場合においても責任を負いません。請求、損害賠償、その他契約行為、不法行為、その他を問わず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる責任。

拡大する

追加情報