20240524_Sentryって何？
1.5K Views
May 27, 24
スライド概要
株式会社ソニックムーブによる勉強会「Webフロントエンドの新定番！？Sentryが攻略するエラーの迷宮 part1」のスライドです。
Sentryはアプリケーションのエラー監視やパフォーマンス計測などが行えるアプリ監視ツールです。エラー監視、パフォーマンス計測、Session Replayなど、主要機能を簡単に説明しました。
BtoCサービスのUX・CRM設計とその実現を得意とするLINEアプリ開発、Webシステム開発、スマホアプリ開発会社のソニックムーブです。勉強会スライドを公開します。
関連スライド
各ページのテキスト
Sentryって何？ 2024/05/24 株式会社ソニックムーブ Shinya Hara https://www.sonicmoov.com/
⾃⼰紹介 • Shinya Hara • 2019年 ソニックムーブ⼊社 • フロントエンドユニット マネージャー • Vue, Nuxt (React, Remix, Amplify Gen2) • やぎが好き（将来飼いたい🐐） https://www.sonicmoov.com/
アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/
アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/
Sentryとは アプリ監視プラットフォーム 主要機能 • エラー監視 • パフォーマンス計測 https://www.sonicmoov.com/
いろんなとこに使われてますね https://sentry.io/customers https://www.sonicmoov.com/
さまざまなプラットフォームに対応 https://sentry.io/platforms https://www.sonicmoov.com/
アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/
フロントエンドのエラー監視は難しい エラー監視体制を整えておかないと... • エラーの⾒逃し😢 • エラーが発⽣したこと⾃体に気付けない • ユーザー体験の低下😢 • エラーが継続的に発⽣し、ユーザーの離脱率が⾼まる • デバッグが困難😢 • エラー発⽣時の詳細な情報が得られず、問題の特定と解決が難しい • 開発効率の低下😢 • ⼿動でのエラートラッキングや報告が必要となり、開発者の負担が増える https://www.sonicmoov.com/
Sentryを導⼊！ お客様に安定した価値提供ができるよう Sentry の導⼊を試した 🎉 導⼊候補として などのサービスもあったが、 機能がシンプル かつ 無料で使い始められる Sentry を採⽤ https://www.datadoghq.com/ja https://www.sonicmoov.com/
アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/
https://www.sonicmoov.com/ https://sentry.io/welcome
エラー監視 https://www.sonicmoov.com/
エラー監視 https://www.sonicmoov.com/
パフォーマンス計測 https://www.sonicmoov.com/
Session Replay 画⾯の録画ではな く、収集したイベン ト情報からユーザー 画⾯を再現 テキストは⾃動でマ スキングされる（明 ⽰的なunmaskも可 能） https://www.sonicmoov.com/
アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/
導⼊⽅法 1. 環境に応じた Sentry SDK を インストール 2. Sentry上でプロジェクトを 作成し、設定を追加するだけ https://www.sonicmoov.com/
まとめ • ざっくりとSentryについて紹介 • フロントエンドで困難だったエラー監視を⽬的にSentryを導 ⼊している • エラーに関するさまざまな情報を収集できるので、エラー解 決に役⽴てられる 活⽤できそう！と思った⽅はぜひ導⼊を😉 https://www.sonicmoov.com/