SolidJS•8mo ago

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

3 Replies

REEEEE•8mo ago

Put it in the root section

<Router
      root={(props) => (
        <ErrorBoundary>
          {props.children}
        </ErrorBoundary>
      )}
    >

<Router
      root={(props) => (
        <ErrorBoundary>
          {props.children}
        </ErrorBoundary>
      )}
    >

the magic guyOP•8mo 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 guyOP•8mo 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

Gaming

Programming

Wrapping `<FileRoutes />` in `ErrorBoundry`