Tuotannon valvonta ja virheiden seuranta
Pidätte käyttöön otetun Next.js-sovelluksen toimintakunnossa rakenteisen lokituksen, Sentryn virheseurannan, suorituskykyanalytiikan ja käytettävyyden valvonnan avulla.
Tuotannon valvonta ja virheiden seuranta on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.
Miksi tuotantoa kannattaa valvoa?
Kun sovelluksesi on julkaistu, et voi toistaa jokaisen käyttäjän ympäristöä. Valvonta kertoo, milloin jokin rikkoutuu, kuinka usein ja kenen kohdalla, jotta voit korjata ongelmat ennen niiden leviämistä.
Kolme peruspilaria
Havainnointi perustuu seuraaviin:
- Lokit: yksittäiset tapahtumat
- Mittarit: ajan kuluessa mitattavat luvut, kuten viive ja virheprosentti
- Jäljet: pyynnön kulku palvelusta toiseen
Rakenteinen lokitus
Pelkkää tekstiä sisältävistä lokeista on vaikea tehdä hakuja. Tuota rakenteisia JSON-lokeja yhdenmukaisilla kentillä, jotta työkalut voivat suodattaa ja koostaa niitä.
console.log(JSON.stringify({
level: 'error',
route: '/api/checkout',
userId: 42,
msg: 'payment failed'
}));Sentryn asentaminen
Sentry tallentaa käsittelemättömät virheet pinonjäljityksineen ja asiayhteyksineen. Ohjattu asennus liittää sen sekä palvelimeen että asiakkaaseen.
npx @sentry/wizard@latest -i nextjsVirheiden tallentaminen
Sentry ottaa käsittelemättömät poikkeukset automaattisesti kiinni, mutta voit myös raportoida käsitellyt virheet lisätietoineen.
import * as Sentry from '@sentry/nextjs';
try {
await charge();
} catch (e) {
Sentry.captureException(e, { tags: { feature: 'billing' } });
}Virherajat error.tsx-tiedostolla
error.tsx-tiedosto ottaa reittisegmentin renderöintivirheet kiinni ja näyttää varasisällön valkoisen näytön sijaan. Se on Client Component.
'use client';
export default function Error({ error, reset }) {
return <button onClick={reset}>Try again</button>;
}Suorituskyky Web Vitals -mittareilla
Seuraa todellista käyttäjäkokemusta Core Web Vitals -mittareilla: LCP, CLS ja INP. Next.js tarjoaa ne raportointihookin kautta.
export function reportWebVitals(metric) {
if (metric.name === 'LCP') sendToAnalytics(metric);
}Vercel Analytics ja Speed Insights
Vercelissä Analytics- ja Speed Insights -paketit keräävät todellisia käyttöympäristön mittareita yhdellä komponentilla kumpikin ilman lisämäärityksiä.
import { SpeedInsights } from '@vercel/speed-insights/next';
// render <SpeedInsights /> in your root layoutKäytettävyyden valvonta
Käytettävyysmonitori pingaa terveystarkistuksen päätepistettä säännöllisin väliajoin ja hälyttää, jos se ei vastaa. Tätä varten kannattaa tarjota kevyt reitti.
// app/api/health/route.ts
export function GET() {
return Response.json({ status: 'ok' });
}Hälytysten määrittäminen
Tiedosta ei ole hyötyä, jos kukaan ei tarkastele sitä. Määritä hälytykset: ilmoita tiimille Slackissa, kun virheprosentti kasvaa jyrkästi tai viive ylittää raja-arvon. Hälytä käyttäjien kokemista oireista, älä turhasta melusta.
Parhaat käytännöt
Pysy tuotannon tilanteen tasalla:
- Tuota rakenteisia lokeja
- Seuraa virheitä Sentryllä ja error.tsx-tiedostolla
- Seuraa Core Web Vitals -mittareita
- Lisää käytettävyystarkistus ja merkitykselliset hälytykset
Pikatarkistus
Testaa valvontaa koskevat tietosi.
Kertaus
Opitte valvomaan tuotantoa:
- Lokit, mittarit ja jäljitykset muodostavat observabilityn
- Käyttäkää rakenteista lokitusta ja Sentryä virheiden seurantaan
- Ottakaa renderöintivirheet kiinni
error.tsx-tiedostolla - Seuratkaa Web Vitalseja, lisätkää health endpoint ja määrittäkää hälytykset
Nyt löydätte ja korjaatte ongelmat ennen kuin käyttäjät ehtivät valittaa.
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 88
Usein kysytyt kysymykset
Onko oppitunti ”Tuotannon valvonta ja virheiden seuranta” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Tuotannon valvonta ja virheiden seuranta”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tuotannon valvonta ja virheiden seuranta”?
Pidätte käyttöön otetun Next.js-sovelluksen toimintakunnossa rakenteisen lokituksen, Sentryn virheseurannan, suorituskykyanalytiikan ja käytettävyyden valvonnan avulla. Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Tuotannon valvonta ja virheiden seuranta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?
Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Käyttöönotto Vercelissä
- Fullstack-sovelluksen rakentaminen
- Projektin katselmointi ja parhaat käytännöt
- Tuotannon valvonta ja virheiden seuranta