refactor: 点在しているconsole.logを消す

[Ojoxux]

詳細

• ブラウザにログ出しすぎで、デプロイするのが怖いので消してくれ

対象コード

• いらないログ全部

期待される改善点

• 出したらダメなログもあるので、セキュリティ向上？？

追加情報（任意）

関連 Issue / PR

[linear]

SON-10

[Ojoxux]

これは結構重要度高そう

[Ojoxux]

消すなよあほ

[Ojoxux]

@cursoragent

console.logがどのぐらいあるか調査してきてくれ

[cursor]

console.log の調査結果です。リポジトリ全体を検索して集計しました。

調査サマリー

対象	console.log	備考
リポジトリ全体	129件	33ファイル
apps/web（フロント）	82件	うち 70件が実行時、12件は TSDoc の使用例
apps/web クライアント側のみ	66件	API Route を除くブラウザ実行コード
apps/api（バックエンド）	14件	Workers 上で実行
packages（ビルドスクリプト）	6件	型生成など CLI 用
.github/workflows	27件	CI スクリプト内（ブラウザには出ない）

apps/web の console 系全体

種類	件数
console.log	82
console.error	43
console.warn	37
console.debug	1
合計	163件

---

ブラウザに出る可能性が高い箇所（優先度順）

1. 最多: SoundPinMarkers — 20件

マーカー作成・クラスタリング・更新のたびにログ。地図操作のたびにコンソールが埋まる原因になりやすいです。

2. Realtime / 通知 — 17件

• useRealtimeStore.ts — 9件（接続・購読・通知）
• notifications.ts — 8件（権限・送信・Service Worker）

3. 録音・アップロード — 20件

• useMediaRecorder.ts — 7件
• AudioPlayback/hooks.ts — 6件
• useRecorderStore.ts — 4件
• usePinAudioPlayer.ts — 3件

4. マップ — 12件

• MapComponent/hooks.ts — 5件
• pinConverters.ts — 1件
• useMapDebug.ts — 1件
• ほか console.warn / console.error 多数

5. その他

• useRealtime.ts — 1件（デバッグ用 [useRealtime] プレフィックス）
• useRecordingInterface.ts — 1件

---

実行されないが検出されるもの（12件）

TSDoc の @example 内の console.log です。実行時には出ませんが、grep ではカウントされます。

• ActionButtons, IconButton, CompassButton, SoundPinIcon
• PWAInstallPrompt, UIOverlay, AppHeader, RecordButton, AudioPlayerSection

---

サーバー側（ブラウザには通常出ない）

ファイル	件数	内容
apps/api/routes/pins.ts	6	アップロード・AI分析ジョブ
apps/api/services/supabase.ts	4	接続設定
apps/web/.../geocoding/reverse/route.ts	4	ジオコーディング API
apps/api/routes/audio.ts	2	開発環境キュー処理

---

セキュリティ上の懸念

PR 説明の通り、以下のようなログは本番で消した方がよいです。

• 音声アップロード結果（URL、ID）— useRecorderStore.ts, AudioPlayback/hooks.ts
• ピン・位置データ — SoundPinMarkers, pinConverters.ts, MapComponent/hooks.ts
• Realtime イベント内容 — useRealtimeStore.ts

console.error / console.warn はエラー処理として 80件程度残っています。削除対象は主にデバッグ用の console.log です。

---

所感

• PR の対象（ブラウザのログ出しすぎ） としては、apps/web の 実行時 console.log 約66件 が中心です。
• 特に SoundPinMarkers（20件） と Realtime/通知/録音まわり（約37件） が大半を占めます。
• Biome に noConsole ルールは未設定のため、再発防止には lint ルール追加も有効です。

---

次のステップとして、PR 向けに 66件のデバッグ用 console.log を削除（console.error/warn は残す）を進められます。進めてよければそのまま着手します。

  

[Ojoxux]

@cursoragent

そういうログってどこに飛ばしたらいいだろう。apmとか使いたいが

[cursor]

APM を使うなら、全部の console.log を一箇所に流すのではなく、種類ごとに行き先を分けるのが正解です。

推奨構成

ログの種類	例	飛ばす先
デバッグ trace	マーカー更新、Realtime 接続、録音開始	本番では送らない（dev のみコンソール）
エラー	アップロード失敗、未処理例外	Sentry
警告	遅いリクエスト、権限拒否	Sentry breadcrumb
API 計測	リクエスト時間・ステータス	Cloudflare Workers Observability（無料）
ログ横断検索（必要なら）	API の JSON ログ検索	Axiom（Logpush 連携）

今の console.log 66件の大半（SoundPinMarkers のマーカー更新など）は APM に送るべきではありません。ノイズ・コスト・PII（位置情報・音声 URL）漏洩の原因になります。消すか dev 限定にするのが正しい扱いです。

なぜ Sentry か

Sonory のスタック（Next.js on Cloudflare + Hono Workers）に Sentry が公式対応しており、monitoring.ts にも Sentry 連携の TODO が既にあります。

• ブラウザ: エラー・パフォーマンス・Session Replay
• Workers API: 未処理例外のスタックトレース
• 無料枠で個人開発〜小規模には十分

Axiom は「API の構造化ログを横断検索したい」ときの追加オプションです。Sentry（エラー）+ CF Observability（メトリクス）+ Axiom（ログ検索）の併用が一般的です。

実装した土台

PR #487 でテレメトリ基盤を追加しました。

import { createClientLogger } from "@/lib/telemetry"

const log = createClientLogger("SoundPinMarkers")
log.debug("cluster updated")           // dev のみ
log.error("marker failed", { code })   // 本番 → Sentry（DSN 設定後）

• dev: debug/info はコンソール
• prod: debug/info は破棄、warn/error は Sentry へ（DSN 未設定時は no-op）

次のステップ

1. sentry.io でプロジェクト作成 → DSN を staging/production に設定
2. @sentry/nextjs + @sentry/cloudflare 導入（別 PR）
3. SON-10 の console.log 削除と並行して createClientLogger へ置換
4. oxlint に no-console ルール追加で再発防止

Sentry プロジェクト作成まで進めるなら、その PR も続けて出せます。

  

[Ojoxux]

ていうか、sentry導入する予定だったんだな。