search

solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.14k stars 147 forks source link

ErrorBoundary not working when using createAsync's accessor in createEffect #461

Closed vibhuvV closed 2 months ago

vibhuvV commented 2 months ago

Describe the bug

While exploring createAsync with suspence and error boundary. I tried fetching posts from jsonplaceholder api and in the cached function I threw error to check how will the error boundary respond to that. Turns out when I have the access of createAsync in createEffect the error boundary does not render fallback but if I remove that from effect then it starts showing the fallback ui.

Note: This is all client side rendered. I am not using solid-start for this.

PS: I am a beginner in solid universe. Trying to explore. So far I am really impressed by what Solid team has been able to achieve. Also is there a way to get a loading state for createAsync? other than using Suspense that I have used in the example.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-1kvbzd?file=src%2Fpages%2Fposts.tsx

Steps to Reproduce the Bug or Issue

  1. Open the link
  2. There is a single list on the screen without any error
  3. Open src/pages/posts.tsx
  4. Comment the console.log statement in createEffect. Now the error boundary fallback is rendered.

Expected behavior

I expect that error boundary fallback to run irrespective of the fact that we are accessing the value in effect or not.

Screenshots or Videos

No response

Platform

Additional context

No response

Brendonovich commented 2 months ago

This is expected behaviour, as ErrorBoundary is designed to catch errors thrown inside of itself. Your createEffect is above it and out of scope of the boundary.

vibhuvV commented 2 months ago

I also expect the same. I am getting confused because if I remove the createEffect or just remove the console.log from createEffect then error boundary starts catching error. I think it should not catch any error in the way I have used it because my createAsync is also out of the scope of boundary.

Brendonovich commented 2 months ago

Reading posts in the createEffect causes the error to be handled at the root of your app, which seems to make the inner boundary not do anything. Might be worth having solid handle it a bit better, or just put an ErrorBoundary at the root of your app

vibhuvV commented 2 months ago

Oh yes. That does make sense and it is actually true because I verified it by wrapping the console.log. I understand this better now thanks a lot.