Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UPDATE_ON_FETCH — sidebar won't refresh using Turbo 8.0.0 Beta 2 or later. #2110

Open
chrisgrande opened this issue Mar 21, 2025 · 10 comments

Comments

@chrisgrande
Copy link

chrisgrande commented Mar 21, 2025

Django Debug Toolbar: v5.1.0

Settings:

   DEBUG_TOOLBAR_CONFIG = {
        "UPDATE_ON_FETCH": True,
        "ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent"
    }

Using the example project with the above settings as an example, the sidebar will refresh with the Turbo page loads. Between Turbo 8.0.0 Beta 1 and Beta 2 (and all versions after Turbo 8 Beta 2), the sidebar no longer updates .

The History is correctly tracked and you can open the History and switch to any of the page loads, just the sidebar doesn't automatically update to the latest page load.

8.0.0 Beta 1:
Image

8.0.0 Beta 2:
Image

@matthiask
Copy link
Member

We have changed a problem with fetch in 5.1, see #2101

Did it work with django-debug-toolbar 5.0.1? I think we have improved the state of things but of course something else will always break.

I'm cc-ing @karolyi who has debugged the original issue and contributed the fix.

@karolyi
Copy link
Contributor

karolyi commented Mar 21, 2025

Hey @chrisgrande,

since I don't know that framework (if it is one), I'll need to get you to put together a reproducible example.

Seeing the screencasts, there are errors generated in the console as you click, I want to see what those are.

@karolyi
Copy link
Contributor

karolyi commented Mar 21, 2025

Btw, as you stated it works with the earlier version of "turbo" (whatever that is), so if the earlier version works with django-debug-toolbar 5.1.0, I am unsure the toolbar is at fault.

@chrisgrande
Copy link
Author

Hi @karolyi — here is an updated example app:
https://github.com/chrisgrande/django-debug-toolbar/tree/turbo-8

There was already a test page in the example app using Turbo 7.2.4, I created two additional pages, 8b1, and 8b2. You need to hard refresh each versions page to get the new Turbo version loaded.

Looking at the changes between Turbo 8 beta 1 and 2, not sure if this might be causing the issue.

@karolyi
Copy link
Contributor

karolyi commented Mar 26, 2025

I've checked out your repo today, and all I can see is some weird const redeclaration error that isn't coming from django-debug-toolbar:

Uncaught SyntaxError: redeclaration of const incrementFetch
    <anonymous> http://127.0.0.1:8000/turbo-beta1/ line 4251 > injectedScript:1
    renderElement http://unpkg.com/@hotwired/[email protected]:4251
    assignNewBody http://unpkg.com/@hotwired/[email protected]:4415
    replaceBody http://unpkg.com/@hotwired/[email protected]:4327
    preservingPermanentElements http://unpkg.com/@hotwired/[email protected]:1623
    preservingPermanentElements http://unpkg.com/@hotwired/[email protected]:1716
    replaceBody http://unpkg.com/@hotwired/[email protected]:4325
    render http://unpkg.com/@hotwired/[email protected]:4282
    renderSnapshot http://unpkg.com/@hotwired/[email protected]:1421
    render http://unpkg.com/@hotwired/[email protected]:1389
    renderPage http://unpkg.com/@hotwired/[email protected]:4515
    renderPageSnapshot http://unpkg.com/@hotwired/[email protected]:2605
    promise callback*renderChange http://unpkg.com/@hotwired/[email protected]:2180
    renderPageSnapshot http://unpkg.com/@hotwired/[email protected]:2604
    loadResponse http://unpkg.com/@hotwired/[email protected]:2388
    render http://unpkg.com/@hotwired/[email protected]:2599
    loadResponse http://unpkg.com/@hotwired/[email protected]:2382
    visitRequestCompleted http://unpkg.com/@hotwired/[email protected]:2654
    recordResponse http://unpkg.com/@hotwired/[email protected]:2367
    requestSucceededWithResponse http://unpkg.com/@hotwired/[email protected]:2490
    receive http://unpkg.com/@hotwired/[email protected]:799
    perform http://unpkg.com/@hotwired/[email protected]:776
    issueRequest http://unpkg.com/@hotwired/[email protected]:2345
    visitStarted http://unpkg.com/@hotwired/[email protected]:2640
    start http://unpkg.com/@hotwired/[email protected]:2295
    startVisit http://unpkg.com/@hotwired/[email protected]:2992
    visitProposedToLocation http://unpkg.com/@hotwired/[email protected]:2631
    visitProposedToLocation http://unpkg.com/@hotwired/[email protected]:4810
    proposeVisit http://unpkg.com/@hotwired/[email protected]:2982
    visit http://unpkg.com/@hotwired/[email protected]:4712
    followedLinkToLocation http://unpkg.com/@hotwired/[email protected]:4799
    clickBubbled http://unpkg.com/@hotwired/[email protected]:1521
    clickCaptured http://unpkg.com/@hotwired/[email protected]:1510
    start http://unpkg.com/@hotwired/[email protected]:1496
    start http://unpkg.com/@hotwired/[email protected]:4670
    start http://unpkg.com/@hotwired/[email protected]:5073
    <anonymous> http://unpkg.com/@hotwired/[email protected]:6044
    <anonymous> http://unpkg.com/@hotwired/[email protected]:8
    <anonymous> http://unpkg.com/@hotwired/[email protected]:9
line 4251 > injectedScript:1:1
    <anonymous> http://127.0.0.1:8000/turbo-beta1/ line 4251 > injectedScript:1
    renderElement http://unpkg.com/@hotwired/[email protected]:4251
    assignNewBody http://unpkg.com/@hotwired/[email protected]:4415
    replaceBody http://unpkg.com/@hotwired/[email protected]:4327
    preservingPermanentElements http://unpkg.com/@hotwired/[email protected]:1623
    preservingPermanentElements http://unpkg.com/@hotwired/[email protected]:1716
    replaceBody http://unpkg.com/@hotwired/[email protected]:4325
    render http://unpkg.com/@hotwired/[email protected]:4282
    renderSnapshot http://unpkg.com/@hotwired/[email protected]:1421
    render http://unpkg.com/@hotwired/[email protected]:1389
    InterpretGeneratorResume self-hosted:1413
    AsyncFunctionNext self-hosted:800
    (Async: async)
    renderPage http://unpkg.com/@hotwired/[email protected]:4515
    renderPageSnapshot http://unpkg.com/@hotwired/[email protected]:2605
    (Async: promise callback)
    renderChange http://unpkg.com/@hotwired/[email protected]:2180
    renderPageSnapshot http://unpkg.com/@hotwired/[email protected]:2604
    loadResponse http://unpkg.com/@hotwired/[email protected]:2388
    render http://unpkg.com/@hotwired/[email protected]:2599
    InterpretGeneratorResume self-hosted:1413
    AsyncFunctionNext self-hosted:800
    (Async: async)
    loadResponse http://unpkg.com/@hotwired/[email protected]:2382
    visitRequestCompleted http://unpkg.com/@hotwired/[email protected]:2654
    recordResponse http://unpkg.com/@hotwired/[email protected]:2367
    requestSucceededWithResponse http://unpkg.com/@hotwired/[email protected]:2490
    InterpretGeneratorResume self-hosted:1413
    AsyncFunctionNext self-hosted:800
    (Async: async)
    receive http://unpkg.com/@hotwired/[email protected]:799
    perform http://unpkg.com/@hotwired/[email protected]:776
    InterpretGeneratorResume self-hosted:1413
    AsyncFunctionNext self-hosted:800
    (Async: async)
    issueRequest http://unpkg.com/@hotwired/[email protected]:2345
    visitStarted http://unpkg.com/@hotwired/[email protected]:2640
    start http://unpkg.com/@hotwired/[email protected]:2295
    startVisit http://unpkg.com/@hotwired/[email protected]:2992
    visitProposedToLocation http://unpkg.com/@hotwired/[email protected]:2631
    visitProposedToLocation http://unpkg.com/@hotwired/[email protected]:4810
    proposeVisit http://unpkg.com/@hotwired/[email protected]:2982
    visit http://unpkg.com/@hotwired/[email protected]:4712
    followedLinkToLocation http://unpkg.com/@hotwired/[email protected]:4799
    clickBubbled http://unpkg.com/@hotwired/[email protected]:1521
    (Async: EventListener.handleEvent)
    clickCaptured http://unpkg.com/@hotwired/[email protected]:1510
    (Async: EventListener.handleEvent)
    start http://unpkg.com/@hotwired/[email protected]:1496
    start http://unpkg.com/@hotwired/[email protected]:4670
    start http://unpkg.com/@hotwired/[email protected]:5073
    <anonymous> http://unpkg.com/@hotwired/[email protected]:6044
    <anonymous> http://unpkg.com/@hotwired/[email protected]:8
    <anonymous> http://unpkg.com/@hotwired/[email protected]:9

Are you sure it is the toolbar to blame here? I see a script tag injected into the page that must be at fault:

      const incrementFetch = document.querySelector("#incrementFetch");
      const incrementXHR = document.querySelector("#incrementXHR");
      const value = document.querySelector("#session-value");
      incrementFetch.addEventListener("click", function () {
        fetch(incrementFetch.dataset.url).then( function (response) {
          response.json().then(function(data) {
            value.innerHTML = data.value;
          });
        });
      });
      incrementXHR.addEventListener("click", function () {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            value.innerHTML = JSON.parse(xhr.response).value;
          }
        }
        xhr.open('GET', incrementXHR.dataset.url, true);
        xhr.send('');
      });

@chrisgrande
Copy link
Author

The injected JS was duplicated from the original Turbo example page in the repo, originally added here.

I have updated my repo removing the increment buttons and that JS from the Turbo 8 pages and have added an example with the current version of Turbo 8.0.13. There shouldn't be any obvious console errors now, however the toolbar doesn't update on the page navigation, with versions b2+.

@karolyi
Copy link
Contributor

karolyi commented Mar 28, 2025

Do you mean the navigation between the test urls http://127.0.0.1:8000/turbo-beta2/ and http://127.0.0.1:8000/turbo-beta2/2?

For me the toolbar registers the http requests just fine:

Image

@karolyi
Copy link
Contributor

karolyi commented Mar 28, 2025

Oh wait, you meant the UPDATE_ON_FETCH option? I didn't even know about that option, since I don't build single page applications. I'll look into it but can't promise anything.

@karolyi
Copy link
Contributor

karolyi commented Mar 28, 2025

I guess the whole thing comes down to the order of loading javascripts. It seems that turbo grabs the original window.fetch before toolbar.js overrides (rebinds) it, and so toobar's version doesn't even get used on a page load by turbo.

That has nothing to do with my change.

@karolyi
Copy link
Contributor

karolyi commented Mar 28, 2025

So, yes, upon more investigating (downloaded turbo.js locally and added some debug to before nativeFetch, it is what I just pointed out: they grab the original window.fetch before toolbar.js has the opportunity to rebind it.

As long as they use that reference, I'm surprised that toolbar can even pick up the http requests at all. I didn't go into the djdt source to see why the latter happens, but the reason for the former is indeed what you've suggested, and thus I think it's outside the scope of this project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants