はじめに
Web アプリケーションの開発において、エラーログの適切な管理は不可欠です。特に本番環境では、発生したエラーを素早く検知し、迅速に対応することが求められます。
本記事は、Next.js や Express を用いた Web アプリケーションを対象に、Sentry を活用したエラーログ管理・障害検知の強化方法を整理します。
エラーログの重要性
エラーログを適切に整備することで、以下のようなメリットがあります。
- 障害の早期発見:エラーが発生した際に即座に検知できる。
- 問題の再現性向上:詳細なログを記録することで、開発者が問題を正確に把握できる。
- ユーザー影響の最小化:障害対応を迅速に行い、ユーザーへの影響を軽減できる。
- 開発の効率化:エラーログを活用することで、デバッグにかかる時間を削減できる。
Sentry の概要
Sentry は、アプリケーションのエラーログやパフォーマンスを可視化し、リアルタイムで障害を通知してくれるツールです。以下のような特徴があります。
- リアルタイムエラートラッキング:エラーが発生すると即座に通知を受け取ることができる。
- スタックトレースの提供:エラーが発生したコードの行やスタックトレースを確認可能。
- ユーザーの影響範囲の可視化:どのユーザーにどの程度の影響が出たのかを把握できる。
- 各種プラットフォーム対応:JavaScript、Node.js、React、Next.js、Express などのさまざまな環境で利用可能。
- 外部ツールとの連携:Slack、Teams、GitHub、JIRA などと統合可能。
最近では以下のような新機能も追加されています。
- Session Replay:ユーザー操作画面を再現し、再現性の低いバグの調査を効率化
- AI Assist:スタックトレースから原因推測や修正候補を提示
Sentry の導入手順
1. Sentry のアカウント作成
まず、Sentryの公式サイト でアカウントを作成し、新しいプロジェクトを設定します。
2. Sentry SDK のインストール
例えば、Next.js アプリケーションに Sentry を導入する場合、以下の手順でセットアップできます。
npm install @sentry/nextjs
3. 設定ファイルへの追加
next.config.js
に Sentry の設定を追加します。
const { withSentryConfig } = require('@sentry/nextjs');
const moduleExports = {
sentry: {
dsn: process.env.SENTRY_DSN, // Sentry の DSN を環境変数で管理
tracesSampleRate: 1.0, // パフォーマンスモニタリングのサンプリング率
},
};
module.exports = withSentryConfig(moduleExports);
4. 初期化処理
pages/_app.js
や server.ts
に以下のような初期化処理を追加します。
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: process.env.SENTRY_DSN,
tracesSampleRate: 1.0,
});
5. エラーのキャプチャ
手動でエラーをキャプチャする場合
try {
throw new Error('意図的なエラー');
} catch (error) {
Sentry.captureException(error);
}
API ハンドラーで利用する例
export default async function handler(req, res) {
try {
throw new Error('API エラー');
} catch (error) {
Sentry.captureException(error);
res.status(500).json({ message: '内部エラーが発生しました' });
}
}
障害検知の強化
Sentry を活用して障害検知を強化するために、以下のポイントを押さえます。
1. 通知設定の最適化
-
Slack との連携
- Sentry の「Integrations」から Slack を連携し、重要なエラーが即座に通知されるように設定する。
- 例:
@here
をつけてチームにすぐに知らせる。
-
GitHub Issues との連携
- 自動的にバグ報告を GitHub Issue に作成し、開発者がすぐに対応できるようにする。
2. エラーフィルタリングの活用
- 特定のエラーを無視
- 例えば、ボットのアクセスによる 404 エラーなどは通知対象から除外する。
Sentry.init({
beforeSend(event) {
if (event.exception && event.exception.values[0].type === 'NotFoundError') {
return null; // 404 エラーは無視
}
return event;
},
});
実運用の工夫:
- 除外ルールは一度決めて終わりではなく、定期的に見直す
- 重要度の低いエラーが「実は深刻」な場合もあるので監査を続ける
3. リリース管理とバージョン管理
- デプロイごとにリリース情報を Sentry に送信し、どのバージョンで問題が発生したのかを可視化。
sentry-cli releases new my-app@1.0.0
sentry-cli releases finalize my-app@1.0.0
4. パフォーマンスモニタリングの導入
- Sentry ではエラー検知だけでなく、API のレスポンス速度やページロード時間もトラッキング可能。
tracesSampleRate
の調整により、適切なデータを収集する。
Sentry.init({
dsn: process.env.SENTRY_DSN,
tracesSampleRate: 0.2, // サンプリング率 20%
});
実運用の工夫:
- いきなり 1.0 にするとコストが跳ね上がるため、0.1〜0.2 から始めるのが無難
- 本番とステージングで DSN を分け、不要なデータが混ざらないようにする
まとめ
エラーログを適切に整備し、Sentry を活用することで、障害検知の精度を向上させることができます。
- Sentry の導入により、リアルタイムでエラーを検知・通知できる。
- 通知設定の最適化やフィルタリングを行い、ノイズを減らす。
- パフォーマンスモニタリングも活用し、ユーザー体験の向上に寄与する。
導入して数週間で「ユーザーからの問い合わせで初めて気づく」状況は解消され、エラー検知の主体が人から仕組みに移行しました。結果として、開発チームは安心して新機能開発に集中できるようになります。
本記事を参考に、Sentry を活用した強固なエラーログ管理を実現してください。
関連する技術ブログ
GraphQL・REST API の堅牢な認可設計:RBAC・ABAC・OAuth 2.0 のベストプラクティス
GraphQL & REST API の堅牢な認可設計を構築する方法とは?RBAC・ABAC の活用、Rate Limiting、API Gateway、監視のベストプラクティスをまとめました。
shinagawa-web.com
開発業務の自動化紹介:ETL (Python)、Bot (Slack/Discord)、CI/CD (GitHub Actions)、監視 (Sentry/Datadog) まで徹底解説
開発業務の効率化を加速する自動化テクニックを網羅的に解説。データ処理の自動化(ETLスクリプト)、Slack / Discord Bot による定型業務の効率化、Terraform / Pulumi を活用したインフラ管理、CI/CD の最適化、Sentry / Datadog によるエラーハンドリングなど、多方面にわたる自動化の実践例を紹介します。さらに、Pull Request の自動管理、ログ監視、テスト、警告通知の自動化まで、開発のスピードと品質を向上させるためのベストプラクティスを詳しく解説します。
shinagawa-web.com
Next.jsプロジェクトにSentryを統合してエラーモニタリングとパフォーマンス監視を行う方法
Next.jsアプリケーションにSentryを導入する方法を徹底解説!Sentryの基本的な機能から、セットアップ手順、エラーやパフォーマンスの監視、実際の動作検証まで詳しく説明します。初心者から開発経験者まで、Sentryを活用した効率的なエラー管理とパフォーマンス最適化のノウハウを学べる内容です。
shinagawa-web.com
ExpressとMongoDBで簡単にWeb APIを構築する方法【TypeScript対応】
本記事では、MongoDB Atlasを活用してREST APIを構築する方法を、初心者の方にも分かりやすいステップで解説します。プロジェクトの初期設定からMongoDBの接続設定、Expressを使用したルートの作成、さらにTypeScriptを用いた型安全な実装まで、実践的なサンプルコードを交えて丁寧に説明します。
shinagawa-web.com
Express(+TypeScript)入門ガイド: Webアプリケーションを素早く構築する方法
Node.jsでWebアプリケーションを構築するための軽量フレームワーク、Expressの基本的な使い方を解説。シンプルなサーバー設定からルーティング、ミドルウェアの活用方法、TypeScriptでの開発環境構築まで、実践的なコード例とともに学べます。
shinagawa-web.com
React のリファクタリング完全ガイド:モジュール化・レンダリング最適化・設計パターン適用でコードを改善
フロントエンド開発において、可読性が低いコードやパフォーマンスの課題を抱えていませんか?本記事では、React を用いたフロントエンドのリファクタリング手法を具体的なコード例とともに解説します。命名規則の統一や関数分割による可読性向上、共通処理のモジュール化によるコードの整理、関心の分離に基づいたコンポーネント設計の最適化を実践。また、useMemo / useCallback / React.memo を活用したレンダリングの最適化、Promise.all や useQuery の適切な適用による非同期処理の最適化など、パフォーマンス改善にも焦点を当てます。さらに、クリーンアーキテクチャやリポジトリパターンの導入、TypeScript による型安全性の強化、依存関係の整理まで幅広くカバー。リファクタリングを計画的に進める方法も紹介し、スムーズな適用を支援します。より読みやすく、保守しやすいコードへと進化させるための実践的なアプローチをご紹介します。
shinagawa-web.com
JestとTypeScriptで始めるテスト自動化:基本設定から型安全なテストの書き方まで徹底解説
JestとTypeScriptを使ったテスト自動化の基本を学びたい方へ。環境のセットアップ方法、型安全なテストを書くメリット、コードの信頼性を高める実践的なテクニックを初心者向けに丁寧に解説します。テストカバレッジの活用で、品質の高い開発を目指しましょう。
shinagawa-web.com
ESLint / Prettier 導入ガイド: Husky, CI/CD 統合, コード品質の可視化まで徹底解説
開発チームでコードの品質を統一するために、Linter(ESLint)と Formatter(Prettier)は欠かせません。Linter はコードの構文やスタイルの問題を検出し、Formatter はコードの整形を統一します。本記事では、9つの取り組みについて詳しく解説します。
shinagawa-web.com