Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
本当にあった怖い体験談 本番環境で画面が真っ白になりました
Search
ミカイ
November 07, 2024
0
28
本当にあった怖い体験談 本番環境で画面が真っ白になりました
【エンジニア限定】本当にあった怖い体験談【オフライン開催】
2024/10/24
https://connpass.com/event/332893/
ミカイ
November 07, 2024
Tweet
Share
More Decks by ミカイ
See All by ミカイ
tsoaはいいぞ!APIドキュメントを自動生成!
junmikai
0
10
生成AI活用はHOWが大事な理由
junmikai
0
98
2025年の抱負: フリーランスから 正社員に戻るので 組織に貢献します!
junmikai
0
53
Chakra UI v3にバージョンアップしてほぼ別物になった件
junmikai
0
220
LTのテーマ決めは「多数派」を意識しよう ~ LT年40回登壇した件~
junmikai
0
3
成長するには「重要 VS 緊急」を意識しよう
junmikai
0
9
LTのテーマ決めは「多数派」を意識しよう ~ LT年40回登壇した件~
junmikai
0
10
目標は「めいそう」が大事。漢字はどう書く?
junmikai
2
20
技術選定で迷ったら『日常』を思い出そう! 〜考え方の新発見〜
junmikai
0
61
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
For a Future-Friendly Web
brad_frost
176
9.6k
Code Review Best Practice
trishagee
67
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
RailsConf 2023
tenderlove
29
1k
Unsuck your backbone
ammeep
670
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
A designer walks into a library…
pauljervisheath
205
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Transcript
本当にあった怖い体験談 本番環境で画面が真っ白になりました 三海 純(ミカイジュン)
ミカイ ジュン • フリーランスエンジニア • 趣味: もくもく会、アニメ、ネット麻雀(雀魂)
• 好きな有名人 ◦ 後藤 ひとり ◦ 陸八魔アル ◦ 千早 愛音 ◦ 八木 唯
キャリア • 2020年 ~ 2022年 ◦ 正社員: フロントエンドエンジニア
• 2022年 ~ 2023年 ◦ 正社員: フロントエンド&バックエンドエンジニア • 現在(2024年) ◦ フリーランス: Next.js など設計&開発 • 来年(2025年 ~) ◦ Y社 入社予定
今回の教訓 • 不本意なuseEffect連打は控えた方がいいかも • フロントエンドもテストコード書こう • リリース直後はPCの前にいようね!
今回は以下に関するストーリを紹介 • 不本意なuseEffect連打は控えた方がいいかも • フロントエンドもテストコード書こう • リリース直後はPCの前にいようね!
新機能リリース日のこと 今日は待ちに待ったリリース日。 私たちは、数週間にわたって頑張ってき た新機能をついにリリースする。
勝利?のポテトチップス 本番環境での動作確認も問題なし ポテトチップスを 2袋食べていた時に事件は発生した
通知が・・・凄い数 ポテトチップスの袋に手を伸ばしながら、 ちらっとメッセージを確認 すると、そこには大量のメッセージが溢れ ていた
プロダクトが 真っ白になっていると、 複数のお客様から連絡が…
そんなバカな・・・ ポテトチップスを口に詰め込んだまま、私 は慌てて本番環境を確認する しかし、私のアカウントでチェックしても、 問題はどこにもない
その時、ふと思った
俺のブラウザ、 特殊能力でも持ってる のか…?
そんなわけはなく・・・ APIログを確認してみても、エラー通知は 届いていない。ネットワークも正常。完全 にフロントエンドの問題に見える。
その時、最後の一枚をつまもうとした ポテトチップスが指先から 滑り落ちた瞬間
俺に電流走る!
特定のプラン…! まるでポテトチップスの袋の底から最後 の一枚を引き当てたように、私は気づい た。 「そうか、ユーザーが使っているプランに よって処理が違うんだ!」
急いでコードを掘り返し … 該当の処理をチェックすると、案の定、 useEffectの依存配列がうまく設定されて いない箇所を発見した。 すぐに修正を行い、修正をした
修正した後、思った
ポテトチップスを 一袋奢ろう
茶番?に付き合って頂き ありがとうございます
今回の教訓(再掲載) • 不本意なuseEffect連打は控えた方がいいかも • フロントエンドもテストコード書こう • リリース直後はPCの前にいようね!
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`が入っているため無限ループが発生
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`が変わる時だけ実行。無限ループしない
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);
結論 React.jsで開発する時は useEffectである必要ある? を考える
別の案として・・・ 今回の場合、プランごとのユースケースがあ るのでE2Eテスト(Playwight)で トップページの テストコードは書いてもいいかも
ご清聴ありがとうござ います!