[小ネタ] JavaScript で正規表現の後読みを使うとSafariでページがクラッシュする

特定ページでページがクラッシュすると問い合わせがあったので原因を調査したメモ。

正規表現の後読みとは

ES2018 で、後読みが追加された。 (?<=...) から始まる正規表現を使うと、パターンが前に存在する文字列にマッチする、後読み表現が実現できる。

詳しくは、先読みと後読みを使ったパターンなどに解説がある。

後読みのサポート状況

一方で、この後読みは、IEとSafariではサポートされていない。

ref: https://caniuse.com/js-regexp-lookbehind

さらに悪いことに、後読みのあるコードは、ランタイムエラーになるのではなく、SyntaxError となる。なので、SPAのような動的なWebサイトの場合、ページがクラッシュする。

ErrorBoudaryのような仕組みでエラーをトラッキングしている場合は、エラーが送信されないので気づくことができない。

Babelでトランスパイルされない

この後読みはBabelが変換してくれない。なので、コードを書く際に気をつける必要がある。
ref: https://qiita.com/ota-meshi/items/8d4c07b825f9392fe235

未然に防ぐには

eslint-plugin-es の、es/no-regexp-lookbehind-assertions ルールを適用する。

{
  "plugins": ["es"],
  "rules": {
    "es/no-regexp-lookbehind-assertions": "error",
    "es/no-regexp-named-capture-groups": "error"
  }
}

ちなみに、eslint-plugin-es は、各ESで導入されたプロポーザルごとにルールをになっていて面白い。全く同様の問題で、Named capture groupsもIEでサポートされていないため、有効化しておくと良さそう。