Next.js 15 Fullstack (App Router + Server Actions) · レッスン

本番環境の監視とエラートラッキング

構造化ログ、Sentryによるエラートラッキング、パフォーマンス分析、稼働監視によって、デプロイ済みのNext.jsアプリを健全に保ちます。

レッスン 4/413 ステップ

「本番環境の監視とエラートラッキング」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Monitor Production?

Once your app is live, you cannot reproduce every user's environment. Monitoring tells you when something breaks, how often, and for whom — so you fix issues before they spread.

The Three Pillars

Observability rests on:

Logs: discrete events
Metrics: numbers over time (latency, error rate)
Traces: the path of a request across services

Structured Logging

Plain text logs are hard to search. Emit structured JSON logs with consistent fields so tools can filter and aggregate them.

console.log(JSON.stringify({
  level: 'error',
  route: '/api/checkout',
  userId: 42,
  msg: 'payment failed'
}));

Installing Sentry

Sentry captures unhandled errors with stack traces and context. The wizard wires it into both server and client.

npx @sentry/wizard@latest -i nextjs

Capturing Errors

Sentry catches uncaught exceptions automatically, but you can also report handled errors with extra context.

import * as Sentry from '@sentry/nextjs';
try {
  await charge();
} catch (e) {
  Sentry.captureException(e, { tags: { feature: 'billing' } });
}

Error Boundaries with error.tsx

An error.tsx file catches render errors in a route segment and shows a fallback instead of a white screen. It is a Client Component.

'use client';
export default function Error({ error, reset }) {
  return <button onClick={reset}>Try again</button>;
}

Performance with Web Vitals

Track real user experience with Core Web Vitals — LCP, CLS, INP. Next.js exposes them through a reporting hook.

export function reportWebVitals(metric) {
  if (metric.name === 'LCP') sendToAnalytics(metric);
}

Vercel Analytics & Speed Insights

On Vercel, the Analytics and Speed Insights packages collect real-world metrics with one component each, no extra config.

import { SpeedInsights } from '@vercel/speed-insights/next';
// render <SpeedInsights /> in your root layout

Uptime Monitoring

An uptime monitor pings a health endpoint at intervals and alerts you if it fails. Expose a lightweight route for this.

// app/api/health/route.ts
export function GET() {
  return Response.json({ status: 'ok' });
}

Setting Up Alerts

Data is useless if no one looks. Configure alerts: notify the team on Slack when error rate spikes or latency crosses a threshold. Alert on symptoms users feel, not noise.

Best Practices

Stay on top of production:

Emit structured logs
Track errors with Sentry and error.tsx
Watch Core Web Vitals
Add an uptime check and meaningful alerts

Quick Check

Test your monitoring knowledge.

対話的なレッスンで答える

Recap

You learned to monitor production:

Logs, metrics, and traces form observability
Use structured logging and Sentry for error tracking
Catch render errors with error.tsx
Track Web Vitals, add a health endpoint, and set alerts

Now you find and fix problems before users complain.

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 88

無料で学習を始めるコース全体を表示

よくある質問

「本番環境の監視とエラートラッキング」レッスンは無料ですか？

はい。「本番環境の監視とエラートラッキング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「本番環境の監視とエラートラッキング」で何を学びますか？

構造化ログ、Sentryによるエラートラッキング、パフォーマンス分析、稼働監視によって、デプロイ済みのNext.jsアプリを健全に保ちます。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「本番環境の監視とエラートラッキング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack (App Router + Server Actions)に戻る