【初心者向け】Sentryでエラー監視を始めよう - 導入から使い方まで完全解説
Sentryの導入方法から実際の使い方まで、初心者にもわかりやすく解説。Next.jsでの設定例、ダッシュボードの見方、エラーの対処法を紹介します。
【初心者向け】Sentryでエラー監視を始めよう
「サイトでエラーが起きてるのに気づかなかった...」
そんな経験はありませんか？ユーザーからの報告で初めてバグに気づくのは、開発者として避けたい状況です。
この記事では、Sentryを使ってエラーを自動検知・通知する方法を初心者向けに解説します。
Sentryとは？
Sentryはエラー監視サービスです。サイトやアプリで発生したエラーを自動的にキャッチして、開発者に通知してくれます。
Sentryでできること
| 機能 | 説明 |
|---|---|
| エラー検知 | JavaScript/Pythonなど多言語対応 |
| リアルタイム通知 | Slack/メールでアラート |
| スタックトレース | エラー発生箇所を特定 |
| Session Replay | ユーザーの操作を再現 |
| パフォーマンス計測 | ページ速度の監視 |
料金
- 無料プラン: 5,000エラー/月、1ユーザー
- 有料プラン: $26/月〜
個人開発や小規模サイトなら無料プランで十分です。
Step 1: Sentryアカウントを作成
- Sentry公式サイト にアクセス
- 「Get Started Free」をクリック
- GitHub/Google/メールで登録
Step 2: プロジェクトを作成
- ログイン後、「Create Project」をクリック
- プラットフォームを選択（例: React または Next.js）
- プロジェクト名を入力（例:
my-website） - 「Create Project」をクリック
作成後、**DSN（Data Source Name）**が表示されます。これは後で使うのでコピーしておきましょう。
https://[email protected]/1234567
Step 3: Next.jsに導入する
3-1. パッケージをインストール
3-2. 環境変数を設定
.env.local に以下を追加：
3-3. Sentryプロバイダーを作成
components/analytics/SentryProvider.tsx を作成：
3-4. レイアウトに追加
app/layout.tsx でプロバイダーをラップ：
3-5. デプロイ
環境変数を本番環境（Vercel/Cloudflare Pages）に設定して、デプロイします。
Step 4: 動作確認
方法1: 実際にエラーを発生させる
ブラウザのコンソールで以下を実行：
方法2: 存在しないページにアクセス
サイトで存在しないURLにアクセスして404エラーを発生させます。
確認
Sentryダッシュボードの「Issues」に新しいエラーが表示されれば成功です！
Sentryダッシュボードの見方
Issues（イシュー）画面
エラーの一覧が表示されます。
| 項目 | 意味 |
|---|---|
| Error | エラーメッセージ |
| Events | 発生回数 |
| Users | 影響を受けたユーザー数 |
| Last Seen | 最後に発生した時刻 |
| First Seen | 初めて発生した時刻 |
エラー詳細画面
イシューをクリックすると詳細が表示されます：
- Stack Trace - エラーが発生したコードの場所
- Breadcrumbs - エラー発生前のユーザーの操作履歴
- Tags - ブラウザ、OS、URLなどの情報
- Session Replay - ユーザーの画面操作を動画で再現（設定時）
よくあるエラーの例
TypeError: Cannot read property 'xxx' of undefined
ChunkLoadError
Network Error
便利な機能
アラート設定
特定の条件でSlackやメールに通知：
- 「Alerts」→「Create Alert」
- 条件を設定（例: 1時間に10回以上発生）
- 通知先を選択（Slack/メール）
イシューの管理
- Resolve - 修正済みとしてマーク
- Ignore - 無視する（意図的なエラーなど）
- Archive - アーカイブに移動
リリースとの紐付け
デプロイ時にリリース情報を送信すると、どのバージョンでエラーが発生したか追跡できます：
トラブルシューティング
エラーがSentryに送信されない
- DSNが正しいか確認
- 本番環境か確認（開発環境では送信しない設定の場合）
- CSPヘッダーを確認（
*.ingest.sentry.ioを許可） - 広告ブロッカーを無効化
CSPヘッダーの設定例
Cloudflare Pagesの場合、public/_headersに追加：
まとめ
Sentryを導入すると：
- ユーザーより先にエラーに気づける
- エラーの発生箇所を特定できる
- どのブラウザ/デバイスで起きているかわかる
無料プランでも十分使えるので、個人開発サイトにもおすすめです。
質問があればX（@ADA_Lab_tech）までどうぞ！