Next.js Discord

Discord Forum

Issue with navigation (stops working after a few page switches)

Unanswered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
If an user clicks thru multiple <Link> components, the navigation stops to work and the pages no longer change. From what I noticed it only stops if you open one of the pages which returns 500 for some servers. If that page is skipped, the navigation works without a problem. There are 2 500's thrown (so 2 times the page is opened) and the navigation fails.
I'm using the default app router and latest next.js

32 Replies

SiameseOP
bump
SiameseOP
Bump
SiameseOP
Anyone?
Brown bear
Without being able to see and debug the code this seems hard to answer.

I would suggest trying to implement error handling: https://nextjs.org/docs/app/building-your-application/routing/error-handling if you don't have it already and see if it helps
Lakeland Terrier
We need to see the <Link/>s in the pages/components that are breaking, we need to see the path's helpers that you are using for them (maybe some types are falling apart somewhere?) and your useEffect would be helpful if the API request is feeding a prop to your path helpers
@Lakeland Terrier We need to see the <Link/>s in the pages/components that are breaking, we need to see the path's helpers that you are using for them (maybe some types are falling apart somewhere?) and your useEffect would be helpful if the API request is feeding a prop to your path helpers
SiameseOP
the links aren't the problem since if I try to replicate the issue without opening the page that gives error 500 (from a fetch request), it doesn't stop the navigation
This is my code

const fetchData = async () => {
    const controller = new AbortController();

    try {
      const response = await axios.get(`/api/db/custombot?guild=${guildID}`, { signal: controller.signal });
      if (response) {
        setId(response.data.id || '');
        setAvatar(response.data.avatar || '');
        setName(response.data.name || '');
        setActivityValue(response.data.activity || '');
        setActivityType(activityOptions.find((x) => x.value === response.data.activityType) || '');
        setStatusType(options.find((x) => x.value === response.data.status) || '');
      }
    } catch (error: any) {
      handleErrorCodes(error.response, router, false);
    }

    if (!controller.signal.aborted) setLoading(false);

    return () => controller.abort();
  };

  useEffect(() => {
    fetchData();
  }, [guildID]);
the fetch is as an function since I reuse it on a button onClick
this is handleErrorCodes function

export function handleErrorCodes(response: { status: number, data: any }, router: any, handleNotFound = true, setIsRatelimited?: 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");
            if (setIsRatelimited) {
                setIsRatelimited(true);
                setTimeout(() => setIsRatelimited(false), 1000);
            }
        }
        else if (response.status === 404 && handleNotFound) router.replace("/404");
        else if (response.status === 500) toast.error(response.data.error);
        else if (response.status === 400) toast.error(response.data.error);
    }
    return;
}
the toast is from a lib called sonner
I think it happens when too many fetches happen?
It's hard to tell
It seems to always be different
this is js event listeners graph, it stops navigation on the drop
Only this is dropping. Everything else stays stable
Indigo Bunting
Having the same issue!
Indigo Bunting
Please someone
Lakeland Terrier
I do not have any insight I am sorry.
Indigo Bunting
😭
Indigo Bunting
bump
Indigo Bunting
bump
SiameseOP
bump
Indigo Bunting
Is there really no one experienced enough to solve this?
Indigo Bunting
Why is this thread cursed
Lakeland Terrier
We need to see more codebase to give any insight.
@Lakeland Terrier We need to see more codebase to give any insight.
SiameseOP
Which parts of it would be necessary?
@Siamese Which parts of it would be necessary?
Rainbow trout
A repo that can reproduce the issue would be ideal
SiameseOP
I doubt I will be able to provide a repo. It would need to give a pretty big chunk of the code
Boston Terrier
Try prefetch={false} on your link component, that might work on PROD build while the issue might not be replicable on dev build.
Indigo Bunting
@Siamese
@Indigo Bunting <@503282932241268736>
SiameseOP
would be kinda weird tho cause other pages don't crash the site