T
TanStack•2y ago
adverse-sapphire

Router Search Error Handling

Hello, have another relatively simple question 
const registrationSearchSchema = z.object({
    username: z.string().email().catch(''), // Ensures the username is a valid email
    code: z.string().catch(''),
});

export const Route = createFileRoute('/_nonAuth/verify')({
    validateSearch: registrationSearchSchema.parse,
    component: () => {
        return <VerifyRegistrationPage />;
    },
    onError: ( error ) => {
        console.error("onError caught - Validation Error:", error);
        return (<div>Error component!</div>)
        // return <ErrorComponent message="An unexpected error occurred." />;
    }
});
const registrationSearchSchema = z.object({
    username: z.string().email().catch(''), // Ensures the username is a valid email
    code: z.string().catch(''),
});

export const Route = createFileRoute('/_nonAuth/verify')({
    validateSearch: registrationSearchSchema.parse,
    component: () => {
        return <VerifyRegistrationPage />;
    },
    onError: ( error ) => {
        console.error("onError caught - Validation Error:", error);
        return (<div>Error component!</div>)
        // return <ErrorComponent message="An unexpected error occurred." />;
    }
});
I added catch to the zod validations but I wanted to display an error component to the user if username validation fails. If I remove the catches on the zod validation I see the onError hit because I see the console log "onError caught - Validation Error" BUT it's not rendering the component that I'm returning from onError.. instead I see some other default error component for some reason. Any ideas? This is the component showing instead of "<div>Error component!</div>": https://i.gyazo.com/fa4f0e0a6c644b0b92dad782a29f1fc4.png Just for reference I'm looking at this documentation and it looks like it should render the error component but it's rendering something else I didn't provide https://tanstack.com/router/latest/docs/framework/react/guide/search-params
TanStack Router Docs
4 Replies
absent-sapphire
absent-sapphire•2y ago
It renders the errorComponent. If you don't define any, you'll get the default one
adverse-sapphire
adverse-sapphireOP•2y ago
In this case I'm returning a custom div with text, but I'm still seeing the default one (I'm seeing the console log). Sorry if I'm misundertsanding 
    onError: ( error ) => {
        console.error("onError caught - Validation Error:", error);
        return (<div>Error component!</div>)
        // return <ErrorComponent message="An unexpected error occurred." />;
    }
    onError: ( error ) => {
        console.error("onError caught - Validation Error:", error);
        return (<div>Error component!</div>)
        // return <ErrorComponent message="An unexpected error occurred." />;
    }
continuing-cyan
continuing-cyan•2y ago
It renders the component that you put as the "errorComponent" property, not the "onError" one
adverse-sapphire
adverse-sapphireOP•2y ago
OH got it, thanks!

Did you find this page helpful?