[JavaScript] `<link>`読みなかものonError検知みる

2 min read

背景

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)" />
Edit on GitHub

Related Articles

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考