Table of Contents
ずっと年末年始に気になっていた機能でしたが、そろそろ気になってきたので検証します。
Sentry
みなさん、Sentry使ってますか？(長嶋茂雄)
Sentryはエラートレーシング、パフォーマンス監視ツールとして(特にフロントエンドで)かなりデファクトスタンダードになりつつあります。
かくいうこのブログもSentryめっちゃ使ってます。ありがとうございますSentry様。
主にエラー監視とパフォーマンス計測いとして使ってますが、その模様は下記記事をご確認ください。
ちなみに私がはじめてSentryを触ったのは2019年らしいですね。当時はVue.js書いてたんですね...。懐かしい...。
Session Replay
今回は年末くらいにBeta版になっていたSentryの新しい機能(まだBeta版で、wait listに登録が必要です)のSession Replayを検証していきます。
そもそもSession Replayとはなんぞや？ということで、公式のページを確認すると、
Sentry's Session Replay provides a video-like reproduction of user interactions on a site or web app, giving developers the details they need to resolve errors and performance issues faster. All user interactions - including page visits, mouse movements, clicks, and scrolls - are captured, helping developers connect the dots between a known issue and how a user experienced it in the UI.
Sentryのセッションリプレイは、サイトやウェブアプリでのユーザーとのやりとりをビデオのように再現し、エラーやパフォーマンスの問題を迅速に解決するために必要な詳細を開発者に提供します。ページの訪問、マウスの動き、クリック、スクロールなど、すべてのユーザーインタラクションがキャプチャされ、開発者は既知の問題とユーザーがUIでどのようにそれを体験したかという点を結びつけるのに役立ちます。
ということらしいです。エラーが出たときのユーザーの操作がビデオのように確認できる、ということですかね。すごいですね。
公式のデモ動画もありました。ポケモンを捕まえるアプリでエラーをSentryでキャッチしてそのReplayをデモしてます。
動画のなかではとあるユーザーがミュウを捕まえたときにundefinedに対してmapを処理する処理が入ってしまったようで画面がホワイトアウトしてしまうエラーが発生ししてましたが、通常のトレーシングだとその耐意見がわかりにくいのでエラーの重要性がわからないということが問題になってました。
Session Replayを使うとユーザーのインタラクションが動画で再現できるので体験が追いやすいとのこと。
Networkやconsole logも確認できるのでまるでローカルでDevtoolsを開いてデバッグしているかの如く、確認ができることをデモってました。
ユーザーの名前などセンシティブな情報にはSentry側で自動でマスキングもしてくれるようです。安心してプロダクトに導入できそうです。
さっそく導入してみた
自分のSentryアカウントはBeta版でSession Replayが使える状態になっていたので早速使ってみます。
このブログはGatsby.jsでできているのでReact版のSentryでReplay機能が使えそうですが、自分の場合、browser処理をjsxで書かず、後述するgatsby-browser.jsで自前で@sentry/browserで実装しているので@sentry/browserで実装していきます。
利用に特に追加のライブラリのインストールはいりませんが、 @sentry/browserを最低7.27.0以上にアップグレードする必要がありそうです。
とりあえず最新版にアップグレードすればよさそうです。
yarn upgrade @sentry/browser --latest検証時点で7.31.1がインストールされました。
Gastby.jsの場合、SSGせずブラウザ側で処理したいものはgatsby-browser.jsに定義します。
元々パフォーマンス検証のために@sentry/tracingもインストールしてますが、sesson replay用の設定をいくつかしていきます。
replaysSessionSampleRate、replaysOnErrorSampleRateにはそれぞれ適当0.1, 1.0を入れてます。
エラーが起きたときのキャプチャはしっかり取りたいので1.0、その他はサンプリングしてくれて構わないので0.1になってます。完全に適当な値なので運用してみてチューニングしていきます。
プラスでintegrationsに new Sentry.Replay() を設定すればReplay機能が有効になるっぽいです。
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
dsn: "https://xxxxxxxx@sentry.io/xxxxx",
release: `tubone-boyaki@${process.env.GATSBY_GITHUB_SHA}`,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
integrations: [new Integrations.BrowserTracing(), new Sentry.Replay()],
tracesSampleRate: 1.0,
});実装できたので早速環境にデプロイして確認していきましょう。
実際にうごかしてみた
特にブログをいじっていて自分の環境でエラーがでなかったので、(優秀)しばらくガチャガチャしていたらサンプリングの方でReplayになにか入ってきました。わくわく。
おお〜！こいつ・・・動くぞ！
特にエラーが出てないのでただのサンプリング結果ですが、確かにユーザーの操作が手にとるように動画でわかります。これはすごいっすね。
Console、Networkも見てみました。
ただのSSGの画面なので画面遷移時のリクエストしかでてませんね...。もうちょっとバックエンドと通信するようなアプリケーションだときっと楽しそうです。
いいな〜と思った機能でどうやらヒープメモリも取ることができるっぽいです。
メモリリークを見つけるのに役立ちそうですね！
（このブログmemlabをCIで実行しているので、結果と比較しながらメモリリークを対応する、みたいな記事書きたいですね！）
気になったこと
自分の環境だけなのか、はたまた日本語に対してなのか文字列がすべてマスキングされてしまいました...。
別にブログなので公開情報ばっかりなんですけどね...。
これはどういった挙動なのかわかっていないので今後調査していきたいと思います。
結論
もうちょっと運用してみて、どんなことができるかをまとめる必要はありますが、なんかすごい〜！ ということがわかりました。
蛇足ですが私はこういったトレーシング系のツールが大好きです。AWS X-RayでLambdaのトレースをしつつ、Datadog APMに連携するとかGoのEchoでJaegerを使ってボトルネックを調査するとか、結構興味があります。
SentryにはまだProfilingとかCron Monitoringとか私がまだ使いきれてない機能がたくさんあるので時間見つけて検証していきたいと思います。
tubone24にラーメンを食べさせよう！
ぽちっとな↓
