ErrorBoundary: "Uncaught in promise" in async functions

[janhesters]

TL;DR: How can error boundaries catch errors that happen in promises?

When you create a new remix app with npx create-remix@latest, export an ErrorBoundary component from routes/index.tsx

export function ErrorBoundary() {
  return (
    <div><h1>Error Boundary from Index.js</h1></div>
  )
}

and then amend the Index component index.tsx route with

export default function Index() {
  useEffect(() => {
    async function init() {
      throw new Error('oops')
    }

    init()
  }, [])

  return (
    // ...
  )
}

you get the error in the console

index.tsx:6 Uncaught (in promise) Error: oops

but the ErrorBoundary component doesn't trigger and is never shown.

Is there a way to catch errors from promises with ErrorBoundaryies?

---

Interesting corollary:

export default function Index() {
  async function init() {
    throw new Error('oops')
  }
  init()

  return // ...
}

breaks on the whole app like this 👇

💿 Built in 181ms
Remix App Server started at http://localhost:3000 (http://192.168.178.95:3000)
Error: oops
    at init (/Users/janhesters/dev/error-boundary-test-in-remix/app/routes/index.tsx:6:11)