Jump to content

[SOLVED] XMLHttpRequest on the Main Thread is Deprecated


kongondo
 Share

Recommended Posts

Hi @adrian,

I am using a custom pw-panel and on page load, the first time I hover over its 'open' button, I get the following JavaScript warning in the console:

[Deprecation] Synchronous ?id=1083&s=1&c=1&_tracy_bar=js&v=2.8.3&XDEBUG_SESSION_STOP=1:485

XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I haven't investigated it much but it seems on hover, pw-panel loads the html inside the panel, which in this case has alpine.js attributes. Here's the debug screenshot from the console:

tracy_js_warning_console_1.jpg.bc5ca0831cc9b3ffd982f92d257d261b.jpg

Any ideas?

Thanks.

Edited by kongondo
marked as solved.
Link to comment
Share on other sites

@kongondo - it sounds like @Rudy is on the right track: https://stackoverflow.com/a/27046133/1524576

This comment on the same thread: https://stackoverflow.com/a/28478146/1524576 is also worth a read. 

The question I have though is which script is being load synchronously (and shouldn't). Is it perhaps fixable by putting async in the script tag on this line: https://github.com/nette/tracy/blob/da8677c87e4ed645523ea91e0b6cf1d595e60fe1/src/Tracy/Bar/assets/loader.phtml#L22

Maybe you could test that to see if it fixes things for you?

  • Like 2
Link to comment
Share on other sites

27 minutes ago, adrian said:

This comment on the same thread: https://stackoverflow.com/a/28478146/1524576 is also worth a read. 

In my case dev tools says the initiator is JqueryCore.js, so that could be it, although I have no <script> tags in that part of the code. JqueryCore is calling alpine.js in this case. 

32 minutes ago, adrian said:

Is it perhaps fixable by putting async in the script tag on this line: https://github.com/nette/tracy/blob/da8677c87e4ed645523ea91e0b6cf1d595e60fe1/src/Tracy/Bar/assets/loader.phtml#L22

Maybe you could test that to see if it fixes things for you?

Sorry, no joy.

Link to comment
Share on other sites

1 hour ago, kongondo said:

In my case dev tools says the initiator is JqueryCore.js, so that could be it, although I have no <script> tags in that part of the code. JqueryCore is calling alpine.js in this case. 

Correction. This actually seems to be the issue, sorry. I am calling alpine.js in an inline script. All that code lives inside a pw-panel. When I use the code outside a pw-panel,  I get no warnings. When used inside a pw-panel, I get the warning, unless I don't refer alpine.js. So, it seems alpine js and jQuery are clashing somehow. I'll try set up a test environment, but it might take a couple of days. Thanks for looking into the matter.

 

Edited by kongondo
  • Like 1
Link to comment
Share on other sites

Hi @adrian,

I've debugged this further and the issue has nothing to do with Tracy (was just caught in the middle!), sorry. The issue persists even with Tracy disabled. It is a jQuery issue. No idea how I'll get around this. I have to load Alpine.js inline since (AFAIK) $config->scripts() does not support 'defer' which Alpine needs. Thanks.

  • Like 1
Link to comment
Share on other sites

  • kongondo changed the title to [SOLVED] XMLHttpRequest on the Main Thread is Deprecated

Just noting that I managed to resolve this (non-Tracy-related) problem. My script was getting sucked inside the pw panel markup due to loading order. All I had to do was to move my script markup before my pw panel markup. No more warnings, unnecessary ajax calls, etc ?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...