#Next13: hard time triggering error.tsx

28 messages · Page 1 of 1 (latest)

cedar hatch
#

Hiya! 👋

I have a hard time triggering the error.tsx files in the app folder. I'm just trying to learn how it responds, but whenever I throw an error, or reject a promise, I just get a console log but no UI to show up.

The docs also don't tell me how errors are supposed to be triggered.

Any pointers on how to test this out?

Example:

// page.tsx
export default function Page() {
  return (
    <div>
      <SomeComponent />
    </div>
  )
}

// SomeComponent.tsx
export default function SomeComponent() {
  const [count] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => { throw new Error('test')}}>Click</button>
    </div>
  )
}

// error.tsx
'use client'

import { useEffect } from 'react'

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div>
      <h1>Whoops</h1>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}
cedar hatch
#

Ohhhh, is it because it literally only catches runtime errors?

indigo island
#

though it should work though

#

if the error happens in layout.tsx, it will look parent route's error NOT the error of the same route

#

so if you have error in root layout, you need to use global-error.js

cedar hatch
#

Yeah I have multiple set up, but an error thrown from the component never gets caught, unless I throw it directly in the root of the component (i.e. now hen calling a function)

# 
export default function SomeComponent() {
  throw new Error('This is caught')

  const test = () => {
    throw new Error('This is not')
  }
#

By reading the docs for the App Router, I thought all errors would be caught, which would make for a great UX, but it feels a bit useless if it's only runtime?

indigo island
cedar hatch
#

No a client in this case

indigo island
#

hmmm maybe you can make a reproduction repo

#

and if its consistent and you feel like it doesn't work as intended we can open an issue

#

im also having hard time with error.tsx tbh haha

#

i mean it should work

cedar hatch
#

Yeah I'm contemplating that. When following the docs for data fetching I even get stuck in an endless loop. Feels like a bug to me tbh

indigo island
cedar hatch
#

🤔

#

The codesandbox for posting bugs is also broken (not Vercel's fault), it won't allow me to connect to GH, so I cant make a reproduction. :/

indigo island
#

with create-next-app

cedar hatch
#

Yeah I can do that, just always such a hassle 😄

indigo island
cedar hatch
#

Ok I'll give it a shot

cedar hatch
#

I'm just setting up some test cases locally and man this is wildly unpredictable between sync/async, client/server component and dev/prod builds

cedar hatch