js例外エラーログを取得するjs作った

経緯

サービスを利用してるエンドユーザーから「うまく動作しない」という連絡があったときに、
クライアント依存の問題だとフロントエンドのエラーログを見ないと推測が難しいケースがある。
なので、ログを集めるコードを作った。

導入対象となったサイト

仕事で運用してるレガシーな環境。超レガシー。
７年ぐらい前に構築されたサイトなので、jqueryバリバリ。
もちろんパッケージ管理もされてない。

方針

本当はSentryを使いたかったけど、前述の通りパッケージ管理もされておらず、
導入コストが大きそうなので自前で作成。
基本方針は、

• ライブラリに依存しないようにする
• nativeのjavascriptで処理するようにする
• エラーが発生したらhttp通信でサーバー側にエラー情報を送ってDB格納
• ハンドリングされてるエラーはとりあえず想定なし。例外エラーだけを対象

的な感じ。

コード

javascript

var gSendLog = function(log){
	//XMLHttpRequestオブジェクトの生成
	var request = new XMLHttpRequest();

	//イベントハンドラ設定
	request.onload = function (event) {
		if (request.readyState === 4) {
			if (request.status === 200) {
				console.log(request.statusText); // success
			} else {
				console.log(request.statusText); // error
			}
		}
	};
	request.onerror = function (event) {
		console.log(event.type); // error
	};

	//open("request method", URL, true or false))
	request.open("get", "/top/api/asp/get_jslog.asp?" + log, true);
	XMLHttpRequest.responseType = 'html';

	//Call
	request.send(null);
}
var gSetLogger = function(){
	window.onerror = function (msg, file, line, column, err) {
		/*
		msg: error message
		file: file path
		line: row number
		column: column number
		err: error object
		console.log(msg + ':' + file + ':' + line + ':' + column);
		*/
		var strLog = "msg=" + encodeURIComponent(msg)
		strLog += "&file=" + encodeURIComponent(file)
		strLog += "&line=" + encodeURIComponent(line)
		strLog += "&col=" + encodeURIComponent(column)
		strLog += "&stack=" + encodeURIComponent(err.stack)
		strLog += "&ua=" + encodeURIComponent(window.navigator.userAgent)
		strLog += "&platform=" + encodeURIComponent(navigator.platform)
		strLog += "&referrer=" + encodeURIComponent(document.referrer)
		gSendLog(strLog);
	};
}
//Call
gSetLogger();

gSetLogでonerrorをグローバルでキャッチしてエラー情報作成したら、
gSendLogで、ajaxでAPIコールしてサーバー側でDBに記録。
ちょっと手をぬいてGETで送っちゃってますが、jsonにしてNoSQLに
入れる方がログ管理的にはいい気がします。
あと、ここには書いてませんが、サーバー側でアクセス元IPを取得して、一緒に記録するようにしてます。

備考

ハンドリングされてるエラーの箇所で「gSendLog」をコールすれば同じようにDB記録できます。