jsキャプチャリソースの読み込みエラー

リソースの読み込みエラーは、addEventListenerを使用してエラーイベントのキャプチャを監視します

実装の原則:リソース(<img>や<script>など)のロードに失敗すると、リソースをロードする要素はEventインターフェイスのエラーイベントをトリガーし、要素に対してonerror()処理関数を実行します。

これらのエラーイベントはウィンドウにバブルアップしませんが、キャプチャフェーズでwindow.addEventListenerによってキャプチャできます。

ただし、上記のaddEventListenerはjsエラーもキャッチできるため、レポートが繰り返されないようにフィルタリングし、リソースエラーと判断された場合にのみレポートする必要があることに注意してください。

window.addEventListener('error', event => (){ 
  // 过滤js error
  let target = event.target || event.srcElement;
  let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
  if (!isElementTarget) return false;
  // 上报资源地址
  let url = target.src || target.href;
  console.log(url);
}, true);

おすすめ

転載: blog.csdn.net/lianjiuxiao/article/details/113506232