Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例

Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例 - 画像


SafariやFirefoxでは問題ないのに、なぜかChromeを使うとブラウザがクラッシュするという問題に遭遇したエンジニアが、問題を突き止めるまでの一部始終をブログで公開しています。
The Weirdest Bug I’ve Seen Yet
https://engineering.gusto.com/the-weirdest-bug-ive-seen-yet/
今回の問題の発端は、人事ツールを手がけるアメリカのソフトウェア企業・Gustoでエンジニアとして働いているAmy Lai氏が、従業員から「社内ツールを使うとChromeがクラッシュする」との通報を受けたことでした。この問題により、Gustoのスタッフたちは顧客からの電話やメールへの対応中に顧客のアカウント情報が突然確認できなくなるという事態に見舞われていました。

Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例 - 画像


問題の調査を開始したLai氏たちのチームは、「従業員全員が影響を受けたわけではない」「顧客向けのソフトウェアに問題はない」「クラッシュする状況に一貫性がなく、同じページをリロードしてもクラッシュする時としない時がある」「他のブラウザでは発生しない」といった点に気がつきました。
こうした点から、Lai氏らはまず「Chromeのバージョンが悪い」という予想を立てました。しかし、問題を経験した人にChromeを更新してもらっても、頻度が減るだけで解消には至りませんでした。また、同じバージョンでもクラッシュする人としない人がいたり、別々のバージョンを使っていても同様にクラッシュする人がいたりしたため、Chromeの特定のバージョンのせいではないことがわかりました。
次に目星をつけられたのが「拡張機能」です。確かに、従業員の1人が拡張機能を無効にするとクラッシュしなくなりましたが、拡張機能が入っていないゲストプロファイルでChromeを起動してもやはりクラッシュが発生したため、調査は振り出しに戻りました。

Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例 - 画像


Chromeだけがクラッシュする謎の問題には多くの従業員たちが悩まされましたが、回避策として他のブラウザが使われるようになったため、そのうちトルコ人エンジニア2人以外は誰も気にしなくなってしまいました。
それでも粘り強く原因究明にあたったLai氏は、調べを進める中で「数週間前のコードでも直らないので、最近の変更は原因ではない」「クラッシュするページの静的HTMLバージョンではクラッシュが発生しない」「ChromeではなくオープンソースのChromiumを使うとクラッシュが発生しない」「ページ固有のコンテンツを削除したり、社内フォントを無効にしたりしても問題が解決しない」という点に気づきました。
また、あるデンバー在住のエンジニアからは、添削ツール「Grammarly」のデスクトップアプリを使うとクラッシュするとの報告もありました。そこで、実際にLai氏がGrammarlyをダウンロードしたところ、やっとクラッシュの再現性を確認することができました。また、問題を報告した他の従業員たちもGrammarlyを使っていることがわかりました。

Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例 - 画像


少しずつバグの正体がつかめてきたLai氏は、「ページ固有のコンテンツを削除しても問題が解決されない」という点から、どのページにもついているナビゲーションバーに当たりをつけて、ナビゲーションバーのコードを1行ずつコメントアウトしてはクラッシュするかを確かめるという作業を開始しました。
すると、「My History(履歴)」というセクションを削除すると、クラッシュも発生しなくなることがわかりました。具体的には、以下の通りです。
dropdown 'My History', [], turbo: true, src: '/navigation/my_history'
このセクションは、各ユーザーが最近アクセスしたページを表示するという点で他のセクションとは違っています。また、ページが正常に読み込まれた後でも、このセクションにカーソルを合わせただけで即座にChromeがクラッシュする可能性があることも判明しました。
問題のセクションに、Railsというアプリケーションを高速化するためのgem、つまりRubyライブラリである「Turbo」があるため、これが原因かとLai氏は考えましたが、Turboはクラッシュが発生する前から導入されていたので、結果的には間違いでした。
しかし、これを手がかりにRailsに詳しいエンジニアに相談したところ、問題のコードでは「loader-spinner.gif」というローディング中に回転するGIFアニメーションが参照されていることが判明。このGIFアニメーションを削除したところ、クラッシュは発生しなくなりました。

Chromeでウェブアプリがクラッシュする問題を調べると「1枚のGIFアニメーション画像」が原因だったという珍しい事例 - 画像


ChromeやGrammarlyのコードを見ることができないため、なぜGrammarlyをインストールしている時にChromeで「loader-spinner.gif」を読み込むとクラッシュするのかは依然として謎のままです。
Lai氏は「デバッグの果てに見つけることになる宝物がGIFアニメーションだなんて想像もしませんでした。このバグの優先順位は時間とともに低下し、回避策も見つけられていましたが、最後にはたゆまぬ好奇心が勝利を収めました。このバグの解決に必要な知識を全て持ち合わせている人は誰もいませんでしたが、粘り強く協力していくことで解決することができました」とコメントしました。

ジャンルで探す