docs: Next.js + Supabase 推奨構成に @vercel/logger と Sentry を追加 by keito4 · Pull Request #525 · keito4/config

keito4 · 2026-03-04T15:39:29Z

概要

Next.js + Supabase 構成のセットアップガイドに、ロギングとエラー監視の推奨ツールを追加します。

変更内容

docs/setup/web-app-nextjs.md に「ロギング & モニタリング」セクションを追加
- @vercel/logger: 基本的な使い方、lib/logger.ts でのモジュール別ラップパターン
- Sentry (@sentry/nextjs): Supabase エラーを captureException する連携コード例
- ロギング設計指針表（ツール・用途・環境の使い分け）
- console.log 本番禁止の原則を明記
docs/tool-catalog.md の Web アプリ (Next.js) 依存リストに @vercel/logger・@sentry/nextjs を追記

変更統計

変更ファイル数: 2 件
追加行数: 91 行
削除行数: 8 行

テスト

✅ Format Check (Prettier): 通過
✅ Lint (ESLint): 通過
✅ Test (Jest): 101 tests 通過

🤖 Generated with Claude Code

Summary by CodeRabbit

Documentation
- Added comprehensive logging and monitoring guidance for Next.js applications, including installation and usage patterns
- Updated dependency documentation with new logging and monitoring tools

- web-app-nextjs.md に「ロギング & モニタリング」セクションを追加 - @vercel/logger の使い方・推奨パターンを記載 - Sentry と Supabase の連携コード例を追加 - ロギング設計指針表（用途・環境ごとの使い分け）を追加 - tool-catalog.md の Web アプリ依存リストに両ツールを追記 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-04T15:39:54Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b2d776b2-3c29-406c-a202-9348a724fe5f

📥 Commits

Reviewing files that changed from the base of the PR and between 0f62920 and a81931f.

📒 Files selected for processing (2)

docs/setup/web-app-nextjs.md
docs/tool-catalog.md

📝 Walkthrough

Walkthrough

Documentation updates introduce logging and monitoring capabilities to the Next.js setup guide, covering @vercel/logger and Sentry integration with usage examples, best practices, and design guidelines. The tool catalog is updated to reflect these dependencies.

Changes

Cohort / File(s)	Summary
Logging & Monitoring Documentation `docs/setup/web-app-nextjs.md`, `docs/tool-catalog.md`	Added new "ロギング & モニタリング" section with `@vercel/logger` and Sentry integration instructions, usage examples, and design guidelines. Updated dependencies table to include `@vercel/logger` and `@sentry/nextjs` as Next.js project dependencies.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A logger hops through Next.js trails,
Sentry catches when the code derails,
With @vercel keeping watch so keen,
The finest logging you've ever seen!
Structured logs and errors caught with care, ✨📊

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding `@vercel/logger` and Sentry to the Next.js + Supabase recommended setup documentation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/add-difit-global-install

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

keito4 · 2026-03-04T15:41:36Z

🔍 AI Code Review (Local Hook)

Models: Codex (default) / Gemini (default)

🤖 Codex Review

指摘事項
なし。

総合判定
patch is correct。変更はドキュメント追加・更新のみで、明確な正確性/性能/セキュリティ/保守性/開発者体験の問題は見当たりません。
信頼度: 0.66

✨ Gemini Review

このコードレビューの結果を報告します。

指摘事項

非推奨または存在しないパッケージの使用可能性
- ファイル: docs/setup/web-app-nextjs.md (L282-315), docs/tool-catalog.md (L132)
- 説明: @vercel/logger というパッケージは、Vercelの公式ドキュメントやnpm公開パッケージとして一般的に推奨されているものではありません（多くの場合、内部パッケージか、pino や next-logger などの代替ツール、あるいは標準の console をVercelが構造化ログとして処理する形式が一般的です）。誤ったパッケージ名を案内している可能性が高く、開発者が導入時に混乱する恐れがあります。
- 対策: Vercel環境で構造化ログを実現するための正しい推奨ライブラリ（例: pino + pino-pretty または next-logger）を確認し、修正してください。
Sentry設定の不完全な案内
- ファイル: docs/setup/web-app-nextjs.md (L321)
- 説明: npx @sentry/wizard@latest -i nextjs を実行すると、自動的に sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts などのファイルが生成されますが、ドキュメント内のコード例では @sentry/nextjs を直接インポートして使用する例しかありません。
- 対策: sentry.server.config.ts 等での初期化が必要であることや、環境変数（NEXT_PUBLIC_SENTRY_DSN など）の設定が必要であることに触れるか、詳細ガイドへのリンクをより強調してください。
依存関係のバージョン指定
- ファイル: docs/tool-catalog.md (L132)
- 説明: Tailwind CSS 4 や Zod 4, React 19 など、まだメジャーバージョンが正式リリース直後、あるいは先行利用段階のものが含まれています。これらは破壊的変更を含む可能性があるため、プロジェクトの安定性を重視する場合は注意喚起が必要です。

判定: patch is incorrect

理由: @vercel/logger という存在が疑わしい（または一般的でない）パッケージを「必ず導入する」として紹介している点は、ドキュメントの正確性を損なう重大な問題です。また、Next.jsでのロギングのベストプラクティス（console.log がVercel上で自動的に構造化される点など）との整合性が取れていません。

信頼度スコア: 0.95

⚠️ 修正が必要です

上記のレビューで問題が指摘されています。修正してからマージしてください。

🤖 Generated by post_pr_ai_review.py hook

claude · 2026-03-04T15:43:30Z

PR レビュー

全体的によく整理されたドキュメント追加です。以下にフィードバックをまとめます。

✅ 良い点

ロギング設計指針表（ツール・用途・環境）が明瞭で参照しやすい
console.log の本番禁止原則を明文化している点は重要
docs/sentry-setup-guide.md への相対パスリンク（../sentry-setup-guide.md）が正しく解決される
tool-catalog.md との整合性を保っている

⚠️ 要確認事項

1. `@vercel/logger` の `.child()` API サポート確認

// lib/logger.ts
export const appLogger = logger.child({ service: 'my-app' });
export const dbLogger = logger.child({ service: 'supabase' });

@vercel/logger は pino ベースの軽量ラッパーですが、.child() メソッドが公式サポートされているか確認が必要です。もし未サポートの場合、このコード例を参照した開発者が実行時エラーに遭遇します。

対応案: 実際に動作確認した上で記載する、または「pino の .child() 相当の機能があります」と注記する。

2. 「必ず導入」の強度について

Next.js + Vercel 構成では以下の2ツールを必ず導入する。

@vercel/logger は Vercel プラットフォーム固有のツールです。Vercel 以外（例: Docker, AWS, GCP）にデプロイするプロジェクトでは、このライブラリのメリットが得られません。

提案: 「Next.js + Vercel 構成では…」と補足するか、「推奨」にとどめて他の構造化ロギングライブラリ（pino 等）も選択肢として示す。

3. Sentry 例での `select('*')` アンチパターン

const { data, error } = await supabase.from('users').select('*');

ドキュメント例であっても select('*') は本番コードで踏襲されるリスクがあります。必要なカラムを明示するか、コメントで「例示目的のみ」と注記することを推奨します。

💡 軽微な改善提案

4. Sentry の環境変数設定への言及

Sentry のコード例があるにもかかわらず、SENTRY_DSN 等の環境変数設定への言及がありません。セットアップガイドへのリンクはありますが、最小限の注記（例：「.env.local に SENTRY_DSN の設定が必要」）があると親切です。

5. `err` の型注記

logger.error('Supabase query failed', { error: err.message, table: 'users' });

err が何のコンテキストで定義されているか不明です。try-catch 内の例として明示するか、snippet を catch ブロック付きに修正することを提案します。

総評

ドキュメントの構成・内容は高品質です。@vercel/logger の .child() API サポート確認（#1）と「必ず導入」の表現見直し（#2）を優先的に対応いただけると、より信頼性の高いガイドになります。

🤖 Reviewed with Claude Code

keito4 · 2026-03-04T15:48:23Z

🔍 AI Code Review (Local Hook)

Models: Codex (default) / Gemini (default)

🤖 Codex Review

指摘事項なし（変更はドキュメント追加・更新のみで、正確性・パフォーマンス・セキュリティ・保守性・開発者体験に影響する導入済みの問題は見当たりません）。

総合判定: patch is correct（ドキュメント追記と依存一覧の更新のみで、実装や挙動に影響する不整合が確認できないため）信頼度 0.62

✨ Gemini Review

ご提示いただいた変更内容をレビューしました。

発見された問題点

存在しないパッケージ名の指定（重大）
- 影響範囲: docs/setup/web-app-nextjs.md (282行目, 290行目), docs/tool-catalog.md (132行目)
- 内容: @vercel/logger というパッケージは、npm に公式には存在しません。npm install @vercel/logger を実行するとエラーになります。
- 推奨: Vercel で構造化ログを扱う場合は、pino や next-logger を使用するのが一般的です。コード例にある logger.child() などの API は pino のものと酷似しているため、pino もしくはそれをラップしたライブラリを意図している可能性があります。
Supabase エラーの Sentry キャプチャ方法
- 影響範囲: docs/setup/web-app-nextjs.md (325行目)
- 内容: Supabase の error オブジェクト（PostgrestError）は、標準的な Error インスタンスではない場合があります。そのまま Sentry.captureException(error) に渡すと、スタックトレースが期待通りに記録されない可能性があります。
- 推奨: new Error(error.message) としてラップして渡すか、error オブジェクトのプロパティを extra コンテキストとして明示的に含める記述を推奨します。

判定

patch is incorrect

理由: 導入を「必須」としている @vercel/logger パッケージが存在しないため、このドキュメントに従ってセットアップを行う開発者が必ずエラーに直面してしまいます。

信頼度スコア: 0.95

⚠️ 修正が必要です

上記のレビューで問題が指摘されています。修正してからマージしてください。

🤖 Generated by post_pr_ai_review.py hook

github-actions · 2026-03-04T17:13:30Z

🎉 This PR is included in version 1.83.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

keito4 merged commit d1cf711 into main Mar 4, 2026
4 checks passed

keito4 mentioned this pull request Mar 4, 2026

docs: Biome の noConsole ルールを推奨設定に追加 #526

Merged

coderabbitai Bot mentioned this pull request Mar 4, 2026

docs: Next.js / SPA 推奨ライブラリを拡充・統一 #527

Merged

github-actions Bot added the released リリース済み label Mar 4, 2026

keito4 deleted the feat/add-difit-global-install branch March 20, 2026 05:17

Navigation Menu

docs: Next.js + Supabase 推奨構成に @vercel/logger と Sentry を追加 - #525

docs: Next.js + Supabase 推奨構成に @vercel/logger と Sentry を追加#525
keito4 merged 1 commit into
mainfrom
feat/add-difit-global-install

keito4 commented Mar 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 4, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

keito4 commented Mar 4, 2026

Uh oh!

claude Bot commented Mar 4, 2026

Uh oh!

keito4 commented Mar 4, 2026

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

keito4 commented Mar 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

変更内容

変更統計

テスト

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

keito4 commented Mar 4, 2026

🔍 AI Code Review (Local Hook)

🤖 Codex Review

✨ Gemini Review

指摘事項

⚠️ 修正が必要です

Uh oh!

claude Bot commented Mar 4, 2026

PR レビュー

✅ 良い点

⚠️ 要確認事項

1. @vercel/logger の .child() API サポート確認

2. 「必ず導入」の強度について

3. Sentry 例での select('*') アンチパターン

💡 軽微な改善提案

4. Sentry の環境変数設定への言及

5. err の型注記

総評

Uh oh!

keito4 commented Mar 4, 2026

🔍 AI Code Review (Local Hook)

🤖 Codex Review

✨ Gemini Review

発見された問題点

判定

⚠️ 修正が必要です

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

keito4 commented Mar 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 4, 2026 •

edited

Loading

1. `@vercel/logger` の `.child()` API サポート確認

3. Sentry 例での `select('*')` アンチパターン

5. `err` の型注記