REMIX: If a route doesn't have an Error Boundary, the error doesn't "bubble" up to the closest error boundary and the page is blank - error-handling

Question

Remix says:If a route doesn't have an error boundary, the error "bubbles up" to the closest error boundary, all the way to the root, so you don't have to add error boundaries to every route--only when you want to add that extra touch to your UI.
Unfortunately, if we don't add an Error Boundary component in our specific route where the error is thrown, the Error Boundary which is in the Root Component will not be rendered and the page will remain blank.
In my case: trying : http://localhost:3000/status?v=client
should throw an Error (i configured it so). The error cannot be caught and the screen is blank (the Error Component is not being rendered).If we add the Error Boundary component in our status (where the error is thrown when the user visits .../status?v=client, the Error will be caught by the Component itself and it will be rendered (see image).
Do we need to add an Error Boundary in every route, as the bubbling doesn't seem to work properly?

Answer 1

when you throw response
import { json } from "#remix-run/node";
throw json(
{ message: "Not found" },
{ status: 404, statusText: "Not found" }
);
or
throw new Response()
Remix renders CatchBoundary component instead of ErrorBoundary. it catches any error response. you can define in route level or root level like ErrorBoundary
also if user enters a wrong Url, remix renders the CatchBoundary component because it automatically generate an Error response
an example from docs
import { useCatch } from "#remix-run/react";
export function CatchBoundary() {
const caught = useCatch();
return (
<div>
<h1>Caught</h1>
<p>Status: {caught.status}</p>
<pre>
<code>{JSON.stringify(caught.data, null, 2)}</code>
</pre>
</div>
);
}