sentry

Sentry の統合

エラー監視とパフォーマンストレーシングに Sentry を使用する際のガイドラインです。

例外の捕捉

try/catch ブロックでは Sentry.captureException(error) を使用します。

try {
  await riskyOperation();
} catch (error) {
  Sentry.captureException(error);
  throw error;
}

パフォーマンストレーシング

ボタンクリック、API 呼び出し、関数呼び出しなど、意味のあるアクションのスパンを作成します。

UI アクション

function handleClick() {
  Sentry.startSpan(
    { op: "ui.click", name: "Submit Form" },
    (span) => {
      span.setAttribute("formId", formId);
      submitForm();
    }
  );
}

API 呼び出し

async function fetchData(id) {
  return Sentry.startSpan(
    { op: "http.client", name: `GET /api/items/${id}` },
    async () => {
      const response = await fetch(`/api/items/${id}`);
      return response.json();
    }
  );
}

設定（Next.js）

Sentry の初期化ファイル：

• sentry.client.config.ts - クライアント側
• sentry.server.config.ts - サーバー側
• sentry.edge.config.ts - エッジランタイム

import * as Sentry from "@sentry/nextjs" でインポートします。他のファイルで初期化する必要はありません。

基本的な設定

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

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  enableLogs: true,
});

コンソールログを使用する場合

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  integrations: [
    Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }),
  ],
});

構造化ログ

変数を含むテンプレートリテラルには logger.fmt を使用します。

const { logger } = Sentry;

logger.trace("Starting connection", { database: "users" });
logger.debug(logger.fmt`Cache miss for: ${userId}`);
logger.info("Updated profile", { profileId: 345 });
logger.warn("Rate limit reached", { endpoint: "/api/data" });
logger.error("Payment failed", { orderId: "order_123" });
logger.fatal("Connection pool exhausted", { activeConnections: 100 });