Skip to content

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

New issue
New issue
Open
Open
UPDATE_ON_FETCH — sidebar won't refresh using Turbo 8.0.0 Beta 2 or later.#2110
@chrisgrande

Description

@chrisgrande
chrisgrande
opened on Mar 21, 2025 · edited by chrisgrande

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

Activity

matthiask

matthiask commented on Mar 21, 2025

@matthiask
matthiask
on Mar 21, 2025
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

karolyi commented on Mar 21, 2025

@karolyi
karolyi
on Mar 21, 2025
Contributor

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

karolyi commented on Mar 21, 2025

@karolyi
karolyi
on Mar 21, 2025
Contributor

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

chrisgrande commented on Mar 25, 2025

@chrisgrande
chrisgrande
on Mar 25, 2025
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

karolyi commented on Mar 26, 2025

@karolyi
karolyi
on Mar 26, 2025
Contributor

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

chrisgrande commented on Mar 27, 2025

@chrisgrande
chrisgrande
on Mar 27, 2025
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

karolyi commented on Mar 28, 2025

@karolyi
karolyi
on Mar 28, 2025
Contributor

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

karolyi commented on Mar 28, 2025

@karolyi
karolyi
on Mar 28, 2025
Contributor

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

karolyi commented on Mar 28, 2025

@karolyi
karolyi
on Mar 28, 2025
Contributor

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

karolyi commented on Mar 28, 2025

@karolyi
karolyi
on Mar 28, 2025 · edited by karolyi
Contributor

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @matthiask@chrisgrande@karolyi

        Issue actions
          UPDATE_ON_FETCH — sidebar won't refresh using Turbo 8.0.0 Beta 2 or later. · Issue #2110 · django-commons/django-debug-toolbar