Nested ErrorBoundary not used

Heya, I'm trying to wrap my head around handling errors with createResource and SolidJS router...

The issue iss that I have two ErrorBoundaries and only the higher one catch the error instead of the one close to the function emitting the error.

So I have the following configuration:

App (Containing the Higher ErrorBoundary)

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

MainLayout (containing the nested ErrorBoundary)

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

useFindAllProject (The source of the error for example a 404 not found Error)

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

Nested ErrorBoundary not used

Similar Threads

Similar Threads

Similar Threads