How to get production style errors on local? And how to log them all?

[pulsar heart]

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?

[mighty locust]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[supple vigil]

• run your app in prod mode 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

[pulsar heart]

thanks @supple vigil what about the second question? how to log when that error pops up?

[supple vigil]

https://nextjs.org/docs/app/api-reference/file-conventions/error

[pulsar heart]

🤦‍♂️

how did i not do this yet

thank you @supple vigil

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?

https://nextjs.org/docs/pages/building-your-application/routing/custom-error

im using this one

seems like can only test the 404 case

[supple vigil]

That’s the pages router error page. App router error page is different

[supple vigil]

Use react dev tool, there is an option to force crash a component. Use it to trigger this error.js page

[pulsar heart]

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

[supple vigil]

that's a normal react error boundary https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

[pulsar heart]

do i ahve to use a class component? i havent used them in years

[pulsar heart]

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

[supple vigil]

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.

[pulsar heart]

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

and show some navigation/explanation to the users

(which i just pushed 🙂 )

[pulsar heart]

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>
  );
}