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

[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:

8.0.0 Beta 2:

[matthiask]

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]

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]

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]

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]

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]

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]

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:

[karolyi]

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]

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]

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.