最新のWebアプリに高度なエラートラッキングとリアルユーザーモニタリングを提供するAtatusをお試しください。
https://www.atatus.com/
すべてのブラウザで合理的に完全なスタックトレースを取得する方法を説明しましょう。
JavaScriptでのエラー処理
最新のChromeおよびOperaは、ErrorEventおよびのHTML 5ドラフト仕様を完全にサポートしていますwindow.onerror。これらのブラウザーの両方で、を使用するかwindow.onerror、 'error'イベントに適切にバインドできます。
// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
console.log(message, "from", error.stack);
// You can send data to your server
// sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
console.log(e.error.message, "from", e.error.stack);
// You can send data to your server
// sendError(data);
})
残念ながら、Firefox、Safari、IEはまだ存在しており、それらもサポートする必要があります。スタックトレースは利用できwindow.onerrorないため、もう少し作業を行う必要があります。
エラーからスタックトレースを取得するために私たちができる唯一のことは、すべてのコードをtry{ }catch(e){ }ブロックにラップしてから調べることe.stackです。関数を受け取り、適切なエラー処理を備えた新しい関数を返すwrapと呼ばれる関数を使用すると、処理を多少簡単にすることができます。
function wrap(func) {
// Ensure we only wrap the function once.
if (!func._wrapped) {
func._wrapped = function () {
try{
func.apply(this, arguments);
} catch(e) {
console.log(e.message, "from", e.stack);
// You can send data to your server
// sendError(data);
throw e;
}
}
}
return func._wrapped;
};
これは機能します。手動でラップする関数はすべて適切なエラー処理を備えていますが、ほとんどの場合、実際にそれを自動的に行うことができます。
addEventListenerコールバックを自動的にラップするようにのグローバル定義を変更することにより、try{ }catch(e){ }ほとんどのコードの周りに自動的に挿入できます。これにより、既存のコードは引き続き機能しますが、高品質の例外追跡が追加されます。
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
また、それremoveEventListenerが機能し続けることを確認する必要もあります。現時点では、への引数addEventListenerが変更されたため、そうなりません。この場合も、prototypeオブジェクトでこれを修正するだけです。
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
エラーデータをバックエンドに送信する
次のようにイメージタグを使用してエラーデータを送信できます
function sendError(data) {
var img = newImage(),
src = 'http://yourserver.com/jserror&data=' + encodeURIComponent(JSON.stringify(data));
img.crossOrigin = 'anonymous';
img.onload = function success() {
console.log('success', data);
};
img.onerror = img.onabort = function failure() {
console.error('failure', data);
};
img.src = src;
}
免責事項：私はhttps://www.atatus.com/の Web開発者です。
