Next.js 15 i full stack (App Router + Server Actions) · Lektion

Overvågning og fejlsøgning i produktion

Hold Deres deployede Next.js-app sund med struktureret logging, fejlsøgning via Sentry, performanceanalyse og uptime-overvågning.

Lektion 4 af 413 trin

Overvågning og fejlsøgning i produktion er en gratis Next.js 15 i full stack (App Router + Server Actions)-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15 i full stack (App Router + Server Actions), og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15 i full stack (App Router + Server Actions)-kurset indeholder 4 lektioner i alt.

Hvorfor overvåge produktion?

Når din app er i drift, kan du ikke genskabe alle brugeres miljøer. Overvågning fortæller dig, hvornår noget går i stykker, hvor ofte det sker, og for hvem – så du kan løse problemer, før de spreder sig.

De tre søjler

Observerbarhed bygger på:

Logge: enkelte hændelser
Metrikker: tal over tid (svartid, fejlrate)
Spor: en forespørgsels vej gennem tjenester

Struktureret logning

Almindelige tekstlogge er svære at søge i. Udsend strukturerede JSON-logge med ensartede felter, så værktøjer kan filtrere og aggregere dem.

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

Installation af Sentry

Sentry registrerer uhåndterede fejl med stakspor og kontekst. Guiden kobler det til både serveren og klienten.

npx @sentry/wizard@latest -i nextjs

Registrering af fejl

Sentry opfanger automatisk ikke-fangede undtagelser, men du kan også rapportere håndterede fejl med ekstra kontekst.

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

Fejlgrænser med error.tsx

En error.tsx-fil opfanger gengivelsesfejl i et rutesegment og viser en fallback i stedet for en hvid skærm. Den er en klientkomponent.

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

Ydeevne med Web Vitals

Følg den reelle brugeroplevelse med Core Web Vitals – LCP, CLS og INP. Next.js stiller dem til rådighed gennem en rapporterings-hook.

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

Vercel Analytics og Speed Insights

På Vercel indsamler pakkerne Analytics og Speed Insights metrikker fra den virkelige verden med én komponent hver, uden ekstra konfiguration.

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

Overvågning af oppetid

En oppetidsmonitor pinger et sundhedsendepunkt med bestemte intervaller og giver dig besked, hvis det fejler. Udstil en letvægtsrute til dette.

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

Opsætning af alarmer

Data er nytteløs, hvis ingen ser på den. Konfigurér alarmer: Giv teamet besked på Slack, når fejlratens stiger kraftigt, eller svartiden overskrider en grænse. Alarmér om symptomer, brugerne mærker, ikke om støj.

Bedste praksis

Hold styr på produktionen:

Udsend strukturerede logge
Følg fejl med Sentry og error.tsx
Overvåg Core Web Vitals
Tilføj et oppetidstjek og meningsfulde alarmer

Hurtigt tjek

Test din viden om overvågning.

Besvar den i den interaktive lektion

Opsummering

Du har lært at overvåge produktion:

Logge, målinger og traces udgør observability
Brug struktureret logning og Sentry til fejlsøgning
Fang renderingsfejl med error.tsx
Følg Web Vitals, tilføj et health-endepunkt, og opsæt alarmer

Nu finder og løser du problemer, før brugerne klager.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Overvågning og fejlsøgning i produktion” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15 i full stack (App Router + Server Actions), inklusive “Overvågning og fejlsøgning i produktion”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15 i full stack (App Router + Server Actions)-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Overvågning og fejlsøgning i produktion”?

Hold Deres deployede Next.js-app sund med struktureret logging, fejlsøgning via Sentry, performanceanalyse og uptime-overvågning. Du øver dig i Next.js 15 i full stack (App Router + Server Actions) med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15 i full stack (App Router + Server Actions)?

Der kræves ingen tidligere erfaring. Next.js 15 i full stack (App Router + Server Actions) på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Overvågning og fejlsøgning i produktion”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15 i full stack (App Router + Server Actions)-lektion?

Ja. Alle Next.js 15 i full stack (App Router + Server Actions)-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Next.js 15 i full stack (App Router + Server Actions)