Qiitaのサイトバグを見つけた 👉 原因見つけて報告 👉 一瞬で修正してくれた

それだけの記事ですが、Twitterでわちゃわちゃ楽しかったのでメモ

バグの内容

Qiitaは通知が100件以上になると、「99+」と表示される仕様がありました。
しかし実はそのアルゴリズム、『トレンド画面』しか効いておらず、他の画面では『素の数字』が表示されていたのです。

プロフィールや記事ページは100を越えて表示され、それ以外は99+となるみたいですね。 pic.twitter.com/BXVZ8gi2Ds

— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019

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

これやりたくなるの分かるw

うっかりクリックして貯めた数百が吹き飛ぶ
↓
そっとインスペクタ開く

って流れ、やったなあ… https://t.co/uT7VnWTAu7

— suin❄️PHPでオブジェクト指向 (@suin) April 10, 2019

JS の丸め処理が評価される前は、そのままの数字が出る。閾値は1000なのかな pic.twitter.com/EGRVZJh0eV

— Enjoy Hacking! (@zaru) April 10, 2019

『13954件ってなんだよ（羨望）（感動）』

早速Qiitaのコードをみてみる

【1/2】トレンド画面

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

既に構造が変わっていますね。
特にglobalHeaderなるidが、トレンド画面にしか存在していないのが気になります。
多分セレクタミスをしているのでしょうね。

スクリプトを調査するため、Source画面でJSファイルを掘り出してみましょう。
なんとなくちらつきがあるんでフロントで実装してると思うので多分ブラウザからみれそうです。

qiita用のCDNが怪しいですね。早速見てみましょう。セレクタが不明なので、「99+」で検索してみます。

い　ま　し　た

変数名からして、こいつが99%悪さしてそうですね(99+だけに)。
中のコードはmin(最小化)されているので、beautifyして正体を顕にしてあげましょう
使うサイトはこちら⇛　https://beautifier.io/

これ👇を・・・

こう👇します！

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

ここの部分ですね。

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

• unreadNotificationsCountが99より大きい場合、"99+”に書き換える。
• それ以外の場合は、unreadNotificationsCountのまま。

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

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

やっぱりglobalHeaderじゃないか！
関数の中まで追うまでもなく、このglobalHeaderが存在しないページでは以降の処理に不具合が出る事が想定されますね。
ここまでの検証はパッと5分程でした。

Qiitaに報告

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

こういうissue文が一番、プログラマーに文才を求められる瞬間ですね。
読み返すと非常に読みづらい・・・githubでこんなissue文書いたら、弾かれそうですね（笑）

結果

2時間で直してくれました。
神対応すぎる、さすがQiita様！

Qiita、通知バグなおってた。
運営さん対応がはやい。 pic.twitter.com/biaju0b1Ox

— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019

まとめ

全然技術的な話が無くって申し訳ありません。改めて、光速の対応をして頂いたQiita運営様、本当にありがとうございました。（できれば99+の方ではなく、無制限表示の方が嬉しいです・・・）

おまけ

99+じゃなくて、ちゃんとインクリメンツしておくんなはれや、ってことですね！
Incrementsだけに！

— 無職やめ太郎（本名） (@Yametaro1983) April 11, 2019