🚨

個人開発のエラー監視 - Sentry無料枠で月5000エラーまで完全監視する実装ガイド2026

に公開
Next.js
個人開発
Sentry
運用
エラー監視
tech

TL;DR

  • 個人開発のエラー監視は Sentry の Developer Plan（月 5000 イベント）で十分
  • Next.js 16 への導入は npx @sentry/wizard で 10 分
  • 無料枠を食い潰す 3 大ノイズは ignoreErrors と beforeSend で除去
  • プロジェクト数 1 の制限は tags.service で相乗り運用 して回避

Developer Plan の実際の制限（2026-04 時点）

項目 無料枠 個人開発で足りるか
エラーイベント 5,000 / 月 ✅ 十分（実消費 3% 程度）
Performance Unit 10,000 / 月 🟡 サンプリングで節約
Replay 50 / 月 🟡 重大バグ再現用に予約
データ保持 30 日 ✅ 問題なし
プロジェクト数 1 ❌ 複数サービスは要工夫（後述）

出典：Sentry Pricing（確認日: 2026-04-16）

実運用の感覚値として、Next.js 16 + Supabase + Stripe の有料 SaaS を運用していても、月のエラーイベントは 平均 120 件程度。5000 イベントに対して 2.4% の消化率で、個人開発レベルでは有料化は当面不要です。

Next.js 16 への導入（10 分）

1. SDK インストール

npx @sentry/wizard@latest -i nextjs

ウィザードが以下を自動生成します。

  • sentry.client.config.ts
  • sentry.server.config.ts
  • sentry.edge.config.ts
  • next.config.js（Sentry ラッパ）

2. DSN を環境変数へ

# .env.local
NEXT_PUBLIC_SENTRY_DSN=https://xxxxx@oXXXXXX.ingest.sentry.io/XXXXXXX
SENTRY_AUTH_TOKEN=sntrys_xxxxxxxxxxxx

Vercel にも同じ値を登録。SENTRY_AUTH_TOKEN は本番ビルド時の source map アップロードに使います。

3. ノイズ除去フィルタ（これが最重要）

Developer Plan で 5000 イベントを食い潰す最大要因は、拡張機能由来の例外とボットの 404です。

sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  // Performance は 10% サンプリング
  tracesSampleRate: 0.1,

  // Replay は「エラー時のみ」
  replaysSessionSampleRate: 0,
  replaysOnErrorSampleRate: 1.0,

  ignoreErrors: [
    // Chrome 拡張由来のノイズ
    "ResizeObserver loop limit exceeded",
    "Non-Error promise rejection captured",
    /chrome-extension:\/\//,
    // よくある無害なエラー
    "Network request failed",
    "AbortError",
  ],

  beforeSend(event, hint) {
    // 404 は通知しない
    const status = (hint?.originalException as { statusCode?: number })?.statusCode;
    if (status === 404) return null;
    return event;
  },
});

このフィルタだけで、月の送信イベントが体感で 1/5 程度まで落ちます。

4. 環境分離（これをやらないと Slack が荒れる）

sentry.server.config.ts
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // development / preview / production を明示分離
  environment: process.env.VERCEL_ENV ?? "development",
  tracesSampleRate: 0.1,
});

Slack 通知を ¥0 で飛ばす

Sentry 側 UI で Integrations → Slack を接続し、以下のアラートを設定します。

Issue Alerts（新規エラー通知）

  • 条件: 初めて発生したエラー
  • フィルタ: environment:production のみ
  • 通知先: #alerts などの専用チャネル

Metric Alerts（スパイク検知）

  • 条件: 5 分間で 同一エラーが 10 件以上
  • フィルタ: environment:production
  • 通知先: 同上

開発中のローカル例外まで通知が飛ぶと、Slack が荒れて誰も見なくなります。environment フィルタは必ずかけること。

プロジェクト数 1 の制限を回避する：tags.service で相乗り

Developer Plan は 1 プロジェクト制限ですが、tags で論理的に分ければ実質マルチプロジェクトとして運用できます。

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // ...
  initialScope: {
    tags: {
      service: "kobo-web",      // サービスごとに変える
      version: process.env.NEXT_PUBLIC_VERSION ?? "dev",
    },
  },
});

Sentry UI の検索で service:kobo-web service:masatoman-net と絞れば混在しても困りません。有料化（月 $26〜）する前に、まずこの運用で粘るのが個人開発流です。

動作確認 — わざとエラーを出す

Next.js App Router 前提の最小確認コード：

app/sentry-test/page.tsx
"use client";

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

export default function SentryTestPage() {
  return (
    <button
      onClick={() => {
        // 意図的にエラーを発生
        throw new Error("Sentry test error from client");
      }}
    >
      Throw test error
    </button>
  );
}

/sentry-test を開いてボタンを押すと、Sentry UI に 10 秒以内にエラーが表示されます。Slack 通知まで動くかもこの場で確認しておきます。

まとめ

やること 所要時間
npx @sentry/wizard で導入 3 分
ノイズ除去フィルタを入れる 3 分
Slack Integration 接続 4 分
合計 10 分 / ¥0

Stripe Webhook 失敗・決済完了画面の 500 エラーは 売上に直結する事故です。個人開発だからこそ、無料で動く監視を今日入れておきましょう。

運用レビュー・収益と繋げる監視は masatoman.net で

実プロジェクトで Sentry アラートから Stripe 決済失敗を発見してリカバリした話、複数サービスのコスト試算、Replay を使うべき / 使わない判断基準などは masatoman.net の本編にまとめています。

👉 【個人開発の運用】Sentry無料枠で月5000エラーまで完全監視する設定ガイド2026

Discussion