Edited at

Qiitaのサイトバグを見つけたのでコード解析 👉 原因見つけて報告 👉 一瞬で修正してくれました!【神対応】


バグの内容

Qiitaは通知が100件以上になると、「99+」と表示される仕様がありました。

しかし実はそのアルゴリズム、『トレンド画面』しか効いておらず、他の画面では『素の数字』が表示されていたのです。





他にも、結構通知を貯金されて気づいていらっしゃる方がいたんですね。Qiitaで有名な@suin さんまで・・・







『13954件ってなんだよ(羨望)(感動)』


早速Qiitaのコードを解析してみる


【1/2】トレンド画面

スクリーンショット 2019-04-11 21.34.31.png


【2/2】それ以外の画面

スクリーンショット 2019-04-11 21.35.09.png

既に構造が変わっていますね。

特にglobalHeaderなるidが、トレンド画面にしか存在していないのが気になります。

多分セレクタミスをしているのでしょうね。

スクリプトを調査するため、Source画面でJSファイルを掘り出してみましょう。

スクリーンショット 2019-04-11 21.38.12.png

いっぱいありますね!

QiitaはRuby on Railsで作られているので、サーバーが絡んでたら終わりです。

rbファイルとかphpファイルはSourceで確認できないからです。

とりあえず望みに賭けて、それっぽいjsファイルを目星付けてみます。

indexの隣にあったり、社名の入ったCDNの中なんかは当たりが多いですね。

スクリーンショット 2019-04-11 21.41.57.png

qiita用のCDN・・・これが怪しいですね。早速見てみましょう。

セレクタが不明なので、「99+」で検索してみます。

スクリーンショット 2019-04-11 21.47.19.png

い ま し た

変数名からして、こいつが99%悪さしてそうですね(99+だけに)。

中のコードはmin(最小化)されているので、beautifyして正体を顕にしてあげましょう

使うサイトはこちら⇛ https://beautifier.io/

これ👇を・・・

スクリーンショット 2019-04-11 21.44.55.png

こう👇します!

スクリーンショット 2019-04-11 21.45.04.png

変換したらsyntaxの効いているエディタにコピペして、解析を始めてみましょう。

スクリーンショット 2019-04-11 21.51.28.png

ここの部分ですね。

99<t.unreadNotificationsCount?"99+":t.unreadNotificationsCount


  • unreadNotificationsCountが99より大きい場合、"99+”に書き換える。

  • それ以外の場合は、unreadNotificationsCountのまま。

この処理が、トレンド画面にしか反映されていないわけです。

トレンド画面以外のページでは、「スキップしている」or「前の処理でエラーを起こしてしまっている」の2パターンが考えられますね。

そしたら色々、前の方の条件式を見てみるか・・・

あ り ま し た

スクリーンショット 2019-04-11 21.56.39.png

やっぱりglobalHeaderじゃないか!

関数の中まで追うまでもなく、このglobalHeaderが存在しないページでは以降の処理に不具合が出る事が想定されますね。

ここまでの検証はパッと5分程でした。


Qiitaに報告

Qiitaのお問い合わせからバグを報告してみます。

D33UNOqU4AE-Gzd.jpeg

こういうissue文が一番、プログラマーに文才を求められる瞬間ですね。

読み返すと非常に読みづらい・・・githubでこんなissue文書いたら、弾かれそうですね(笑)


結果

2時間で直してくれました。

神対応すぎる、さすがQiita様!


まとめ

全然技術的な話が無くって申し訳ありません。

一番言いたかった事は、そう、冒頭の

Increments株式会社なのにインクリメントの表示処理バグってる(笑)

この奇跡ともいえるギャグを広めたかっただけです・・・

改めて、光速の対応をして頂いたQiita運営様、本当にありがとうございました。

(できれば99+の方ではなく、無制限表示の方が嬉しいです・・・)


おまけ