Capture htmx logs and send to backend - integrate with Aspire

[egil]

Make it possible to enable log capture from htmx via a config option, which will send the logs to the server, which can then share it with e.g. an Aspire dashboard or just output the logs along with the back end logs.

https://htmx.org/api/#logger

[khalidabuhakmeh]

This might not be a good idea. 😅

As you'd expect, an HTMX-powered UI has a lot of events. This is from a single button click.

Also, most of the information you get in these log messages is recursive by nature (think DOM elements), so it's very difficult to serialize this data. This leads you to being very selective as to what you send back.

<script type="module">
    // Write your JavaScript code.
    htmx.logger = function (elt, event, data) {
        const payload = {
            event: event, // string
            data: {
                page: window.location.href,
                element: data.elt.nodeName
            }
        }
    
        console.log(payload)
    
        fetch('/__htmx_log', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .catch()
    }
</script>

It might be better to leave the debugging to the client.

[egil]

Guessed it's pretty loud, and yeah, I only think this would be something that should be used during development. But I think it would be neat to have logs show up in e.g., the aspire dashboard for easy consumption.

It's definitely a nice to have 😊

[khalidabuhakmeh]

Well, the web requests definitely would since they should have the correlation id attached to them. Is that what you're thinking?

[egil]

Have not thought deeply about it. But yes, something like that sounds right.