Skip to content

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

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

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