【入門編】Sentryの「Dashboard」ウィジェットカスタマイズ術：チーム全体で共有すべき重要KPIの可視化ダッシュボード作成法 – 運用監視・オブザーバビリティ活用バイブル

やあ、こんにちは！今日もコードと向き合って、最高のプロダクトを作っている真っ最中かな？

突然だけど、君は毎朝のスタンドアップミーティング（朝会）で、こんな会話をしていないかい？

「なんか昨日からエラーが増えてる気がする……」
「どのブラウザで壊れてるのか、よくわからないんだよね」
「とりあえずログを漁ってみるか……」

……これ、実はエンジニアの時間を溶かす最ももったいない瞬間なんだ。エラーが起きたときに「どこを見るべきか」がチームで揃っていないと、調査だけで午前中が丸ごと消えてしまう。

そこで今回は、Sentryの「カスタムダッシュボード」を使い倒して、「チーム全員が3秒でプロダクトの健康状態を把握できる重要KPIダッシュボード」の作り方を伝授するよ。これをマスターすれば、毎日の朝会が劇的にクリアになり、無駄な犯人探しやログ漁りから解放される。

初心者でも迷わないように、Sentryの基本から「これさえ置けば間違いない」という最強のウィジェット配置まで、優しく丁寧にガイドしていくね。さあ、始めようか！

—

1. そもそも Sentry とは何か？（なぜログではなく「エラー」を見るのか）

開発を始めたばかりの頃は、コンソールへの`console.log`出力や、サーバーのテキストログ（`error.log`）を眺めがちだよね。でも、ユーザーが数千人、数万人と増えてくると、ログファイルは文字の滝のように流れ去り、本当に重要なバグがどこにあるか分からなくなってしまう。

そこで登場するのが、Sentryだ。

Sentryは、単なるログ収集ツールではない。アプリケーションで例外（Exception）や予期せぬクラッシュが発生した瞬間を捉え、「どのコードの何行目で起きたか」「どんなユーザー環境（OS、ブラウザ）か」「再現するためのコンテキスト（直前の操作）」を自動でパッケージングして教えてくれる、いわば「プロダクトの自動救急箱」なんだ。

「エラーを記録する」だけなら簡単だけど、Sentryの真骨頂は、そのデータを「誰もが一目でわかる形にビジュアライズ（可視化）する機能」にある。それが今回解説するダッシュボード機能さ。

—

2. 最小限のステップ：Sentryの基礎セットアップと「HelloWorld的」動作確認

ダッシュボードを作る前に、まずはSentryが正しくエラーをキャッチしてくれている状態を作ろう。今回は最も一般的なWebフロントエンド（例：ReactやVanilla JS）を想定して、最短で動かす手順を紹介するよ。

ステップ①：プロジェクトの作成とSDKのインストール

Sentryのダッシュボードにログインし、「Create Project」から利用しているフレームワーク（React, Vue, Node.jsなど）を選択する。すると、魔法の呪文（インストールコマンド）が表示される。

例えば、JavaScript/TypeScript環境ならこうだ：

Sentryの公式SDKをインストールする
npm install –save @sentry/javascript
または React なら
npm install –save @sentry/react

ステップ②：初期化コードの埋め込み（DSNの設定）

アプリのエントリーポイント（`main.js` や `index.js` など）で、Sentryを初期化する。ここで渡す `dsn`（Data Source Name）が、君のプロジェクト専用の宛先住所になる。

import as Sentry from “@sentry/javascript”;

// アプリの起動時に一番最初に行うべき初期化処理
Sentry.init({
dsn: “https://examplePublicKey@o0.ingest.sentry.io/0”, // 君のプロジェクトのDSNに書き換えてね

// パフォーマンスモニタリングのためのサンプリングレート（開発時は1.0で全取得）
tracesSampleRate: 1.0,

// 稼働環境のタグ付け（production, staging, development など）
environment: “development”,
});

ステップ③：動作確認（あえてエラーを投げてみる）

正しく連携できているかテストするために、ボタンクリックなどのタイミングで、わざとエラーを起こしてみよう。これがSentryにおける「HelloWorld」だ。

// わざと存在しないメソッドを呼び出してエラーを発生させる
function triggerTestError() {
try {
const obj = null;
obj.doSomethingImpossible(); // TypeError が発生する
} catch (error) {
// Sentryにエラーを明示的に送信する
Sentry.captureException(error);
console.error(“テストエラーをSentryに送信しました！”);
}
}

このコードを実行した後、Sentryの管理画面の「Issues」タブを見てごらん？
「`TypeError: Cannot read properties of null`」というエラーが、発生したコードの行数やブラウザ情報と共に美しく記録されているはずだ。――おめでとう！これで準備は完了だ。

—

3. チームで共有すべき重要KPI：カスタムダッシュボード作成術

さあ、ここからが本題だ。
Sentryの「Dashboards」メニューから「Create Dashboard」をクリックして、新しいキャンバスを作ろう。

チームのデイリースタンドアップで「今日、プロダクトは健康か？」を3秒で判断するために、絶対に配置すべき4つのウィジェットとその設定意図を伝授するよ。

—

ウィジェット①：「新規発生エラー（New Issues）」のトレンド

目的: リリース直後や夜間に、新種のエラーが湧いて出ていないかを検知する。
ウィジェットタイプ: `Bar Chart` または `Line Chart`
クエリ（Search Query）: `is:unresolved is:new`
解説:

既存の既知のエラーではなく、「今日初めて観測された新しいエラー」の数に絞るのがポイント。これが急増していたら、直前のデプロイに何らかのバグが混入している証拠。朝会で真っ先に確認すべき指標だよ。

—

ウィジェット②：「プラットフォーム・ブラウザ別」エラー発生率

目的: 特定の環境（例：Safariのみ、あるいは古いiOS端末のみ）でレイアウトやJSが死んでいないかを暴く。
ウィジェットタイプ: `Table` または `Pie Chart`
クエリ: `is:unresolved`
GroupBy（集計軸）: `browser.name` または `device.family`
解説:

「全体のエラー数は減っているのに、なぜかSafariユーザーだけ決済画面でエラーが出ている」といった偏りは、全体平均のグラフを見ているだけでは絶対に気づけない。このウィジェットを置いておくだけで、QAチームからの「Safariで動かないんですけど」という報告の前にこちらから先手を打てるようになる。

—

ウィジェット③：最もインパクトのある「Top 5 エラー（発生回数順）」

目的: チーム全員が「今、どのバグを最優先で潰すべきか」の共通認識を持つ。
ウィジェットタイプ: `Issue Table`
クエリ: `is:unresolved`
Sort（並び順）: `frequency`（発生回数）または `users`（影響を受けたユーザー数）
解説:

ここでの極意は、発生回数（Frequency）だけでなく「影響を受けたユーザー数（Users）」でソートすること。1人のユーザーが無限ループで踏んでいる10,000回のバグより、100人のユーザーが1回ずつ踏んでいるバグの方が、ビジネス上のインパクトは遥かに大きいからね。

—

ウィジェット④：重要機能の「セッション失敗率（リリース比較）」

目的: 直近のデプロイによって、ユーザー体験（UX）が改悪されていないかをマクロで監視する。
ウィジェットタイプ: `Release Health` または `Metric Widget`
解説:

Sentryのリリース追跡機能と組み合わせることで、「今回のバージョン（v1.2.0）は、先週のバージョン（v1.1.9）に比べてクラッシュフリーセッション率が下がっていないか？」を可視化できる。数字が緑色なら安心、赤く点灯していたら即座にロールバックの検討だ。

—

4. デイリースタンドアップを劇的に変える「ダッシュボード運用ルール」

せっかく素晴らしいダッシュボードを作っても、誰も見なければ意味がない。最後に、現場で機能する運用のコツを教えよう。

1. 朝会のモニターに必ず映す
朝会の最初に、Slackのハドルやオフィスの大型モニターでSentryのダッシュボードを全画面表示する。「昨日の新規エラーは2件、どちらも軽微なUIの警告です。現在対応中です」――たったこれだけで、チームの品質に対する意識が劇的に変わる。
2. 「誰が直すか」をその場で決める
ウィジェット③（Top 5 エラー）を見て、一番上に鎮座しているエラーについて「これ、誰がチケット切る？」と朝会の場でアサインしてしまう。これでバックログの底に埋もれるバグを根絶できる。

—

おわりに：オブザーバビリティは「安心」のための羅針盤

監視ツールというと、「エラーを監視して、怒られないようにするためのお目付け役」のように感じるかもしれない。でも、本当のオブザーバビリティは違う。

それは、「自分たちのコードが、世界中のユーザーにどう届き、どこで躓いているかをクリアに映し出す鏡」であり、エンジニアが自信を持って新しいコードをデプロイするための最強の翼なんだ。

今回紹介したカスタムダッシュボードを設定すれば、もう「エラーが出ていないか不安でおちおち寝られない」なんて夜とはお別れだ。
さあ、今すぐSentryを開いて、君だけの最初のウィジェットを配置してみよう。毎日の開発が、きっと驚くほどスムーズで楽しいものになるはずさ！