mcpField
U
using-sentry

using-sentry

github.com/andrelandgraf開発2396 回インストール20 週間前に更新
リポジトリ

using-sentry について

Sentryを使う開発者向けに、エラーの捕捉、コンテキストの追加、パフォーマンス計測、構造化ログの実践方法を紹介します。Next.js向けSDKの例に加え、パンくずリストやユーザーコンテキストの管理も扱います。

主な機能

  1. 01例外の手動捕捉
  2. 02ユーザー・独自コンテキストの追加
  3. 03パフォーマンススパンの作成
  4. 04構造化ログの記録
  5. 05エラー用パンくずリストの追加
  6. 06サインアウト時のユーザーコンテキスト消去

活用シーン

  1. 01処理済みでも記録が必要なエラーの追跡
  2. 02エラーイベントへのユーザー情報の付与
  3. 03非同期処理の計測
  4. 04決済などの業務イベントの記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill using-sentry

インストール後、Claude Code で/using-sentryを入力して読み込まれたか確認します。

詳細

Sentry を使用する

Sentry を使用して例外をキャプチャし、コンテキストを追加し、パフォーマンススパンを作成し、構造化ログを記録します。

Sentry を使用する

Sentry を使用して例外をキャプチャし、コンテキストを追加し、パフォーマンススパンを作成し、構造化ログを記録します。

参照：

例外のキャプチャ

処理済みでも追跡する必要があるエラーを手動でキャプチャします。

import * as Sentry from "@sentry/nextjs";

try {
  await riskyOperation();
} catch (err) {
  Sentry.captureException(err);
  // Handle the error gracefully...
}
コンテキストの追加

エラーにユーザーコンテキストとカスタムコンテキストを添付します。

import * as Sentry from "@sentry/nextjs";

// Set user context (persists for session)
Sentry.setUser({
  id: session.user.id,
  email: session.user.email,
});

// Add custom context to exceptions
Sentry.captureException(err, {
  tags: {
    feature: "checkout",
    plan: "pro",
  },
  extra: {
    orderId: "order_123",
    items: cart.items,
  },
});
パフォーマンスのトレース

重要な操作のスパンを作成します。

import * as Sentry from "@sentry/nextjs";

// Wrap async operations
const result = await Sentry.startSpan(
  {
    op: "http.client",
    name: "GET /api/users",
  },
  async () => {
    const response = await fetch("/api/users");
    return response.json();
  },
);

// Wrap sync operations
Sentry.startSpan(
  {
    op: "ui.click",
    name: "Submit Button Click",
  },
  (span) => {
    span.setAttribute("form", "checkout");
    processSubmit();
  },
);
Sentry ロガーの使用

Sentry には、Logs タブに表示される構造化ログ機能があります。

import * as Sentry from "@sentry/nextjs";

const { logger } = Sentry;

logger.info("Payment processed", { orderId: "123", amount: 99.99 });
logger.warn("Rate limit approaching", { current: 90, max: 100 });
logger.error("Payment failed", { orderId: "123", reason: "declined" });
パンくずリスト

エラーのコンテキストを提供するためにパンくずリストを追加します。

import * as Sentry from "@sentry/nextjs";

// Automatically captured: console logs, fetch requests, UI clicks
// Manual breadcrumbs for custom events:
Sentry.addBreadcrumb({
  category: "auth",
  message: "User signed in",
  level: "info",
});
ユーザーコンテキストのクリア

サインアウト時にユーザーデータをクリアします。

import * as Sentry from "@sentry/nextjs";

async function signOut() {
  Sentry.setUser(null);
  await authClient.signOut();
}

参考資料

コメント

Markdown 対応