`astro:page-load` events not triggering in production

[sarthikg]

Astro Info

Astro                    v4.1.1
Node                     v20.11.0
System                   Linux (arm64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

astro:page-load have inconsistent behavior:

In Vercel's production deployments, astro:page-load events are not triggering when navigating to a page which contains this event. Directly landing on the page with the event does trigger the event, hence the behavior is inconsistent.

Something's off with how these events are triggered with View-Transitions.

Example:

• Preview Environment - https://portfolio-git-fix-career-duration-sarthikg.vercel.app/career/
• Production Environment - https://sarthikg.com/career/
• Code - https://github.com/sarthikg/portfolio/pull/43/files#diff-5bbe89f93ceef3760fa2cf1624ebf3075d919a2bf4918e166a233bfbafcee1e8

Exact element to look out for to notice the bug: Duration in the above card

Note: It seems to be working fine in development environments as well as preview environments of vercel.

What's the expected result?

Excepted result is that the astro:page-load event is triggered in production deployments similar to how they are working in development & preview environments.

Link to Minimal Reproducible Example

https://sarthikg.com/career/

Participation

• [ ] I am willing to submit a pull request for this issue.

[github-actions[bot]]

Hello @sarthikg. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[sarthikg]

@florian-lefebvre, I can pinpoint the exact component this error is originating from, Component.

In Line-52, I am adding setDuration function to be called on astro:page-load, which is not happening in production, but happening in preview & development environments.

IMO, the component is very minimal, barely 100 lines, with almost 50% of it taken by css styles.

For this particular bug, considering the time it will require to setup a new environment, can you please check it in the shared component file?

[martrapp]

Hey @sarthikg could you please try a build of https://sarthikg.com/career/ with Astro 4.1.2?

[sarthikg]

Upgraded to 4.1.2, issue still persists.

I think I have more idea this time as to what might be happening: It seems like with Custom Domains assigned in Vercel, when production deployments happen, the deployment happens on vercel's subdomain, as well as the custom domain.

Somehow, it seems like the deployment in vercel subdomain is working correctly, as is the case with preview deployment as well, but somehow the bug in only in custom-domains?

Latest Production Deployment URL - https://portfolio-kzev84njg-sarthikg.vercel.app/ Custom Domain - https://sarthikg.com/

[martrapp]

One obvious difference is, that the https://sarthikg.com/ uses a non-standard type attribute on scripts.

<script type="75a676e9beecc843dff73438-module" src="/_astro/hoisted.3wSZ5oYa.js"></script>
<script type="75a676e9beecc843dff73438-text/javascript">window.va = window.va \|\| function () { (window.vaq = window.vaq || []).push(arguments); };
 var script = document.createElement('script');
 script.defer = true;
 script.src = '/_vercel/insights/script.js';
 var head = document.querySelector('head');
 head.appendChild(script);
</script>

Browsers ignore those scripts. And so does Astro's view transitions router. The problem here is not, that the page-load event is not fired. The problem is, that at the time the event fires, there are no scripts that listen to it.

Another difference is, that on https://sarthikg.com/ the event handlers got rewritten and wrapped with code that seems to optimize loading. Do you have activated special optimizations, scripts, data collection stuff in the custom domain deployment?

Does https://sarthikg.com/ go through Cloudflare?

[martrapp]

FWIW: The reason I asked you to upgrade to 4.1.2 was that prior to 4.1.2, Astro would indeed hang endlessly while waiting for onload events for those scripts before triggering astro:page-load. In the new deployment, these scripts, which include event-listener, are ignored, astro:page-load is fired, and nobody listens.

Since the scripts are executed at some point, I suspect that there is some code that searches for scripts with these types and then executes them. But just too late.

[sarthikg]

Does https://sarthikg.com/ go through Cloudflare?

Yeah, the site does go through Cloudflare. Seeing this comment, I have changed the DNS rule to DNS only instead of earlier Proxy setting. I still don't see it getting fixed, so not sure if its the propagation issue or not

[martrapp]

Just saw some -cf- tags in the code, but that's probably completely unrelated. I also run website through Cloudflare, which are all fine. The question is who instruments the code and if there is an option to switch that of.

[sarthikg]

@martrapp, seems like it worked! I honestly would like to turn on a few cloudflare optimizations for the site though, seems like I'll have to try a few toggles to see which one exactly creates this issue.

[martrapp]

Please report here what you find out about those optimizations before you close the issue 😄

[sarthikg]

Found it:

Disabling Rocket Loader under Speed -> Optimization -> Content Opimization fixed it for me.

[martrapp]

Thank you very much!

[florian-lefebvre]

@martrapp do you think it's worth updating the docs to mention this setting messing up VT?

[martrapp]

yes, I had thought about that too. I'm not sure how this particular case differs from the other million things that could possibly go wrong. It was important to document it here. Now anyone searching the github issues has a chance of finding hints for similar problems. For me, this is far too specific to mention in the documentation.

[florian-lefebvre]

Alright makes sense 👍

[Issaminu]

Found it:

Disabling Rocket Loader under Speed -> Optimization -> Content Opimization fixed it for me.

I've been banging my head on the wall for weeks try to find out why a script works on dev and not in prod. literally would've never in a million years thought to check the Cloudflare settings. Thank you so much @sarthikg !

[sarthikg]

Found it: Disabling Rocket Loader under Speed -> Optimization -> Content Opimization fixed it for me.

I've been banging my head on the wall for weeks try to find out why a script works on dev and not in prod. literally would've never in a million years thought to check the Cloudflare settings. Thank you so much @sarthikg !

[Clouder0]

I just encountered exactly this issue. Running in dev environment everything is fine but after deployed to Cloudflare, the script after view-transition just won't work.

I thought about SSR but yeah, running a simple web server locally hosting the built static output yields normal result. So it turns to to be CF's fault.