Barba: Page refreshed after timeout instead of redirected

[Mamboleoo]

The problem

When the server takes too long to answer from a fetch, the page gets refreshed instead of redirecting the user to the target page.
It seems to be a regression since V2.8.0.
I tested with versions 2.6.1 and 2.7.2 and both are working correctly.
It's easy to reproduce by setting a very low timeout option value.

Description

See this screenshot using the version 2.8.0 where the problem occurs

See this screenshot using the version 2.6.1 without the problem

Steps to reproduce issue [ Good To Have ]

Broken demo

1. Go to: https://mamboleoo.be/barba/
2. Open devtools and simulate 3G slow connection
3. Click on test url
4. You stay on the same page instead

Working demo

1. Go to: https://mamboleoo.be/barba/old.html
2. Open devtools and simulate 3G slow connection
3. Click on test url
4. You are redirected to the target page

Environment

• Barba version that exhibits the issue: ^2.8.0
• Browser OS/version used: All

Thanks for having a look at this!

[xavierfoucrier]

Hi @Mamboleoo,

Have you try to disable the default barba prefetch behavior?
Just to see if its related.

Thanks :wink:

[Mamboleoo]

I updated the demo and the issue is still occurring even with prefetchIgnore: true :/
https://mamboleoo.be/barba/

[xavierfoucrier]

Good catch, its a bug, thanks for pointing this out! :smiley:

[thierrymichel]

@Mamboleoo,

Could you try with:

barba.init({
    debug: true,
    timeout: 100,
  });

Really weird but I can reproduce your issue only with no debug.
With debug: true, it redirects as expected… 🙃🤔

[thierrymichel]

@Mamboleoo,

Nervermind, got it… :)

[thierrymichel]

Hi @Mamboleoo could you check if it's ok with 2.9.5?
Thanks in advance

[gamehelp16]

Looks like the problem still exists on 2.9.6, and like in @thierrymichel's case the issue doesn't occur when debug is set to true.

Not sure if this is intentional or not, but I also found that the page also gets refreshed instead of being redirected when clicking on a link to a page on the same site, but that page doesn't have barba wrapper nor container (let's say that I intentionally designed that page to not use barba). However, in this particular case the issue persists even with debug: true unlike in the timeout issue above.

[Mamboleoo]

@thierrymichel Sorry I just got back on the project where I'm using Barba.
I'm testing version 2.9.7 and the bug seems to be still there.
When using debug:true it doesn't refresh the page (so the expected behaviour) and I'm getting those console errors.

[nicolas-cusan]

@Mamboleoo I am having the same issue. Did you manage to find a fix? Can you reopen this issue?

[xavierfoucrier]

Hi @nicolas-cusan @Mamboleoo,

I just tested and it looks like this issue is patched, the reproductible repo of @Mamboleoo work as expected: the page redirect to the appropriate URL and doesn't refresh the current one.

Thanks for your feedbacks :wink:

[nicolas-cusan]

@xavierfoucrier thank you for the heads up! Will there be a new npm release that includes the patch soon?

[xavierfoucrier]

Hi @nicolas-cusan,

This have been patched months ago by @thierrymichel in https://github.com/barbajs/barba/commit/281c85fc7bbaf3d51ee58653468c48b2404152ea.

But as you leave a comment, I want to be sure of that.
Can you share a reproductible repo where you are facing this issue?

Be sure to use the latest @barba/[email protected]

Thanks

[nicolas-cusan]

@xavierfoucrier I do not have a reproductible repo that isolates that problem at the moment. I have the issue happening repeatedly on this website in production https://www.bold.ch/ (particularly on mobile). It uses @barba/[email protected]. The barba timeout is quite high at the moment so it does not happen often.

I will try to create a repo soon and share it here.

[xavierfoucrier]

Thanks, waiting for your feedback with the minimal repo. :wink: