S
SolidJS•2y ago
D0Z

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>
  )
}
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>
  )
}
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
}
10 Replies
D0Z
D0ZOP•2y ago
I also tried to move the nested ErrorBoundary in the return of App but it didn't change anything: 
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={() => (
                      <ErrorBoundary fallback={(e) => <>{e.message}</>}>
                        <ProjectsLayout />
                      </ErrorBoundary>
                    )}
                  >
                    <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={() => (
                      <ErrorBoundary fallback={(e) => <>{e.message}</>}>
                        <ProjectsLayout />
                      </ErrorBoundary>
                    )}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}
OR 
const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <ErrorBoundary fallback={(e) => <>{e.message}</>}>
                    <Route
                      path="/projects"
                      data={useFindAllProject}
                      component={ProjectsLayout}
                    >
                      <Route path="/" component={Projects} />
                      <Route path="/:projectId" component={Project} />
                    </Route>  
                  </ErrorBoundary>
                  <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} />
                  <ErrorBoundary fallback={(e) => <>{e.message}</>}>
                    <Route
                      path="/projects"
                      data={useFindAllProject}
                      component={ProjectsLayout}
                    >
                      <Route path="/" component={Projects} />
                      <Route path="/:projectId" component={Project} />
                    </Route>  
                  </ErrorBoundary>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}
tried with config based routing with no luck either and suspense isn't showing "loading" on resource fetch... 
import { ErrorBoundary, lazy, Suspense } from 'solid-js'

import { RouteDefinition } from '@solidjs/router'

import useFindAllProject from './hooks/project/useFindAllProject'
import E404 from './screens/E404'
import Home from './screens/Home'
import MainLayout from './screens/MainLayout'

const ProjectsLayout = lazy(() => import('./screens/projects/ProjectsLayout'))
const Projects = lazy(() => import('./screens/projects'))
const Project = lazy(() => import('./screens/projects/project'))

const routes: RouteDefinition[] = [
  {
    path: '/',
    component: MainLayout,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/projects',
        data: useFindAllProject,
        component: () => (
          <ErrorBoundary fallback={(e) => <>{e.message}</>}>
            <Suspense fallback={<>LOADING</>}>
              <ProjectsLayout />
            </Suspense>
          </ErrorBoundary>
        ),
        children: [
          {
            path: '/',
            component: () => (
              <Suspense fallback={<>LOADING</>}>
                <Projects />
              </Suspense>
            )
          },
          {
            path: '/:projectId',
            component: () => (
              <Suspense fallback={<>LOADING</>}>
                <Project />
              </Suspense>
            )
          }
        ]
      },
      {
        path: '/*',
        component: E404
      }
    ]
  }
]

export default routes
import { ErrorBoundary, lazy, Suspense } from 'solid-js'

import { RouteDefinition } from '@solidjs/router'

import useFindAllProject from './hooks/project/useFindAllProject'
import E404 from './screens/E404'
import Home from './screens/Home'
import MainLayout from './screens/MainLayout'

const ProjectsLayout = lazy(() => import('./screens/projects/ProjectsLayout'))
const Projects = lazy(() => import('./screens/projects'))
const Project = lazy(() => import('./screens/projects/project'))

const routes: RouteDefinition[] = [
  {
    path: '/',
    component: MainLayout,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/projects',
        data: useFindAllProject,
        component: () => (
          <ErrorBoundary fallback={(e) => <>{e.message}</>}>
            <Suspense fallback={<>LOADING</>}>
              <ProjectsLayout />
            </Suspense>
          </ErrorBoundary>
        ),
        children: [
          {
            path: '/',
            component: () => (
              <Suspense fallback={<>LOADING</>}>
                <Projects />
              </Suspense>
            )
          },
          {
            path: '/:projectId',
            component: () => (
              <Suspense fallback={<>LOADING</>}>
                <Project />
              </Suspense>
            )
          }
        ]
      },
      {
        path: '/*',
        component: E404
      }
    ]
  }
]

export default routes
Raqueebuddin Aziz
Raqueebuddin Aziz•2y ago
can you reproduce in the playground? https://playground.solidjs.com
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
D0Z
D0ZOP•2y ago
Heèy I tried setting up the editor but dunno why I can't manage to make packages works
D0Z
D0ZOP•2y ago
https://playground.solidjs.com/anonymous/145f61c9-c1bb-4365-bbcb-0c901d343d59
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Raqueebuddin Aziz
Raqueebuddin Aziz•2y ago
Maybe the router doesn't work in the playground. Do you have a repo?
D0Z
D0ZOP•2y ago
I can make one
D0Z
D0ZOP•2y ago
https://github.com/d0z4rt/solidjs-debug it's up
GitHub
GitHub - d0z4rt/solidjs-debug
Contribute to d0z4rt/solidjs-debug development by creating an account on GitHub.
Raqueebuddin Aziz
Raqueebuddin Aziz•2y ago
cloning the repo, wanna call and walk me through the issue?
D0Z
D0ZOP•2y ago
mmhm why not, I got a shitty mic since I'm not at home but we could try
Raqueebuddin Aziz
Raqueebuddin Aziz•2y ago
lets take this to dm then

Did you find this page helpful?