怪奇！電話番号を入力しただけで画面がクラッシュした謎バグの話

インシデント振り返り

はじめに

こんにちは、ARCH チームの立川です。ニーリーアドベントカレンダー2025、3番手を務めさせていただきます。

早いものでニーリーに入社してちょうど 1 年が経ちました。先日、とても稀なエラーに遭遇したので、今回はその件について書きたいと思います。

電話番号フォームを入力すると画面が真っ白になる

いきなりタイトルでなんじゃそりゃとなるかと思いますが、本当にこのようなことが起きました。とある案件で全体的に様々なデバイス、ブラウザで動作確認をしていて、本当に偶々見つけたのですが、iOS Chrome ブラウザで電話番号フォームを入力していたところ、11 桁目を入力するとエラーが起きて画面が真っ白になってエラーメッセージが表示されるのです。

10 桁目までは以下の画面で、

10 桁目まで入力したところ

11 桁目を入力すると以下のエラー画面となりました。

11 桁目入力時のエラー画面

iOS Chrome で 100% 再現されることとフォーム入力しようにもここから先には進めないのでインシデント扱いとなりました。

エラーを確認する

画面が真っ白になること以外何もわからなかったので、とりあえずエラーを確認してみます。ただ、iOS Chrome のデバッグを今まで行ったことがなかったのでまずはその方法からの調査でした。公式サイトから、具体的な手順は以下の通りとなります。少しわかりにくい部分があったので詳しく書いてみます。

  • Mac Safari で開発モードが有効になっているか確認する
    • 無効の場合は 「設定」 > 「詳細」から「Web デベロッパ用の機能を表示」にチェックをつけて有効にする
  • iOS デバイスで Chrome アプリを起動して「設定」 > 「コンテンツの設定」で「ウェブ　インスペクタ」をオンにする
  • iOS デバイスを Mac に接続する
  • iOS Chrome で検査する Web サイトに移動する
  • Mac Safari で開発メニューで接続済みデバイスの名前にカーソルを合わせて検査する Web サイトを選択する（添付画像は開発メニューで iPhone にカーソルを合わせたときのもの）

開発メニューで iPhone デバイスにカーソルを合わせた際の表示例

早速試してみて、エラー内容を確認すると以下のメッセージが表示されていました。

NotFoundError: The object can not be found here.

なるほど、何もわからん（笑）。他にスタックトレースが大量に表示されていましたが、removeChild 周りで何かが起こっているくらいしかわかりませんでした。

原因の発見から修正まで

さてさて楽しくなってきました（実際には、今日中になんとかしないといけない気持ちでいっぱいいっぱいでした（笑））。エラー内容からは何もわからなかったので、実装コードの確認です。最初はタグで何かおかしなことが起きているのではないかと確認してみましたが、特に問題ありませんでした。

次にバリデーション周りのロジックを覗いてみましたが、こちらも特に変なところはなく、電話番号入力時にメッセージが表示され、電話番号のバリデーション条件を満たすとメッセージが消えるというような、よくある仕様でした。ダメ元でネットサーフィンして、似たような現象の記事がないか探しましたが、案の定何もヒットせず。

この時点では本当にお手上げ状態で、意味もなく何回も電話番号を入力してはエラー画面になることを繰り返しながら天を仰いでいました。他のブラウザでも確認しながら何が異なるのかにらめっこを続けていましたが、何度目かであることに気づきました。他のブラウザではバリデーションメッセージが以下のような表示だったのです。

おわかりいただけただろうか（ホラー風）？そうです、よく見ると iOS Chrome の 例） の電話番号表示はハイパーリンクになっているのです。ソースコード上ではテキストになっていたのでブラウザ側で自動的にハイパーリンクに変換してしまっているようです。とりあえず、例） の電話番号部分は不要と判断して、削除して動作確認したところ、無事 iOS Chrome でも電話番号を入力することができるようになりました！めでたし、めでたし！

なぜ、今回の現象が起きたのか

あくまで仮説となりますが、今回は以下のようなことが起きていたのだと思います。

  1. 電話番号入力する
  2. バリデーション条件を満たしていない間メッセージが表示される → この時、電話番号はテキストで描画された
  3. iOS Chrome ブラウザが電話番号を自動ハイパーリンク化
  4. バリデーション条件を満たすとメッセージが消える → テキストで描画されたはずのメッセージにリンクが含まれており削除する際に元々の DOM と異なっている！と混乱

結論、勝手に DOM が書き換わっていて最初と話が違うだろ！と怒って（気持ちを代弁）エラーが起きていたのだと推測します。

さいごに

最初はまさか、自動ハイパーリンク化がトリガーで今回のエラーが起きているとは思いませんでした。からくりが分かれば簡単なことで「何だそんなことか」で片付いてしまう話ですが、なかなか気づくのが難しかった問題だったかと思います。同じような問題に遭遇した人にこの記事がいつか助けになればと思います。

ちなみに、ブラウザ仕様の電話番号のハイパーリンク化は、以下の meta タグを入れることで抑止することができます。

<meta name="format-detection" content="telephone=no" />

二度と同じような問題に悩まされたくないので速攻で入れました。これで安心して夜眠ることができます。