error.js

[livid flame]

My error.js file within route segment not working anymore. I see the default Next.js crash screen instead of fallback Page. File content is as described in Next.js 13 App Router documentation. I already deleted .next folder to get rid of cache. Any other idea?

 
import { useEffect } from 'react'
 
export default function Error({ error, reset }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}```

[tired spade]

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)

[leaden heron]

what does your project structure look like?

[livid flame]

Here it is. Thanks ✌️

[leaden heron]

I've been experimenting with this for the past couple of hours and I found some weird buggy behaviours. Long story short, you'll probably have to use React's way of catching errors and building error boundaries with the help of a package like react-error-boundary without relying too much on error.js for the time being...

I'll post here an example of how you could do it with your current setup tomorrow since rn it's bedtime where I live 🤣

[livid flame]

Thanks dude. I got the issue, apparently Errors thrown inside event handler are not working in React. I was throwing the Error inside a onClick handler, therefore it doesn't work. You can use a state to track the error inside the component however. That's the way 😉 Here is the official issue in Next.js github page:

https://github.com/vercel/next.js/issues/42525

[leaden heron]

Yeah, there's that too