本当にあった怖い体験談 本番環境で画面が真っ白になりました

【エンジニア限定】本当にあった怖い体験談【オフライン開催】

2024/10/24

https://connpass.com/event/332893/

Transcript

1. 本当にあった怖い体験談 
 
 本番環境で画面が真っ白になりました 
 
 
 三海 純(ミカイジュン)

2. ミカイ ジュン 
 • フリーランスエンジニア 
 • 趣味: もくもく会、アニメ、ネット麻雀(雀魂) 
 • 好きな有名人 
 ◦ 後藤 ひとり 
 ◦ 陸八魔アル 
 ◦ 千早 愛音
 ◦ 八木 唯

3. キャリア
 • 2020年 ~ 2022年 
 ◦ 正社員: フロントエンドエンジニア 
 • 2022年 ~ 2023年 
 ◦ 正社員: フロントエンド&バックエンドエンジニア 
 • 現在(2024年) 
 ◦ フリーランス: Next.js など設計&開発 
 • 来年(2025年 ~) 
 ◦ Y社 入社予定 

4. 今回の教訓 
 • 不本意なuseEffect連打は控えた方がいいかも 
 • フロントエンドもテストコード書こう 
 • リリース直後はPCの前にいようね！ 

5. 今回は以下に関するストーリを紹介 
 • 不本意なuseEffect連打は控えた方がいいかも 
 • フロントエンドもテストコード書こう 
 • リリース直後はPCの前にいようね！ 

6. 新機能リリース日のこと 
 今日は待ちに待ったリリース日。 
 
 私たちは、数週間にわたって頑張ってき た新機能をついにリリースする。 
 

7. 勝利？のポテトチップス 
 本番環境での動作確認も問題なし 
 
 ポテトチップスを 
 2袋食べていた時に事件は発生した 
 

8. 通知が・・・凄い数 
 ポテトチップスの袋に手を伸ばしながら、 ちらっとメッセージを確認 
 すると、そこには大量のメッセージが溢れ ていた
 

9. プロダクトが 
 真っ白になっていると、 
 複数のお客様から連絡が… 
 
 
 

10. そんなバカな・・・ 
 ポテトチップスを口に詰め込んだまま、私 は慌てて本番環境を確認する 
 
 しかし、私のアカウントでチェックしても、 問題はどこにもない 
 
 

11. その時、ふと思った 
 
 

12. 俺のブラウザ、 
 特殊能力でも持ってる のか…？
 
 

13. そんなわけはなく・・・ 
 APIログを確認してみても、エラー通知は 届いていない。ネットワークも正常。完全 にフロントエンドの問題に見える。 

14. その時、最後の一枚をつまもうとした 
 ポテトチップスが指先から 
 滑り落ちた瞬間 

15. 俺に電流走る！ 

16. 特定のプラン…！ 
 まるでポテトチップスの袋の底から最後 の一枚を引き当てたように、私は気づい た。
 「そうか、ユーザーが使っているプランに よって処理が違うんだ！」 

17. 急いでコードを掘り返し …
 該当の処理をチェックすると、案の定、 useEffectの依存配列がうまく設定されて いない箇所を発見した。 
 すぐに修正を行い、修正をした 

18. 修正した後、思った 

19. ポテトチップスを 
 一袋奢ろう 

20. 茶番？に付き合って頂き ありがとうございます 
 
 

21. 今回の教訓(再掲載) 
 • 不本意なuseEffect連打は控えた方がいいかも 
 • フロントエンドもテストコード書こう 
 • リリース直後はPCの前にいようね！ 

22. function Component({ plan }) { const [data, setData] = useState(); useEffect(() => { const fetchData = async () => { const response = await fetch(`/xxxxx?plan=${plan}`); const result = await response.json(); setData(result); }; fetchData(); }, [data]); // 依存配列に`data`が入っているため無限ループが発生
23. function Component({ plan }) { const [data, setData] = useState(); useEffect(() => { const fetchData = async () => { const response = await fetch(`/xxxxx?plan=${plan}`); const result = await response.json(); setData(result); }; fetchData(); }, [plan]); // `plan`が変わる時だけ実行。無限ループしない
24. import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); function Component({ plan }) { // こういうライブラリを使えば1行で実装できる！ const { data, error } = useSWR(`xxxxx?plan=${plan}`, fetcher);
25. 結論
 React.jsで開発する時は 
 useEffectである必要ある？ 
 を考える

26. 別の案として・・・ 
 今回の場合、プランごとのユースケースがあ るのでE2Eテスト(Playwight)で 
 トップページの 
 テストコードは書いてもいいかも 

27. ご清聴ありがとうござ います！