Granular Error Handling is not working as expected

[worn grotto]

import { useRouteError } from "@remix-run/react"

const Content = () => {
    try {
      const data = fetch("").then((res) => res.json())
    } catch (error) {
      throw new Response(error.message, { status: 500 });
    }
}
export function ErrorBoundary() {
  const error = useRouteError()
    return <h1>Triggered: {error.message}</h1>
}
export default Content

This test snippet cause the whole server to crash with

    code: 'ERR_INVALID_URL',
    input: ''
  }```

[tribal zenith]

Typically you fetch your data inside a loader, which will cause the ErrorBoundary to work as expected when the fetch fails.

If you must fetch client-side, use an effect and handle the error state directly in the component.

[worn grotto]

hm, my concern was why would it stop the whole server if there is a runtime error ? that too inside a try catch!... let me try with useEffect then.

[tribal zenith]

fetch() returns a promise, so try/catch won't work unless you await or fn().then().catch()

The catch in your code is effectively useless because the error is thrown from a rejected promise.

[worn grotto]

@tribal zenith Apart from network error what other kinds of errors can ErrorBoundary handle?

[tribal zenith]

Pretty much anything.