TanStackT
TanStack•14mo ago
moderate-tomato

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
react-query-questionsHow to hide error messages in console when throwing in queryFn()?

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!")
  },
})


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})
    }
})
Was this page helpful?