皆さんこんにちは、pregum_foxです。
今回はエラー監視サービスとしてよく使われるSentryをFlutterで使ってみました。
スクショの部分から見たい方は こちらから
以下目次です。
開発環境
開発環境は以下の通りです。
| 項目 | 内容 |
|---|---|
| OS | Intel Mac |
| Flutter | 3.0.0 |
動作環境
動作環境は以下の通りです。
| 端末名 | version |
|---|---|
| iPhone X | iOS 14.6 |
| Google Pixel 3a | Android 12 |
Sentryとは
Sentryについて、私自身サービス名だけは知っていた程度の知識なのでどんなことができるのか少し調べました。
一言で表すと、エラー管理をしてくれるサービスです。
主な機能としては
- エラーモニタリング
- パフォーマンスモニタリング
があります。
詳細はこちら をみると概ねわかるかと思います。
エラーモニタリングですと、似たようなサービスだとFirebase Crashlyticsがありますが、Firebaseはモバイルのみに対して
SentryはRubyやPHPなどバックエンドで使用される言語やプラットフォームにも対応している為、どこでも使えるのはメリットと言えるでしょう。
Flutterからエラーレポートを送信する前の事前準備
Flutterからエラーレポートを送信する為に準備が必要です。
Sentryにアカウント登録
下記urlからSentryのサイトへ移動し、「TRY SENTRY FOR FREE」をクリックします。
Application Performance Monitoring & Error Tracking Software | Sentry
サインインするアカウントを選択します。 すでにGitHubのアカウントを持っている場合は、GitHubアカウントで良いかと思います。
その後画面下部に「New Organization」ボタンが表示されるので、クリックします。
作成するユーザーの名前とOrganizerの名前(組織名)を設定し、I agree〜〜にチェックをつけ、メールについては任意のラジオボタンにチェックをつけて、「続ける」をクリックします。
そうすると最初にウォークスルーが表示されるので、「Skip onboarding」をクリックします。
下記画面まで表示されれば、OKです。
Flutterのアプリからレポートを送る
Sentry側の作業
プロジェクト作成
上記の作業でSentryのアカウントはできていますので、ここからはFlutterのアプリからSentryへエラーレポートを送る手順を記載します。
まずは、再度Sentryのページを開き、先ほど作成したアカウントでログインします。
Application Performance Monitoring & Error Tracking Software | Sentry
その後、「Projects」メニューをクリックし、「Create Project」をクリックします。
すると、Platformを選択する画面へ遷移しますので、Flutterをクリックし、「Give your project a name」の箇所に適当な名前を入れて「Create project」をクリックします。
再度にた画面が表示されますが、ここでは「Get your DSN」をクリックします。
するとurl(DSN)が表示されますので、コピーしておきます。
このDSNと呼ばれるものはprojectを特定するためのidのようなものという認識で大丈夫です。
これでSentry側の作業は完了です。
Flutter側の作業
サンプルアプリのClone
次はSentryへエラーレポートを送るサンプルプログラムですが、こちらで用意したサンプルがありますのでそちらを今回は使用します。
もちろん既に用意されている場合はそちらを使用していただいて大丈夫です。
上記のリポジトリをcloneしてください。
cloneしたブランチがreporter_without_screenshotになっていることを確認できましたらOKです。
DSNの設定
そしてmain.dartの15行目付近に options.dsn = '~~'; という行がありますので、そこに先ほどコピーした文字列をペーストします。
そしてアプリを起動します。
起動するといくつかのスライダーと「send error report!」というボタンが表示されるはずです。
表示されたら「send error report!」ボタンをタップします。
タップすると画面下部から「send report!」と表示されれば送信完了です。
ブラウザ上でSentryのサイトを開いてみましょう。
下記画像のようにグラフが増加していれば成功です。
プロジェクト名をクリックし、画面下部にある「New Issues」をクリックすると送信したエラーが確認できます。
これでレポートを送るチュートリアルは終了です。
お疲れ様でした。
スクリーンショットも合わせて送る方法
デフォルトの設定だと、スクリーンショットは送られないので、そもそもそんな機能はないのかと思い、Issueを探していたところ下記Issueでライブラリ使わずにできると記載されていましたので、少し調べてスクショを送信できるようにしてみました。
興味ある方は後述するリポジトリのコードを見てください。
ここから本題である、エラーレポート送信時に合わせてスクリーンショットも送る手順を記載します。
Sentry側の設定はすでにできていますので、Flutter側の作業のみ進めます。
Flutter側の作業
リビジョンの変更
具体的には使用するリビジョンを変更します。
先ほどのスクリーンショットなしの場合はwithout_screenshotのタグのサンプルコードを使用しました。
今回はwith_screenshotのタグのサンプルコードを使用します。
下記urlからもしくはgitのogからwith_screenshotのタグにリビジョンを変更してください。
その後、 ここで 取得した dsnも再度設定することを忘れないように注意してください。
コードの実行
設定ができましたら再度アプリを起動し、同じように「send error report!」ボタンをタップしてください。
Androidの実機で試しました。
その後送信したエラーレポートをSentryのサイトで詳細ページへ移動します。
遷移後、一番下までスクロールするとATTACHMENTSという項目にscreenshot_samp.pngというファイルがあるので、「Preview」ボタンをクリックします。
すると、下記画像のように画面がキャプチャされた画像が添付されていることが確認できます。
（注意）iOSの場合
iOSの場合は、同じソースで試しましたが、ファイル名が設定されておらず、もしかするとこちらで設定が必要な項目があるのかもしれません。
ただ、この状態でもダウンロードするとスクリーンショットの閲覧はできましたので、動作確認だけであれば現状で問題ないかと思います。
以上です。
感想
初めてちゃんとSentryに触れてみましたが、今回意図してないキャストエラーなどでもクラッシュログが送信されていたり、大体AndroidManiefst.xmlやlist.pinfoをいじる必要があるのですが、今回は1度も触らずにサンプルコードがかけましたので、すごい便利だなと感じました。
ただ、まだ完全に把握できていないので、実践に投入する場合はコスト面とかも考えて深く調査しようと思います。
ここまで読んでいただきありがとうございました。
参考サイト
【Sentry】どんなものか？使えるようにするには？ | amateur engineer's blog
toImage method - RenderRepaintBoundary class - rendering library - Dart API
