How to get production style errors on local? And how to log them all?
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
When i launched my app to production my users reported a few death screens:
- How do i get them to appear on local? (they only appear on prod, so i miss them when developing)
- how do i always catch them and fire a logging event?
- How do i get them to appear on local? (they only appear on prod, so i miss them when developing)
- how do i always catch them and fire a logging event?
29 Replies
@Cape lion When i launched my app to production my users reported a few death screens:
- How do i get them to appear on local? (they only appear on prod, so i miss them when developing)
- how do i always catch them and fire a logging event?
* run your app in prod mode in local* (
* https://nextjs.org/docs/app/api-reference/file-conventions/error
* note that the prod error might not be reproducible in local
npm run build then npm start)* https://nextjs.org/docs/app/api-reference/file-conventions/error
* note that the prod error might not be reproducible in local
Cape lionOP
thanks @joulev what about the second question? how to log when that error pops up?
Cape lionOP
🤦♂️
how did i not do this yet
thank you @joulev
woudl be great if teh framework shipped with default error pages so you could just modify them
how to test the error page in dev?
im using this one
seems like can only test the 404 case
@Cape lion https://nextjs.org/docs/pages/building-your-application/routing/custom-error
That’s the pages router error page. App router error page is different
@Cape lion how to test the error page in dev?
Use react dev tool, there is an option to force crash a component. Use it to trigger this error.js page
Cape lionOP
im using pages router
the _error page works
this one looks pretty mysterious though
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
// Define a state variable to track whether is an error or not
this.state = { hasError: false }
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true }
}
componentDidCatch(error, errorInfo) {
// You can use your own error logging service here
console.log({ error, errorInfo })
}
render() {
// Check if the error is thrown
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<h2>Oops, there is an error!</h2>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
>
Try again?
</button>
</div>
)
}
// Return children components in case of no error
return this.props.children
}
}
export default ErrorBoundary@Cape lion this one looks pretty mysterious though
ts
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
// Define a state variable to track whether is an error or not
this.state = { hasError: false }
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true }
}
componentDidCatch(error, errorInfo) {
// You can use your own error logging service here
console.log({ error, errorInfo })
}
render() {
// Check if the error is thrown
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<h2>Oops, there is an error!</h2>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
>
Try again?
</button>
</div>
)
}
// Return children components in case of no error
return this.props.children
}
}
export default ErrorBoundary
that's a normal react error boundary https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
Cape lionOP
do i ahve to use a class component? i havent used them in years
Cape lionOP
i think i got something wrong - there doesnt appear to be a react error boundry on pages router? (need coffee)
if there's no status code then its client side
pages/_error.js is an error boundary for the entire app.
you can also make manual error boundaries and use it like normal react component for localised regions of the app.
you can also make manual error boundaries and use it like normal react component for localised regions of the app.
Cape lionOP
oh i see, with the react error boundry
right?
pages/_error.js
Should be enough for now if i can just catch and log all the errors to my mixpanel
Should be enough for now if i can just catch and log all the errors to my mixpanel
and show some navigation/explanation to the users
(which i just pushed 🙂 )
Cape lionOP
hmm i tried this and ran it in production and the alert never fires...
import { ErrorBoundary } from "react-error-boundary";
export default function Page() {
return (
<ErrorBoundary fallback={<div> error </div>} onError={() => alert("error")}>
<button
onClick={() => {
throw new Error("This is a test error");
}}
>
</SmallCTA>
</ErrorBoundary>
);
}Cape lionOP
also if i remove the error boundry i dont get the next error either... so FML