feat(error): add global error pages with logging #1681
Conversation
|
OBS: global-error.tsx funker visst ikke alltid, det ser ut som en kjent Next bug (vercel/next.js#55462). I tillegg er pages sin error handler (_error) satt til å kun funke i production og ikke når man kjører opp ting med dev, så får ikke testa den enda |
SelmaBergstrand
changed the title
|
Har du fått til å trigge |
There was a problem hiding this comment.
Jeg får aldri til å trigge denne siden - det ser ut som den faller tilbake på not-found.tsx i app-routeren. Muligens vi ikke trenger denne siden i det hele tatt?
There was a problem hiding this comment.
Tror det kommer av dette i getServerSideProps() i [id].tsx:
if (!board) {
return {
notFound: true,
}
}
Skader for så vidt ikke å ha den der, men unødvendig om den aldri trigges 🗑️ Ser også at board-objektet vi henter ut her aldri vil være undefined heller, så dette vil i utgangspunktet aldri trigges. Burde kanskje sett på hvordan man henter ut et board
There was a problem hiding this comment.
Har ikke fått til å trigge den jeg heller. Tanken er at global-error liksom er siste nivå av error catching, og kan feks catche feil som skjer i RootLayout (for disse greier visst ikke error.tsx å fange). Prøvde å trigge en der ved å throwe feil i navbaren men da får jeg bare stack trace som vanlig.
There was a problem hiding this comment.
Det viser seg at den defaulter tilbake på not-found.tsx hvis man har både app og pages router ser det ut som: vercel/next.js#58945 (comment). Vi må uansett se på at board-objektet aldri er undefined. Nå returnerer vi hvilken som helst ID fordi vi ikke sjekker om objektet finnes i firebase først
There was a problem hiding this comment.
Og ja, global-error.tsx må man ha 👯
| stacktrace: error.stack, | ||
| message: error.message, | ||
| url: window.location.href, | ||
| }) |
There was a problem hiding this comment.
Skal vi legge til at vi logger digest også? Om en error ser på server-siden, så vil denne hjelpe oss med å finne ut va den eksakte feilmeldingen var: https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-server-errors
| cause: error.cause, | ||
| stacktrace: error.stack, | ||
| message: error.message, | ||
| url: window.location.href, |
There was a problem hiding this comment.
Samme som over med digest her?
| import { logger } from 'utils/logger' | ||
| import BeaverIllustration from 'assets/illustrations/Beaver.png' | ||
|
|
||
| const log = logger.child({ module: 'appLevelErrorHandler' }) |
There was a problem hiding this comment.
Kalle den kun appErrorHandler?
| import BeaverIllustration from 'assets/illustrations/Beaver.png' | ||
| import { NextPageContext } from 'next' | ||
|
|
||
| const log = logger.child({ module: 'pagesLevelErrorHandler' }) |
Lagt til ny error-side som skal catche og logge feil, både i pages og i app-router. Har i tillegg lagt til en custom 404-error-side (som ikke ble fanget opp av de andre error-fangerne).
Ser sånn ut for feil:
for 404: