S
SolidJS•11mo 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
D0Z•11mo 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•11mo 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
D0Z•11mo ago
Heèy I tried setting up the editor but dunno why I can't manage to make packages works
D0Z
D0Z•11mo 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•11mo ago
Maybe the router doesn't work in the playground. Do you have a repo?
D0Z
D0Z•11mo ago
I can make one
D0Z
D0Z•11mo 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•11mo ago
cloning the repo, wanna call and walk me through the issue?
D0Z
D0Z•11mo ago
mmhm why not, I got a shitty mic since I'm not at home but we could try
Raqueebuddin Aziz
Raqueebuddin Aziz•11mo ago
lets take this to dm then
Want results from more Discord servers?
Add your server
More Posts
Are there any performance implications with using the style prop?As the title says I'm wondering if there are any performance implications with using the style prop.Losing reactivity in production build due to multi-project setup lib <--> appSo Im having an issue that my `createEffect()` is not being triggered. Everything works as expected page not found when navigating to routeshi guys, first time posting here. i'm getting this weird error when navigating to a specific route solid-transition-group leads to reactivity warning inside test casesHey folks, we just started using solid-transition-group and as soon as the `<Transition />`-componeIf I'm using createResource, why would I use Suspense?For example if I have ```javascript function Loader() { const [resource] = createResource(fetchResCan you use the reactive object from useSearchParams as a source signal for createResource?I've used the property of the reactive object returned from useSearchParams as a source signal for cIssue with event delegation and a native libraryHey folks, I am currently trying to integrate a command palette library into our app. I tried varSearch params reactivity in route's data loader functionI've got a problem with search params in route's data function. Basically I've got something like inHow to pass key into createRouteData function inside useRouteData ?Is this even possible ? I can't understand the docsContext is undefined during development reloadsSo I use a few contexts like: ```jsx const useAppState = () => { return useContext(AppContext)! } `