notFound() function

[eager raven]

Hi, I'm trying to manually trigger the not found page. But running this function does nothing more than throw an Error: NEXT_NOT_FOUND error

[left saffron]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[sterile sequoia]

Are you using a try catch somewhere

Cause its going to intercept notFound()

NextJS uses exceptions as an easy way to throw signals arounds down the stack

[eager raven]

nope

but the function runs inside a .catch

for a fetch request

[sterile sequoia]

Yeah so thats probably what is catching it maybe

[eager raven]

Promise.all([
            axios.get(`/api/bot/guild?id=${guildID}`, {signal: controller.signal}),
            axios.get(`/api/db/guild?id=${guildID}`, {signal: controller.signal}),
            axios.get(`/api/bot/guilds`, {signal: controller.signal}),
            axios.get(`/api/db/notifications`, {signal: controller.signal})
        ]).then(function (response: Array<any>) {
            if (response) {
                setData({
                    bot: response[0]?.data,
                    db: response[1]?.data
                });
                setGuilds(response[2]?.data);
                setNotifications(response[3]?.data);
            }
        }).catch(error => {
            return handleErrorCodes(error.response, router);
        });

what could I change to fix it?

export function handleErrorCodes(response: { status: number, data: any }, router: any) {
    if (response) {
        if (response.status === 401) {
            router.push(response.data.redirect);
            toast.error("You are not authorized to access that page");
        } else if (response.status === 429) toast.warning("You are being ratelimited");
        else if (response.status === 404) notFound();
    }
    return;
}

[sterile sequoia]

Just check if you the data isnt set and do a notFound

[eager raven]

so I should put it like outside the useEffect or what

useEffect(() => {
        const controller = new AbortController();

        Promise.all([
            axios.get(`/api/bot/guild?id=${guildID}`, {signal: controller.signal}),
            axios.get(`/api/db/guild?id=${guildID}`, {signal: controller.signal}),
            axios.get(`/api/bot/guilds`, {signal: controller.signal}),
            axios.get(`/api/db/notifications`, {signal: controller.signal})
        ]).then(function (response: Array<any>) {
            if (response) {
                setData({
                    bot: response[0]?.data,
                    db: response[1]?.data
                });
                setGuilds(response[2]?.data);
                setNotifications(response[3]?.data);
            }
        }).catch(error => {
            return handleErrorCodes(error.response, router);
            /*if (error.response?.status === 401) {
                router.push(error.response?.data.redirect);
                toast.error("You are not authorized to access that page");
            } else if (error.response?.status === 429) toast.warning("You are being ratelimited");*/
        });

        return () => controller.abort();
    }, [guildID]);

or maybe I can place a function and run it

[sterile sequoia]

Idk why but this seems overly complicated

Why is promise all being used?

And why axios over the normal fetch?

[rain frigate]

🍝

[eager raven]

for them to complete faster

instead of running in a sequence

[eager raven]

original dev used axios and it stayed like this

[sterile sequoia]

All fetches inside the same component are done in parallel:
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching

[sterile sequoia]

You should really consider changing over to fetch one of these days cause that looks like spaghetti code

[eager raven]

so much difference compared to nodejs

[eager raven]

but this also got promise.all

[sterile sequoia]

Yes im dumb, i forgot u need to resolve the promise as well cause those are async

[eager raven]

Bump

[river atlas]

notFound() must be called during component rendering, not in event handlers like you did.

If you don’t understand the above statement, just consider that you cannot run notFound() in client components. Instead router.push() to a non existent route like router.push("/404")

[eager raven]

Alright, I will use router.replace then