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

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})
    }
})

TanStack•16mo ago

moderate-tomato

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

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})
    }
})

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads