Prefetched 404 breaks navigation

[wiebekaai]

When prefetching 404s using my configuration, it throws a JavaScript error without displaying the 404 page to the user.

To Reproduce Steps to reproduce the behavior:

1. Configure transition with removeOldContent: false and bypassCache: true (I remove old content in onEnterCompleted() of my renderer).
2. Hover a 404 link.
3. Click the link.
4. The onLeave transition is triggered, but it does not navigate to the 404 page.

This is how I remove old content:

[...this.wrapper.querySelectorAll('[data-taxi-view]')].filter((e) => e !== this.content).forEach((e) => e.remove());

Info

• Device: Macbook
• OS: macOS Sonoma
• Browser: Chrome
• Version: 122

[jakewhiteley]

Can you confirm if this only happens with removeOldContent: false?

The console error is on purpose, but it should still navigate.

[jakewhiteley]

And the other question - is there any content on the 404 page (a 404 handler with a [data-taxi-view] present), or is it literally a 404 with no body returned?

Edit: So what should happen upon navigating to a 404 - regardless of content on the 404 response - is taxi just defaults to standard browser navigation: the whole page just navigates to the new URL without going through Taxi at all.

I think I would prefer it to check if the new URL has a [data-taxi-view] present, and if so then navigate via PJAX to that URL, and if the response is empty then do a standard browser navigation. Thoughts?

[wiebekaai]

Hi Jake! Hmm, that seems like a good approach already, I just don't know why it's not working for me.

I tried on a clean setup and it works https://github.com/wiebekaai/taxijs-404s. However, on our production site https://askphill.com/pages/services, it plays the leave animation and gets stuck. It does have the proper data attributes.

You can test by replacing a url with some nonsense:

Even when I comment out all the code I have in the renderer + transition except for calling done() the issue persists. Or with:

new Core({
  removeOldContent: false,
  bypassCache: true,
});

[jakewhiteley]

I will have to investigate further - I just tried on https://askphill.com/pages/services, and it navigated to the page using default browser navigation without getting stuck. Is it browser specific?

[wiebekaai]

What the hell. Having a hard time reproducing it now. I'll play around a bit and get back to you.

[jakewhiteley]

I've managed to reproduce. I'll come back to you when I know what's up!

[jakewhiteley]

@wiebekaai Coul you update to 1.5.3 and see if its still happening?

[wiebekaai]

@wiebekaai Coul you update to 1.5.3 and see if its still happening?

Wow. Will do right now! Thanks so much 🙏 .

How did you reproduce it?

[wiebekaai]

It runs perfectly on the share theme link and production (we're using Shopify).

The local one has issues, which is less of a priority of course. Seems like the Shopify tracking pixels script does something with the fetch requests.

[jakewhiteley]

Open a new bug for the tracking pixel issue and I'll see if I can help.

The issue for this ticket was upon clicking the link, the focus event is triggered on mouse down, click on mouse up. This meant that the preload was firing ms before the actual fetch.

Normally this is no issue as if theres a cached versino of the target we jsut return that, if theres an in progress promise to fetch the page, we just return that. The fact this was 404ing meant that the preload promise never resolved correctly, causing beforeFetch to fire and nothing else.

I just caught 404 error properly and made it default to browser navigation fallback.

I like the transitions on your site btw! Can link to it in a taxi showcase?

[wiebekaai]

That's interesting, cool to see how this thing works. I'll open a new bug.

Yesssss, would be an honor :)!