20240524_Sentryって何?

523 Views

May 27, 24

スライド概要

株式会社ソニックムーブによる勉強会「Webフロントエンドの新定番!?Sentryが攻略するエラーの迷宮 part1」のスライドです。

Sentryはアプリケーションのエラー監視やパフォーマンス計測などが行えるアプリ監視ツールです。エラー監視、パフォーマンス計測、Session Replayなど、主要機能を簡単に説明しました。

profile-image

BtoCサービスのUX・CRM設計とその実現を得意とするLINEアプリ開発、Webシステム開発、スマホアプリ開発会社のソニックムーブです。勉強会スライドを公開します。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Sentryって何? 2024/05/24 株式会社ソニックムーブ Shinya Hara https://www.sonicmoov.com/

2.

⾃⼰紹介 • Shinya Hara • 2019年 ソニックムーブ⼊社 • フロントエンドユニット マネージャー • Vue, Nuxt (React, Remix, Amplify Gen2) • やぎが好き(将来飼いたい🐐) https://www.sonicmoov.com/

3.

アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/

4.

アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/

5.

Sentryとは アプリ監視プラットフォーム 主要機能 • エラー監視 • パフォーマンス計測 https://www.sonicmoov.com/

6.

いろんなとこに使われてますね https://sentry.io/customers https://www.sonicmoov.com/

7.

さまざまなプラットフォームに対応 https://sentry.io/platforms https://www.sonicmoov.com/

8.

アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/

9.

フロントエンドのエラー監視は難しい エラー監視体制を整えておかないと... • エラーの⾒逃し😢 • エラーが発⽣したこと⾃体に気付けない • ユーザー体験の低下😢 • エラーが継続的に発⽣し、ユーザーの離脱率が⾼まる • デバッグが困難😢 • エラー発⽣時の詳細な情報が得られず、問題の特定と解決が難しい • 開発効率の低下😢 • ⼿動でのエラートラッキングや報告が必要となり、開発者の負担が増える https://www.sonicmoov.com/

10.

Sentryを導⼊! お客様に安定した価値提供ができるよう Sentry の導⼊を試した 🎉 導⼊候補として などのサービスもあったが、 機能がシンプル かつ 無料で使い始められる Sentry を採⽤ https://www.datadoghq.com/ja https://www.sonicmoov.com/

11.

アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/

12.

https://www.sonicmoov.com/ https://sentry.io/welcome

13.

エラー監視 https://www.sonicmoov.com/

14.

エラー監視 https://www.sonicmoov.com/

15.

パフォーマンス計測 https://www.sonicmoov.com/

16.

Session Replay 画⾯の録画ではな く、収集したイベン ト情報からユーザー 画⾯を再現 テキストは⾃動でマ スキングされる(明 ⽰的なunmaskも可 能) https://www.sonicmoov.com/

17.

アジェンダ • Sentryとは • Sentryを導⼊した背景 • 主要機能の紹介 • 導⼊⽅法 https://www.sonicmoov.com/

18.

導⼊⽅法 1. 環境に応じた Sentry SDK を インストール 2. Sentry上でプロジェクトを 作成し、設定を追加するだけ https://www.sonicmoov.com/

19.

まとめ • ざっくりとSentryについて紹介 • フロントエンドで困難だったエラー監視を⽬的にSentryを導 ⼊している • エラーに関するさまざまな情報を収集できるので、エラー解 決に役⽴てられる 活⽤できそう!と思った⽅はぜひ導⼊を😉 https://www.sonicmoov.com/