Next.js Discord

Discord Forum

notFound() function

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
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
Answered by joulev
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")
View full answer

28 Replies

Clown
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
@Clown Are you using a try catch somewhere
SiameseOP
nope
but the function runs inside a .catch
for a fetch request
Clown
Yeah so thats probably what is catching it maybe
SiameseOP
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;
}
Clown
Just check if you the data isnt set and do a notFound
SiameseOP
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
Clown
Idk why but this seems overly complicated
Why is promise all being used?
And why axios over the normal fetch?
American Crow
🍝
@Clown Why is promise all being used?
SiameseOP
for them to complete faster
instead of running in a sequence
@Clown And why axios over the normal fetch?
SiameseOP
original dev used axios and it stayed like this
Clown
All fetches inside the same component are done in parallel:
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching
@Siamese original dev used axios and it stayed like this
Clown
You should really consider changing over to fetch one of these days cause that looks like spaghetti code
@Siamese but this also got promise.all
Clown
Yes im dumb, i forgot u need to resolve the promise as well cause those are async
SiameseOP
Bump
@Siamese 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
joulev
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")
Answer