[JavaScript] `<link>`で読み込めなかったものをonErrorで検知してみる

背景

link 要素の error ってハンドリングできるのかという疑問があり、MDN を覗いてみるとスタイルシートの load イベントがヒットした。

load イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に error イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。

<script>
  var myStylesheet = document.querySelector("#my-stylesheet");

  myStylesheet.onload = function () {
    // Do something interesting; the sheet has been loaded
  };

  myStylesheet.onerror = function () {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

理想

stylesheet を読み込んでいる link を対象に読み込みエラーのときに何か実行してみたい。

// <link rel="stylesheet"> をすべて拾って
const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');

for (let i = 0; i < stylesheets.length; i++) {
  const stylesheet = stylesheets[i];

  stylesheet.addEventListener("error", function (e) {
    // Sentryなどで通知したい
    console.log("error");
  });
}

検証

addEventListener('error')だとハンドリングできなかった。また、MDN のコード（onerror）を試してみてもできなかった。

インラインイベントハンドラーだとうまくいく

下記のように定義するとうまく実行された。

<script>
  function error(element) {
    console.log("error:", element);
  }
</script>

<link rel="stylesheet" href="sample.css" onerror="error(this)" />