Slide 1

Slide 1 text

© Magic Moment 2023 1人で頑張らない! チームでSentryを活用する エラー管理体制の構築について © Magic Moment 2023 株式会社Magic Moment Technologiesチーム Takahiro Ishida

Slide 2

Slide 2 text

© Magic Moment 2023 自己紹介 2 ● Takahiro Ishida ● 株式会社Magic Moment ● フロントエンド テックリード ● GitHub: @solnce ● Twitter: @solnce3 ● 自作キーボードにハマっています

Slide 3

Slide 3 text

© Magic Moment 2023 Magic Moment / 営業行動支援システムMagic Moment Playbookについて① 3 ● 株式会社Magic Moment ● 営業行動支援システム 「Magic Moment Playbook」の開発・提供 ● 開発組織は23名(フロント6名)+業務委託 ● 昨年9月にシリーズB完了で累計調達額20億円 ● React / SPAの運用上で Sentry を使っています

Slide 4

Slide 4 text

© Magic Moment 2023 Magic Moment / 営業行動支援システムMagic Moment Playbookについて② 4

Slide 5

Slide 5 text

© Magic Moment 2023 今日話すこと 5 Sentryを活用して みんなでエラーを管理したい! 󰤇🛠󰤈🛠󰤇🛠󰤈🛠󰤇

Slide 6

Slide 6 text

© Magic Moment 2023 Sentryを運用する上での課題 課題 6 Sentryを導入してからエラーハンドリングがしやすくなりましたが チームの運用課題がいろいろと出てきました

Slide 7

Slide 7 text

© Magic Moment 2023 課題 7 運用が属人化しがち 󰷺

Slide 8

Slide 8 text

© Magic Moment 2023 運用が属人化しがち 󰷺 課題 8 見る人もエラー修正する人も、有志による特定の人に寄りがち

Slide 9

Slide 9 text

© Magic Moment 2023 自分が実装していない部分は 対応に時間がかかる 😵 課題 9

Slide 10

Slide 10 text

© Magic Moment 2023 自分が実装していない部分は 対応に時間がかかる 😵 課題 10 対象範囲のドメイン知識が不足していたり、実装が複雑な箇所だと難しい

Slide 11

Slide 11 text

© Magic Moment 2023 エラー対応のやりかたが 技術力や経験によって変わる 🥺 課題 11

Slide 12

Slide 12 text

© Magic Moment 2023 エラー対応のやりかたが 技術力や経験によって変わる 🥺 課題 12 どこまで影響範囲を考慮するべきなのか、実装で対処できるものか判断が難しい

Slide 13

Slide 13 text

© Magic Moment 2023 発生件数が少ないエラーを 対応するかの判断が人による 🧐 課題 13

Slide 14

Slide 14 text

© Magic Moment 2023 発生件数が少ないエラーを 対応するかの判断が人による 🧐 課題 14 リリースした機能によっては使われるまでにタイムラグがあり 発生件数を対応条件にしていると対応の判断がしにくい

Slide 15

Slide 15 text

© Magic Moment 2023 どうやって対策しているか 15 私達はこうやって対策しました 🤟🤟🤟

Slide 16

Slide 16 text

© Magic Moment 2023 どうやって対策しているか 16 毎週1時間、フロント全員で Sentry を確認・修正する時間を確保する 󰔡

Slide 17

Slide 17 text

© Magic Moment 2023 どうやって対策しているか 17 ○ 1週間で発生した課題の対応方法について全員で議論しています ○ 品質に関わるので、参加者が少なくても必ずやるようにしています 毎週1時間、フロント全員で Sentry を確認・修正する時間を確保する 󰔡

Slide 18

Slide 18 text

© Magic Moment 2023 どうやって対策しているか 18 ⭕ 運用が属人化しがち 毎週1時間、フロント全員で Sentry を確認・修正する時間を確保する 󰔡

Slide 19

Slide 19 text

© Magic Moment 2023 どうやって対策しているか 19 ペアタスクでエラーを調査・修正する 🙌

Slide 20

Slide 20 text

© Magic Moment 2023 どうやって対策しているか 20 ○ ドメインに詳しい人を交えて、影響範囲や不明点を減らしています ○ 再現方法の調査や実装方針も話し合い、最適な方法で解決します ペアタスクでエラーを調査・修正する 🙌

Slide 21

Slide 21 text

© Magic Moment 2023 どうやって対策しているか 21 ⭕ ドメイン知識不足 ⭕ 対応方法の判断 ペアタスクでエラーを調査・修正する 🙌

Slide 22

Slide 22 text

© Magic Moment 2023 どうやって対策しているか 22 過去3回以上発生したら エラー対応の対象とする ⏳

Slide 23

Slide 23 text

© Magic Moment 2023 どうやって対策しているか 23 ○ 毎週集計しているのを利用して、会の回数でトリアージしています ○ 件数が多い場合やクリティカルなものはチームで確認して即時対応します 過去3回以上発生したら エラー対応の対象とする ⏳

Slide 24

Slide 24 text

© Magic Moment 2023 どうやって対策しているか 24 ⭕ 発生件数が少ないエラーの判断 過去3回以上発生したら エラー対応の対象とする ⏳

Slide 25

Slide 25 text

© Magic Moment 2023 実際に管理している画面 25

Slide 26

Slide 26 text

© Magic Moment 2023 実際に管理している画面 26 その週で発生したエラーを見て、 対応方法の案や、やるべきかどうかをチームで話し合います

Slide 27

Slide 27 text

© Magic Moment 2023 実際に管理している画面 27

Slide 28

Slide 28 text

© Magic Moment 2023 実際に管理している画面 28 件数自体は少ないが3週に渡って発生しているので対応するようにしています

Slide 29

Slide 29 text

© Magic Moment 2023 運用する上でのTips 🍟 Tips 29 エラートラッキングを楽にする仕組み

Slide 30

Slide 30 text

© Magic Moment 2023 ● リリースバージョンを設定する ○ デプロイ時にリリースごとのファイルハッシュを使って、どのリリースに起因して発生 したエラーなのかを追えるようにしています ● 環境名を送信 ○ 社内本番(テスト環境)とお客様環境を区別して、重大なエラーがあっても早く対応で きるようにしています ● SourceMapのアップロード ○ どのファイルで発生したのか、原因箇所の特定を早くしています ○ webpack の devtools で hidden-source-map を指定してから Sentry にアッ プロードしています Tips 30

Slide 31

Slide 31 text

© Magic Moment 2023 今後やっていきたいこと 🤓 今後やっていきたいこと 31

Slide 32

Slide 32 text

© Magic Moment 2023 ● TagやBreadcrumbsに適切な情報を追加したい ○ 分析に役立つ情報を弊社に合わせてカスタマイズしたい ○ どういうのを送信すればいいのか設計中 ● SourceMapのbuildの改善 ○ SourceMapを生成するとbuild時間がながいので簡易的なSourceMapを送るよ うにしたい 今後やっていきたいこと 32

Slide 33

Slide 33 text

© Magic Moment 2023 まとめ 󰞹 まとめ 33

Slide 34

Slide 34 text

© Magic Moment 2023 ● 継続的な取り組みからSentryが活用できる ● 発生件数が少ないエラーでも会を区切る方法でトリアージができる ● みんなで協力してやればエラーは怖くない! まとめ 34 運用の仕方についても毎週チームで議論していて改善しています!

Slide 35

Slide 35 text

© Magic Moment 2023 宣伝 35 バックエンド、フロントエンド、 サーバーサイド、QAエンジニアなど 幅広く募集中です! https://www.magicmoment.jp/recruit/ Wantedly のブログ記事も ぜひご覧ください! https://www.wantedly.com/companies/magicmoment/stories ZennでTechBlogやっています! https://zenn.dev/magicmoment We’re Hiring!

Slide 36

Slide 36 text

© Magic Moment 2023 THANK YOU © Magic Moment 2023 36