Rare, Intermittent Failure of <script> const Ziggy = { ... } </script>

slothentic commented 3 years ago

Ziggy version

1.3.1

Laravel version

8.5.20

Description

Hello there, I have been using Ziggy for quite some time now, and really enjoy using it.

I have been dealing with a stubborn problem, in which Ziggy will fail to populate the global variable somehow and when it references it in the compiled version it fails with "ReferenceError Ziggy is not defined". I have never been able to reproduce the issue, and it only occurs approximately once every 5,000 requests. We get a trickle of reports of Sentry, basically since we've been using Ziggy.

Here is what we get in Sentry: https://www.dropbox.com/s/dpksox783vvh3s2/Screen%20Shot%202021-06-30%20at%206.13.30%20PM.png?dl=0

Here are the things I've ruled out:

Not related to particular browser, happens on all OS and Browser, old and new.
Not related to the usage of un-transpiled const - condition is triggered even on modern browsers
Not an order of operations issue - its an inline script tag, so its guaranteed to run prior, and the app script tags are set to defer anyhow.
Disabled Rocket-Loading (Cloudflare) on the page, no change
Upgraded everything, multiple times, this has been occurring 6+ months so its not due to some change in packages, or changes on our app

After reviewing the code, I cannot see how it would possibly not be set since its an inline, global definition. Ziggy otherwise works perfectly, and flawlessly 99.99999% of the time.

Does anyone have any other suggestions of things I might try, or has anyone seen this kind of intermittent failure before?

Ziggy call and context

Upon initialization

Ziggy configuration

N/A

Route definition

N/A

bakerkretzmar commented 3 years ago

Maybe I'm missing something but the code snippet in that Sentry screenshot looks to me like it's compiled. Are you using React or Vue or any other JavaScript framework?

Can you share how exactly you're including and instantiating Ziggy, with code examples? Thanks.

dan-orthodox commented 3 years ago

It is indeed throwing the error within compiled Vue code.

It's using the @routes method to instantiate the Ziggy variable at the top of the main blade layout, which is then referenced in the compiled Vue code, and works 99.999% of the time. The Vue code is included with <script defer /> tags so they are guaranteed to be run after the Ziggy variable is populated.

It's not going to be anything obvious, I've ruled out the most likely offenders unfortunately.

bakerkretzmar commented 3 years ago

Sounds frustrating, and sounds like you're doing everything right. Not sure how much I'm going to be able to help with this unfortunately 😅 any chance it's a browser extension interfering? Or some kind of security setting on some machines messing with inline scripts?

My only suggestion really would be to try including Ziggy in your JS bundle instead of using the @routes Blade directive, which is annoying but might just circumvent whatever's causing this error message entirely.

slothentic commented 3 years ago

Thanks for the follow up.

I was thinking it could be an extension, but I can't collect that data, and unfortunately have never been able to reproduce it myself in any way. One thing that makes that theory less likely though is the variety of browsers, it's happened on basically all of them, and I'm not sure what kind of extensions you could even install on Mobile Safari for example that would block setting a global variable.

One other very remote possibility I was thinking would be the tracking scripts that load before it, that they could have some kind of code that causes some kind of issue in the global scope that spills over, but just a hunch, and can't turn those off unfortunately.

Unless you have any other ideas, feel free to close it out, if I end up figuring out the solution will circle back. Thanks.

tighten / ziggy