Jump to content

Tracy + htmx hx-boost


bernhard
 Share

Recommended Posts

Hey @adrian I'm using HTMX on my current project, specifically hx-boost which turns every regular link on the page into an ajax-powered link. It makes the request and then swaps out the content without a new page load. This is mostly great but sometimes introduces issues, for example the tracy debug bar needs to be out of the swapped area to stay on the page.

I managed to do that and thought it was working well. The debug bar stays on the page and for each link that I click I get another AJAX entry in the debug bar, which is great 🙂 

Today I realised that when I click the browser's back button I get this error and the debug bar disappears:

tool/?_tracy_bar=js&v=2.10.10&XDEBUG_SESSION_STOP=1:34 Uncaught TypeError: Cannot read properties of null (reading 'Tracy')
    at new Panel (tool/?_tracy_bar=js&v=2.10.10&XDEBUG_SESSION_STOP=1:34:31)
    at tool/?_tracy_bar=js&v=2.10.10&XDEBUG_SESSION_STOP=1:453:30
    at NodeList.forEach (<anonymous>)
    at Debug.loadAjax (tool/?_tracy_bar=js&v=2.10.10&XDEBUG_SESSION_STOP=1:451:48)
    at tool/?_tracy_bar=content-ajax.db1c54dcde_4&XDEBUG_SESSION_STOP=1&v=0.5514348022883848:1:13

Do you think this is something that can be accounted in Tracy Debugger? It's not critical, but a bit annoying. So if there is a simple solution for it I'd be thankful 🙂 

Link to comment
Share on other sites

Another issue that I just found is that it breaks the console 😞 The first request goes through and I get the result of d($page) in the dumps area, but I also get this in the devtools console:

VM20245:1 Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'tracyConsoleTabs' exceeded the quota.
    at xmlhttp.onreadystatechange (<anonymous>:1:287591)

I really don't want to bother you with this edge case scenario but maybe there is not much to it to fix it?!

Link to comment
Share on other sites

@bernhard - I think the first issue might be something that should be fixed in the core Tracy project, but then I also don't know what you've had to do to "move the debug bar out of the swapped area"

I don't think the second issue is related to htmx - sounds like maybe you have a lot of d() content stored - perhaps multiple console tabs? LocalStorage is usually limited to 5MB. I really need to move everything over to IndexedDB, but not sure when I'll be able to get to that.

Link to comment
Share on other sites

15 hours ago, adrian said:

@bernhard - I think the first issue might be something that should be fixed in the core Tracy project, but then I also don't know what you've had to do to "move the debug bar out of the swapped area"

Hey @adrian thx for your thoughts on this. With htmx you can add hx-boost to and dom element and htmx will convert all links in that element to ajax powered links that fetch the new page's data and then replace the content of the dom element instead of reloading the page.

You could, for example, do this: <body hx-boost> and it would replace the whole body for you after clicking on a link. This would cause the tracy debug bar to disappear. That's why I did this:

<body>
  <div hx-boost>
    ...
  </div>
</body>

Tracy injects the debug bar in the body, which means it can survive different swaps of the hx-boost content and shows new requests properly as ajax requests.

15 hours ago, adrian said:

I don't think the second issue is related to htmx - sounds like maybe you have a lot of d() content stored - perhaps multiple console tabs? LocalStorage is usually limited to 5MB. I really need to move everything over to IndexedDB, but not sure when I'll be able to get to that.

This cannot be the issue. I have no tabs and I have a single d($page) call.

If I find time I'll ask the folks at nette about it. Thx four your assessment!

Link to comment
Share on other sites

@bernhard - thanks for the explanation of the Tracy being in the body issue - makes sense. As for the localStorage issue, maybe htmx is filling up localStorage then? Can you investigate what's in there to see why it's full?

Link to comment
Share on other sites

Glad it was helpful 🙂 

12 minutes ago, adrian said:

As for the localStorage issue, maybe htmx is filling up localStorage then? Can you investigate what's in there to see why it's full?

Believe it or not - I can't reproduce it at the moment 😅 I'll keep an eye on it!

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...