$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
本当にあった怖い体験談 本番環境で画面が真っ白になりました
Search
ミカイ
November 07, 2024
0
6
本当にあった怖い体験談 本番環境で画面が真っ白になりました
【エンジニア限定】本当にあった怖い体験談【オフライン開催】
2024/10/24
https://connpass.com/event/332893/
ミカイ
November 07, 2024
Tweet
Share
More Decks by ミカイ
See All by ミカイ
技術選定で迷ったら『日常』を思い出そう! 〜考え方の新発見〜
junmikai
0
47
今年最も「覚醒」したコーディングテストの舞台裏
junmikai
0
6
フリーランスから正社員に戻ったお話し
junmikai
0
7
面接で価値観が変わった件
junmikai
0
10
SQLを克服する1冊
junmikai
0
4
美と機能のバランス ~フロントエンジニアに必要なUI・UXセンス~
junmikai
0
3
React.jsの キャッチアップは 「取捨選択」が9割
junmikai
0
8
スルメとガムで考えるキャリア論.pdf
junmikai
0
5
夏のチャレンジ ~挑戦はレベル1から始めよう~
junmikai
0
6
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9k
Embracing the Ebb and Flow
colly
84
4.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
160
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Practical Orchestrator
shlominoach
186
10k
GraphQLとの向き合い方2022年版
quramy
44
13k
Designing Experiences People Love
moore
138
23k
Documentation Writing (for coders)
carmenintech
65
4.5k
BBQ
matthewcrist
85
9.3k
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)で トップページの テストコードは書いてもいいかも
ご清聴ありがとうござ います!