Go to Qiita Advent Calendar Top
LoginSignup
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TOMOSIA-HieuNTin株式会社TOMOSIA VIET NAM

Sentryを理解する：自動エラー追跡とパフォーマンス監視ツール

Posted at

Screenshot 2025-12-15 at 14.38.54.png

目次

1. Sentryとは？

Sentryは、アプリケーションの監視と追跡をサポートするオープンソースプラットフォームで、エラー追跡（error tracking）とパフォーマンス分析（performance monitoring）の機能を備えています。

バックエンド、フロントエンド、モバイルなど、さまざまな環境で動作するように設計されたSentryは、開発者がリアルタイムでエラーを検出し、スタックトレース、環境、エラー発生前のユーザー行動などの詳細情報を提供することで、問題の原因を迅速に特定し、解決することを支援します。

従来のログ記録（JavaScriptのconsole.log()やバックエンドのlogger.info()など）と比較して、Sentryはより優れた価値を提供し、エラーの管理と処理をより効率的にします。

メリット：
🔔 ユーザーが報告する前にサイレントエラーをキャッチ
📊 ソースマップ付きの完全なスタックトレース
🌍 ユーザー、デバイス、ブラウザのコンテキスト
🧭 エラーがいつどこで発生したかを正確に追跡
🧪 本番環境専用のバグをデバッグ
🔁 リリースバージョンに紐付けられているため、迅速にロールバック可能
⚙️ Slack、メール、PagerDutyでアラートを設定

2. 主な機能

単なるエラー報告だけでなく、Sentryには以下のような多くの便利な機能があります：

  • Release Tracking（リリース追跡）：新しいバージョンをデプロイするたびにSentryに通知できます。これにより、Sentryは各バージョンに関連するエラーを表示できます。ユーザーから苦情があった場合、使用しているバージョンを知るだけでなく、リリース間でどのエラーが頻繁に発生しているかも確認できます。
  • Suspect Commits（疑わしいコミット）：Gitなどのバージョン管理システムと連携して、Sentryはエラーの「犯人」となる可能性のあるコミットを特定できます。この機能は非常に便利で、コード履歴を検索して誰が何を修正してエラーを引き起こしたかを探す必要がなくなります。
  • User Feedback（ユーザーフィードバック）：Sentryは、ユーザーがアプリケーション上で直接インシデント情報を含むフィードバックを送信できるようにします。これは、ユーザーが問題に直面した状況を理解するのに特に役立ちます。
  • Performance Monitoring（パフォーマンス監視）：Sentryは、アプリケーションのパフォーマンスを追跡する機能も提供します。トランザクションを表示し、応答時間を測定することで、ユーザーエクスペリエンスを最適化できます。
  • Integrations and Alerts（統合とアラート）：Sentryは、Slack、Jira、GitHubなど、多くのサードパーティサービスと統合されています。Slackでアラートを受け取ったり、新しいバグがあるときにJiraで自動的にissueを作成したり、メールで通知を受け取ったりできます。これにより、エラー処理プロセスがチームのワークフローのシームレスな一部になります。

3. Sentryはどのように動作するか？

  • Sentryの動作を理解するために、React（フロントエンド）とNode.js（バックエンド）で動作するWebアプリケーションを想像してください。ユーザーがWebサイトにアクセスすると、ボタン、フォーム、API呼び出しなどと対話します。時々、ユーザーの行動（またはコード内のバグ）により、クライアント側でJavaScriptエラーが発生したり、サーバー側で例外が発生したりします。

  • Sentryをプロジェクトに統合すると、エラーが発生するたびに、アプリケーションにインストールされたSentry SDKコードがそのエラーを「キャッチ」します。たとえば、フロントエンド（React）でエラーが発生した場合、Sentryはスタックトレース、ブラウザ情報、現在のURL、ユーザーエージェント、ユーザーID（存在する場合）を取得し、すべてをSentryサーバーに送信します。サーバー側では、Sentryがそれらを保存、分析し、ダッシュボードに表示します。

  • ダッシュボードインターフェースでは、最新のエラーリスト、エラー数、発生頻度、重大度を確認できます。エラーにタグを付けたり、チームメンバーにエラーを割り当てたり、コメントを追加したり、解決済みとしてマークしたりできます。

  • この図は、フロントエンドまたはバックエンドでエラーが発生してから、Sentry SDKによってキャッチされ、Sentryサーバーに送信され、最終的にダッシュボードに表示されるまでのデータフローを示しています。

4. 使用時の注意点

  • 適切なアラート設定：最初は、すべてのエラーに対してアラートを送信したくなりますが、それによってSlackやメールボックスが「氾濫」する可能性があります。
    ルールを設定してください：同じエラーがY分以内にX回発生した場合、または古いエラーと重複しない新しいエラーがある場合にのみアラートを送信します。これにより、通知の洪水に「沈む」ことがなくなります。
  • タグとコンテキストの追加：情報を自動的に収集するだけでなく、エラーの検索とフィルタリングを容易にするために、手動でタグやコンテキストを追加できます。
    例：環境（「production」、「staging」）、アプリケーションバージョン、ユーザーIDに対応するタグを追加できます。これにより、特定の環境やユーザーグループに関連するエラーを迅速にフィルタリングできます。
  • CI/CDとの統合：新しいバージョンをデプロイするたびに、APIを呼び出すか統合を使用してSentryに通知してください。そうすれば、すぐに確認できます：「バージョン1.2.3をデプロイした後、エラーXが30%以上増加しました」。これは、新しく更新されたコードの影響を評価するために非常に重要です。
  • パフォーマンスのための適切なサンプリングレートの選択：パフォーマンス機能を使用する場合、すべてのリクエストを常に追跡すると、リソースを消費する可能性があります。負荷を軽減しながら代表的なパフォーマンスデータを取得するために、適切なtracesSampleRateを選択してください（例：0.1（10%））。
  • 情報セキュリティ：Sentryは多くの機密情報を収集できます。Sentryに送信する前に、機密データ（トークン、パスワードなど）を非表示にするか削除するように注意してください。Sentryのデータスクラビング（data scrubbing）機能を使用して、セキュリティとプライバシー規制の遵守を確保できます。

5. Sentry価格（概要）

Screenshot 2025-12-15 at 15.58.43.png

5.1 Developerプラン（無料）

  • 対象：個人、小規模プロジェクト
  • 制限：1ユーザー、5,000エラー、1,000万スパン、50セッションリプレイ、1クローンモニター
  • ストレージ：1GB添付ファイル
  • アラート：メールで受信

5.2 Teamプラン（月額26ドル）

  • 対象：開発チーム
  • Developerのすべてを含み、以下を追加：
    • 無制限ユーザー
    • サードパーティ統合（Slack、Jiraなど）
    • カスタムアラート
    • インサイト（7日間のルックバック）

5.3 Businessプラン（月額80ドル）

  • 対象：エンタープライズチーム/グループ
  • Teamのすべてを含み、以下を追加：
    • インサイト（90日間のルックバック）
    • コンポーネント固有のワークフロー
    • カスタムダッシュボード
    • 高度なクォータ管理

6. Next.jsプロジェクトへのセットアップ方法（簡潔）

6.1. インストール：

npm install --save @sentry/nextjs
# または
yarn add @sentry/nextjs

6.2. 自動ウィザードを実行（推奨）：

npx @sentry/wizard@latest -i nextjs

ウィザードは、sentry.client.config.js、sentry.server.config.jsを作成/更新し、next.config.jsをwithSentryConfigでラップします。

6.3. 環境変数の設定（.env.local）：

NEXT_PUBLIC_SENTRY_DSN=your_dsn
SENTRY_DSN=your_dsn
SENTRY_AUTH_TOKEN=your_auth_token
SENTRY_ORG=your_org
SENTRY_PROJECT=your_project

6.4. 設定

6.4.1 クライアントサイド設定

import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  // ユーザーのリクエストヘッダーとIPを追加します。詳細については以下を参照：
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
});

これらは、ユーザーインタラクション中にブラウザで発生するJavaScriptエラーです。
例：

  • TypeError: Cannot read property 'name' of undefined
  • 処理されていないボタンクリックや壊れたコンポーネントプロップからのクラッシュ

6.4.2. サーバーサイド設定

import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  // ユーザーのリクエストヘッダーとIPを追加します。詳細については以下を参照：
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
});

Sentryは以下からのエラーを追跡します：

  • getServerSideProps、getStaticProps、middleware.ts
  • /pages/api配下のカスタムAPIエンドポイント

これらをキャプチャするには、try/catch内で非同期ロジックをラップし、手動でログを記録します：

try {
  // サーバーサイドロジック
} catch (error) {
  Sentry.captureException(error);
}

6.4.3 未処理のPromise拒否

例：

fetch('/api/products')
  .then((res) => res.json())
  .then((data) => {
    const name = data.product.name; // productがundefinedの場合クラッシュ
  });

try/catchを使用してエラーを手動で報告します：

try {
  const res = await fetch('/api/products');
  const data = await res.json();
} catch (err) {
  Sentry.captureException(err);
}

6.4.4 ビジネスコードのロジックエラー

技術的にはすべて機能しているが、ビジネスロジックが間違っている場合があります。例：割引の間違い、状態遷移の誤り、無効な日付など。

以下を使用できます：

Sentry.captureMessage('User reached invalid payment step');

6.4.5 パフォーマンス監視

Sentryは以下のようなパフォーマンス問題を自動的に追跡します：

  • 遅いページ読み込み
  • 大きなアセット
  • 長いAPI応答時間

有効にするには、設定でtracesSampleRate: 1.0を使用します。

カスタムトランザクションも作成できます：

const transaction = Sentry.startTransaction({ name: 'Load Product Page' });
// ...
transaction.finish();

6.4.6 ユーザーコンテキストとセッション情報

誰がエラーを経験したかを理解するために、ユーザーデータを添付できます：

Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.name,
});

以下も役立ちます：

Sentry.setContext('cart', { items: 3, total: 29.99 });

6.4.7 カスタムイベントタグ

チーム、ルート、または機能でエラーをフィルタリングしたいですか？

Sentry.setTag('feature', 'checkout');
Sentry.captureException(err);

6.5. Error BoundaryとPerformanceの有効化：

  • sentry.client.config.js：必要に応じてBrowserTracing、Replayを有効にします。
  • 適切なサンプルレートを設定：tracesSampleRate（パフォーマンス）、replaysSessionSampleRate（リプレイ）。

6.6. ビルド時のソースマップ：

  • next.config.jsは既にwithSentryConfigでラップされています。SENTRY_AUTH_TOKEN、SENTRY_ORG、SENTRY_PROJECTがある場合、ビルドは自動的にソースマップをアップロードします。
  • ウィザードを使用しない場合：withSentryConfigを手動で設定し、widenClientFileUpload、hideSourceMapsを有効にします。

6.7. 統合後のクイックチェック：

  • ルート/開発ページでSentry.captureMessage('sentry setup ok')を試してみてください。
  • ダッシュボードにissueが表示されることを確認するために、意図的に新しいエラーをthrowしてみてください。

7. チェックリスト + ベストプラクティス（サンプルコード付き）

セキュリティのベストプラクティス

  • パスワードや個人情報（PII）を直接ログに記録しないでください
  • beforeSendフックを使用して機密データをマスクまたはサニタイズします：
Sentry.init({
  beforeSend(event) {
    // 例：ユーザーのメールを削除
    if (event.user) {
      delete event.user.email;
    }
    return event;
  },
});

基本設定

  • インストールと環境変数：@sentry/nextjs、.env.localにDSN/ORG/PROJECT/AUTH_TOKEN
  • Next設定のラップ：withSentryConfigを使用（ウィザードで作成済み）
  • 適切なサンプルレートでトレーシングとリプレイを有効化：
// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay({ maskAllText: true, blockAllMedia: true }),
  ],
  tracesSampleRate: 0.1, // クォータを削減し、代表的なデータを維持
  replaysSessionSampleRate: 0.05, // セッションの5%
  replaysOnErrorSampleRate: 1.0, // エラー時は100%
});

ノイズフィルタリングと機密データのスクラビング

// sentry.client.config.js（またはserver）
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  beforeSend(event, hint) {
    const msg = hint?.originalException?.message || '';
    if (msg.includes('ResizeObserver loop')) return null;
    return event;
  },
  ignoreErrors: ['ResizeObserver loop limit exceeded'],
  // データスクラビング（クライアントサイドマスク）
  normalizeDepth: 5,
});

迅速なトリアージのためのタグ/コンテキスト

Sentry.setTag('environment', process.env.NODE_ENV);
Sentry.setTag('app_area', 'checkout');
Sentry.setUser({ id: user?.id, email: user?.email });

重要なエリアのError Boundary

import { ErrorBoundary } from '@sentry/react';

const SafeArea = ({ children }) => (
  <ErrorBoundary fallback={<div>エラーが発生しました。もう一度お試しください。</div>}>
    {children}
  </ErrorBoundary>
);

ソースマップのアップロード

ビルドにSENTRY_AUTH_TOKEN、SENTRY_ORG、SENTRY_PROJECTがあることを確認してください。ウィザードは既にwithSentryConfigを有効にしています。

統合後のチェック

Sentry.captureMessage('sentry setup ok')を呼び出し、意図的にエラーをthrowしてissueが表示されることを確認してください。

最小限のアラート

新しい/クリティカルなエラーに対してメールまたはSlackを有効にしてください。

8. まとめ

  • Sentryは本番エラーの可視化とパフォーマンス計測を一括で実現し、リリース単位で原因追跡が容易
  • Next.jsではウィザードとwithSentryConfigで素早く導入でき、ソースマップの自動アップロードも可能
  • サンプルレート調整とデータスクラブでコストとセキュリティを両立し、タグ/コンテキストでトリアージを高速化
  • 導入後はcaptureMessageと意図的な例外で動作確認し、最低限のアラート（メール/Slack）を有効化して運用開始
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?