Övervakning och felspårning i produktion
Håll er distribuerade Next.js-app välmående med strukturerad loggning, felspårning via Sentry, prestandaanalys och tillgänglighetsövervakning.
Övervakning och felspårning i produktion är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.
Varför övervaka produktion?
När appen är i drift kan du inte återskapa varje användares miljö. Övervakning talar om när något går sönder, hur ofta det sker och för vem – så att du kan åtgärda problem innan de sprids.
De tre grundpelarna
Observability bygger på:
- Loggar: enskilda händelser
- Mätvärden: tal över tid (svarstid, felfrekvens)
- Spårningar: en förfrågans väg genom tjänsterna
Strukturerad loggning
Vanliga textloggar är svåra att söka i. Skicka strukturerade JSON-loggar med konsekventa fält så att verktyg kan filtrera och aggregera dem.
console.log(JSON.stringify({
level: 'error',
route: '/api/checkout',
userId: 42,
msg: 'payment failed'
}));Installera Sentry
Sentry fångar ohanterade fel med stacktraces och kontext. Guiden kopplar in det på både servern och klienten.
npx @sentry/wizard@latest -i nextjsFånga fel
Sentry fångar automatiskt oinfångade undantag, men du kan också rapportera hanterade fel med ytterligare kontext.
import * as Sentry from '@sentry/nextjs';
try {
await charge();
} catch (e) {
Sentry.captureException(e, { tags: { feature: 'billing' } });
}Felgränser med error.tsx
En error.tsx-fil fångar renderingsfel i ett route-segment och visar en fallback i stället för en vit skärm. Den är en Client Component.
'use client';
export default function Error({ error, reset }) {
return <button onClick={reset}>Try again</button>;
}Prestanda med Web Vitals
Följ den verkliga användarupplevelsen med Core Web Vitals – LCP, CLS och INP. Next.js exponerar dem via en rapporterings-hook.
export function reportWebVitals(metric) {
if (metric.name === 'LCP') sendToAnalytics(metric);
}Vercel Analytics och Speed Insights
I Vercel samlar paketen Analytics och Speed Insights in verkliga mätvärden med en komponent vardera, utan extra konfiguration.
import { SpeedInsights } from '@vercel/speed-insights/next';
// render <SpeedInsights /> in your root layoutÖvervakning av drifttid
En drifttidsövervakare anropar en health-endpoint med jämna mellanrum och meddelar dig om den misslyckas. Exponera en lättviktig route för detta.
// app/api/health/route.ts
export function GET() {
return Response.json({ status: 'ok' });
}Konfigurera aviseringar
Data är värdelös om ingen tittar på den. Konfigurera aviseringar: meddela teamet i Slack när felfrekvensen ökar kraftigt eller svarstiden passerar ett tröskelvärde. Avisera om sådant som användarna faktiskt märker, inte om brus.
Bästa praxis
Behåll kontrollen över produktionen:
- Skicka strukturerade loggar
- Följ fel med Sentry och error.tsx
- Övervaka Core Web Vitals
- Lägg till en drifttidskontroll och meningsfulla aviseringar
Snabbtest
Testa dina kunskaper om övervakning.
Sammanfattning
Ni har lärt er att övervaka produktion:
- Loggar, mätvärden och traces utgör observability
- Använd strukturerad loggning och Sentry för felspårning
- Fånga renderingsfel med
error.tsx - Följ Web Vitals, lägg till en health endpoint och konfigurera aviseringar
Nu kan ni hitta och åtgärda problem innan användarna klagar.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 88
Vanliga frågor
Är lektionen ”Övervakning och felspårning i produktion” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Övervakning och felspårning i produktion”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.
Vad lär jag mig i ”Övervakning och felspårning i produktion”?
Håll er distribuerade Next.js-app välmående med strukturerad loggning, felspårning via Sentry, prestandaanalys och tillgänglighetsövervakning. Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?
Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Övervakning och felspårning i produktion”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?
Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Driftsättning till Vercel
- Bygga en fullstack-applikation
- Projektgenomgång och bästa praxis
- Övervakning och felspårning i produktion