Wrapping `<FileRoutes />` in `ErrorBoundry`

Im trying to migrate from the pre 1.0 day, when solid-start cli was still a thing. Back then I was able to do smth like this in the root component:
<Body>
<Suspense>
<ErrorBoundary>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
<Scripts />
</Body>
<Body>
<Suspense>
<ErrorBoundary>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
<Scripts />
</Body>
Trying to accomplish the same thing, wanting to wrap the FileRoutes in an ErrorBoundry, by doing this in the app.tsx:
<Router
root={(props) => (
....
)}
>
<ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
<FileRoutes />
</ErrorBoundary>
</Router>
<Router
root={(props) => (
....
)}
>
<ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
<FileRoutes />
</ErrorBoundary>
</Router>
But that results in a hydration error
No description
3 Replies
REEEEE
REEEEE2mo ago
Put it in the root section
<Router
root={(props) => (
<ErrorBoundary>
{props.children}
</ErrorBoundary>
)}
>
<Router
root={(props) => (
<ErrorBoundary>
{props.children}
</ErrorBoundary>
)}
>
the magic guy
the magic guy2mo ago
ah right! tho can I not combine an errorBoundry and Suspense? It seems like when I have both, the errorBoundry doesnt seemt to kick in
<ErrorBoundary fallback={(err) => <p>Error: {err}</p>}>
<Suspense>{props.children}</Suspense>
</ErrorBoundary>
<ErrorBoundary fallback={(err) => <p>Error: {err}</p>}>
<Suspense>{props.children}</Suspense>
</ErrorBoundary>
the magic guy
the magic guy2mo ago
Hmm just noticed even when the ErrorBoundry is placed in the Router root, the hydration error still shows up in the browser terminal. It seems to be complaining about the 404 page, but im using the default one that comes with solidStart
No description
Want results from more Discord servers?
Add your server
More Posts
How do I build my component?Hi guys 👋 I'm a bit confused about how I could build a SolidJS component into JS that I could publPractice of handling application globals in Solid(Start) symmetrically across client and server?Example: In the CSR-only days it was idiomatic to store context value as a module-global value: `Ideal way to load settings/configsSuppose I have a bunch of settings like user preferences (dark mode), or configs which I load using How to call `useNavigate` outside of routerI am trying to create my own "page viewer" where I will be able to navigate between pages within theHydration Mismatch Error Every Time I Update a ComponentI am rewriting an OAuth2 service for one of my apps in SolidStart. I keep getting this error every tHow can I synchronize two stores without running into an infinite loop?The following code triggers an infinite loop: ```ts const [store1, setStore1] = createStore({a: 1, What is the most idiomatic way of disabling an effect after a condition is met?Is it possible to disable an effect after some condition is met or should I just use an early returnpage refresh taking alot of time or may be not loadingI'm new to Solid.js, and I'm facing a problem with browser refreshing. When I make changes to my proGetting `Error | Uncaught Client Exception` without any errors in the consoleRecently, I'm seeing `Error | Uncaught Client Exception` in my browser when navigating to a new pageTypeError: useContext is not a function or its return value is not iterableI create a model component for reuse. I got "TypeError: useContext is not a function or its return v