エラーの種類をキャッチすることができます
- 構文エラー
- ランタイム例外
- 異常なリソースの読み込み
- IMG
- 脚本
- リンク
- オーディオ
- ビデオ
- IFRAME
- リソースの連鎖外のDOM要素...
- 例外非同期リクエスト
- 異常な約束
- CSSリソースの異常
- フォントフェイス
- 背景画像
- キャプチャに一時的にできないその他
@フォントフェース
背景画像
...キャプチャに一時的にできません
キャプチャモード
- try-catch
- window.addEventListener（ 'エラー'、CB、真）
- window.addEventListener（ "unhandledrejection"、CB）
- Promise.then（）。キャッチ（CB）
- カスタム非同期リクエストコード
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://baidu.com/test.js"></script>
</head>
<body>
<img src="sss" onerror="javascript:console.log(this)">
<div>hello world</div>
<script type="text/javascript">
function report() {
(new Image()).src="http://post.error.com?data=xxx"
}
// DOM2
// 全局捕获及时代码运行错误，比如语法错误、逻辑错误
// 还有资源加载错误，通常是404或加载超时
// 第三个参数一定true，为true表示在捕获阶段触发，为false就是冒泡阶段，那获取不到错误事件。
window.addEventListener("error", function(ev) {
console.log('捕获',ev)
}, true);
// DOM4
// 捕获 Promise 未处理的异常
window.addEventListener('unhandledrejection', function(e) {
e.preventDefault();
console.log('捕获到未处理的promise: ', e);
}, false);
new Promise((resolve, reject) => {
reject('jiadsf');
});
fetch('http://example.com/movies.json')
try {
JSON.parse('{123123')
} catch (e) {
// 捕获到JSON.parse的异常，虽然能全局捕获，但找不到错误对象ev.error
}
</script>
</body>
</html>ログレポート
シンプルバージョン、画像を使用しています。利点は、クロスドメインシンプルにすることができます。
function report() {
(new Image()).src="http://post.error.com?data=xxx"
}プレミアム使用navigator.sendBeacon（） 、互換性クロム39 +、IE互換性がありません。
// navigator.sendBeacon(url, data);
navigator.sendBeacon('http://post.error.com', 'data=xxxxx');
// data 可以传递 string 类型，那么后端接口里接到的请求，Content-Type 为 text/plain，就当字符串处理dataこの方法では、大量のデータを送信することができ、統計と診断コードのニーズを満たすために使用され、ブラウザのレンダリングと自然のクロスドメインに影響を与えずに、ページのロード/アンロードイベントで非同期操作を扱う、それはスレッドのカードをレンダリングしないことを確実にすることができます。唯一の欠点互換性。
優先sendBeanconサマリレポート、IMGとの互換性のない監視を使用しました。
function reportData(url, data) {
if (navigator.sendBeacon) {
navigator.sendBeacon(url, data);
} else {
(new Image()).src = `${url}?data=${data}`
}
}
export default reportData;