メインコンテンツへスキップ
友田 陽大
Vercel 本番運用
Vercel
可観測性
Next.js
パフォーマンス
コスト最適化
TypeScript
SRE

Vercel 可観測性ガイド:Observability・Speed Insights・Web Analytics・Log Drains・OTelで本番を追う

Vercel公式に忠実な可観測性ガイド。Observability(関数/エッジ/ミドルウェア/外部API/ISR等のInsights)、Speed Insights(実ユーザーCWV)、Web Analytics(プライバシー配慮)、Runtime Logs、Log Drains、Monitoring/Notebooks、OpenTelemetry連携を、@vercel/speed-insights・@vercel/analyticsの実装と『計測→最適化』のワークフローで解説します。

公開日
読了時間
6分
著者
友田 陽大
シェア

「本番が遅い・エラーが出ている。でもどのルートが原因か分からない」——可観測性が無いと、障害調査もコスト最適化もになります。Vercel は標準で多層の可観測性を備えており、「症状から原因へ」機械的に遡れるようになっています。

この記事は Vercel Observability の公式仕様に忠実に、可観測性の各層と「計測 → 最適化」のワークフローをまとめます。全体像は Vercel 本番運用ガイド を参照してください。


可観測性の地図:5つの層

何が分かるか有効化
Observability(Insights)関数/エッジ/ミドルウェア/外部API/ISR/画像最適化等のルート別メトリクス標準(全プラン無料)
Speed Insights実ユーザーの CWV(LCP/INP/CLS)@vercel/speed-insights
Web Analyticsアクセス解析(Cookieレス・プライバシー配慮)@vercel/analytics
Runtime Logs / Log Drains関数のログ・外部転送標準 / Log Drains
Monitoring / Notebooks / OTelダッシュボード・アラート・外部APM連携Observability Plus / OpenTelemetry

Observability:ルート別に何が起きているか

Observability タブは、リクエストをアプリの構造に沿って可視化します。全プランで無料、Observability Plus(Pro/Ent)でレイテンシ・パス別内訳・長期保持が付きます。

可視化される Insights(一部):

  • Vercel Functions:呼び出し数・エラー率・実行時間(ルート別)
  • External APIs:外部API呼び出しの遅延・失敗
  • Edge Requests / Middleware:エッジ・ミドルウェアの挙動
  • ISR / Image Optimization / Fast Data Transfer / AI Gateway / Queues / Blob:各機能の使用量

Vercel が追跡するイベント:Edge Requests・Function Invocations・External API Requests・Routing Middleware Invocations・AI Gateway Requests。1リクエストが複数イベントになりうる(例:1 Edge Request+1 Middleware+1 Function+2 External API=5イベント)——これがコストの内訳でもあります(コスト最適化)。

障害調査のワークフロー(推測しない)

①Observability で対象機能(例: Functions)と期間を選ぶ
  ↓
②Error Rate / Duration のグラフでスパイクを特定、ズームイン
  ↓
③ルート一覧をエラー率 or 遅延で並べ替え、犯人ルートを特定
  ↓
④ルートをクリック → Runtime Logs へ直行 → スタックトレース確認
  ↓
⑤原因を修正([トラブルシューティング](/blog/vercel-troubleshooting-build-function-errors-timeout-guide) 参照)

「症状(エラー率・遅延)→ ルート → ログ → 原因」と一次情報から遡るのが、SRE の王道です(可観測性・SRE の原則)。


Speed Insights:実ユーザーの Core Web Vitals

合成計測(Lighthouse)ではなく、実ユーザーの体感(LCP/INP/CLS)を計測します。@vercel/speed-insights を入れてコンポーネントを設置するだけ。

// app/layout.tsx(Next.js App Router)
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

CWV はスコアであると同時に SEO ランキング要因でもあります。実ユーザー値を見て、遅いページを CWV 最適化(INP/LCP/CLS)で改善します。


Web Analytics:Cookieレスのアクセス解析

@vercel/analytics で、Cookie に頼らずプライバシーに配慮したアクセス解析を得られます。GDPR 配慮のサイトに向きます。

// app/layout.tsx
import { Analytics } from "@vercel/analytics/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

両パッケージの注意@vercel/speed-insights@vercel/analytics は、必ず package.json の依存に入れます。グローバルに入れて参照すると、特にモノレポでビルドエラー(トラブルシューティング)になります。


Runtime Logs と Log Drains

  • Runtime Logs:関数・ミドルウェアの console.* 出力をダッシュボードで確認。障害調査の一次情報。
  • Log Drains:ログを Datadog・Grafana・自社の収集基盤などへ転送。長期保管・横断分析・既存APMとの統合に。

構造化ログconsole.log("text") ではなく、相関ID・ルート・ユーザー(PIIマスキング)を含むJSON 構造化ログを出すと、Log Drains 先での検索・集計が桁違いに楽になります。PII を出さない設計は必須です。

// 構造化ログの最小形(相関IDで追える)
function log(level: string, msg: string, ctx: Record<string, unknown>) {
  console.log(JSON.stringify({ level, msg, ts: Date.now(), ...ctx }));
}
log("info", "order.created", { orderId, region: process.env.VERCEL_REGION });

Monitoring・Notebooks・OpenTelemetry

  • Monitoring:メトリクスの上にダッシュボードとアラートを構築。
  • Notebooks:Observability クエリを保存・整理。
  • OpenTelemetry:OTel コレクタ連携で、トレース・メトリクスを外部APMへ。分散トレーシングを入れれば、Vercel 関数 → 外部API → DB の一連を相関できます。

Rolling Releases × 外部メトリクス:自前の APM でカナリア判断したいときは、デプロイ ID を外部の可観測性システムに伝播させます。これでカナリアとベースのメトリクスを区別でき、Rolling Releases の昇格判断を自前の数字で下せます。


「計測 → 最適化」を回す

可観測性は「入れて終わり」ではなく、改善ループの起点です。

目的見る場所次のアクション
遅いSpeed Insights(CWV)/ Functions DurationCWV 最適化キャッシュ
エラーError Rate → Runtime Logsトラブルシューティング
高いFunctions Insights(Invocation/Active CPU)コスト最適化
bot/攻撃Firewall タブWAF/BotID

本番チェックリスト(可観測性)

  • Observability で関数・エラー率・遅延をルート別に監視
  • Speed Insights で実ユーザー CWV を計測(SEO 直結)
  • Web Analytics で Cookieレスのアクセス解析
  • @vercel/speed-insights / @vercel/analyticspackage.json 依存
  • **構造化ログ(JSON・相関ID・PIIマスキング)**を出す
  • 外部APMへ Log Drains / OpenTelemetry で連携
  • Spend Management とアラートで予算・障害を検知
  • 「計測 → 最適化」をループとして回す

まとめ

可観測性は「ログを出すこと」ではなく、「止まった処理・遅いページ・高いルートを一目で追える状態」を作ることです。

  1. Observability で症状(エラー/遅延/コスト)をルート別に特定
  2. Speed Insights / Web Analytics で実ユーザーの体感と行動
  3. Runtime Logs / Log Drains で一次情報と外部連携
  4. OpenTelemetry で分散トレーシング、デプロイIDでカナリア比較
  5. すべてを「計測 → 最適化」のループに

可観測性の設計(構造化ログ・SLO・アラート・外部APM連携・コスト監視)を、案件として承ります。

本記事は Vercel Observability 公式ドキュメント(2026年6月時点)に基づきます。機能・プラン条件は更新されるため、本番採用時は公式で最新値を確認してください。

友田

友田 陽大

経済産業大臣賞 受賞プロダクト開発者。TypeScript + Python + AWS で、SaaS・業界DX・ 実用レベルの生成AI(RAG)を、要件定義からインフラ・運用まで一人で完遂します。

この記事の実装を、案件として承ります

Vercel のアプリを、設計から本番運用・コスト最適化まで承ります

Fluid Compute を前提とした関数設計(グローバル状態の安全化・waitUntil・Cron)、4層キャッシュ(ISR/CDN/Runtime Cache/Cache Components)の設計、プレビュー/Promote/Instant Rollback/Rolling Releases の安全なデプロイ、Firewall/WAF/BotID の入口防御、Blob/Edge Config/Marketplace のストレージ選定、Active CPU 課金前提のコスト最適化まで。Next.js 製プロダクトを Vercel で本番運用してきた知見で、速く・安く・安全に伴走します。

プロジェクト単位(請負)・技術顧問のどちらにも対応可能です。まずは30分の無料技術相談から。

あわせて読みたい