T
TanStack•10mo ago
deep-jade

throws in loader causes errors in console even if there is an error component

I started this conversation in the query section, but it looks like it's more of a router question so I'm moving it here https://discord.com/channels/719702312431386674/1313646077219704935 I throw an exception in the loader (query does on error), but I can't stop the loader from writing the error message into the console. Even if the errorComponent on the root route is picking up the error and reacting to it Am I approaching this wrong? I've simplified my route code to remove any usage of query 
export const Route = createFileRoute('/_dashboardLayout/o/$name/')({
  component: () => <></>,
  loader: async (opt) => {
        throw new UnauthenticatedError("This is an error to test loader error handling!")
  },
})
export const Route = createFileRoute('/_dashboardLayout/o/$name/')({
  component: () => <></>,
  loader: async (opt) => {
        throw new UnauthenticatedError("This is an error to test loader error handling!")
  },
})
and the __root route 
const FetchErrorComponent = ({error} : {error: Error}) => {

    const {activeUser, setActiveUser} = useUserStore();

    if (error instanceof UnauthenticatedError) {
        
        if (activeUser) {
            setActiveUser(null)
        }
        return <div>user invalid, please login again</div>
    }

    return <ErrorComponent error={error}/>
}

export const Route = createRootRouteWithContext<{userStore: StoreApi<UserState>, queryClient: QueryClient}>()({
    component: RootComponent,
    errorComponent: FetchErrorComponent,
    beforeLoad: async ({context: { userStore }}) => {
        const user = await getUser()
        userStore.setState({activeUser: user})
    }
})
const FetchErrorComponent = ({error} : {error: Error}) => {

    const {activeUser, setActiveUser} = useUserStore();

    if (error instanceof UnauthenticatedError) {
        
        if (activeUser) {
            setActiveUser(null)
        }
        return <div>user invalid, please login again</div>
    }

    return <ErrorComponent error={error}/>
}

export const Route = createRootRouteWithContext<{userStore: StoreApi<UserState>, queryClient: QueryClient}>()({
    component: RootComponent,
    errorComponent: FetchErrorComponent,
    beforeLoad: async ({context: { userStore }}) => {
        const user = await getUser()
        userStore.setState({activeUser: user})
    }
})
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?