# Debugging htmx Applications

HX-Request: true
HX-Current-URL: https://localhost:5001/Artists
HX-Target: artist-list
HX-Trigger: search-input

HX-Redirect: /Login
HX-Refresh: true
HX-Trigger: showToast
HX-Trigger-After-Swap: refreshStats
HX-Push-Url: /Artists?search=acdc

<button hx-get="/Artists?handler=Editt&id=1"
        hx-target="#artist-row-1"
        hx-swap="outerHTML">
    Edit
</button>

<button hx-get="/Artists?handler=Edit&id=1"
        hx-target="#artist-row-1"
        hx-swap="outerHTML">
    Edit
</button>

htmx: could not find target with selector "#nonexistent"

htmx: response error : 404 from /Artists?handler=Wrong

_hyperscript: syntax error at line 1: unexpected token 'documnet'

htmx.logAll();

htmx:configRequest {verb: 'get', path: '/Artists?handler=List', elt: button, ...}
htmx:beforeRequest {verb: 'get', path: '/Artists?handler=List', ...}
htmx:afterRequest {verb: 'get', path: '/Artists?handler=List', successful: true, ...}
htmx:beforeSwap {target: div#artist-list, serverResponse: '<table>...', ...}
htmx:afterSwap {target: div#artist-list, ...}
htmx:afterSettle {target: div#artist-list, ...}

// Log all htmx requests with their details
document.body.addEventListener('htmx:configRequest', function(event) {
    console.log('htmx request:', {
        method: event.detail.verb.toUpperCase(),
        path: event.detail.path,
        target: event.detail.target?.id || '(no target)',
        trigger: event.detail.triggeringEvent?.target?.id || '(unknown trigger)'
    });
});

// Log successful swaps
document.body.addEventListener('htmx:afterSwap', function(event) {
    console.log('htmx swapped:', {
        target: event.detail.target?.id || event.detail.target,
        path: event.detail.pathInfo?.requestPath,
        responseSize: event.detail.xhr?.responseText?.length || 0
    });
});

// Log errors prominently
document.body.addEventListener('htmx:responseError', function(event) {
    console.error('htmx ERROR:', {
        status: event.detail.xhr?.status,
        statusText: event.detail.xhr?.statusText,
        path: event.detail.pathInfo?.requestPath
    });
});

<button class="btn btn-primary"
        hx-get="/Artists?handler=Edit&amp;id=1"
        hx-target="#artist-row-1"
        hx-swap="outerHTML"
        hx-indicator="#loading-spinner">
    Edit
</button>

// Test if the selector finds anything
document.querySelector('#artist-row-1')

// Returns the element or null if not found

// Test more complex selectors
document.querySelector('closest tr')  // This won't work - closest is htmx syntax

// For closest, you need:
document.querySelector('button').closest('tr')  // Find button's parent row

<tr id="artist-row-1">
    <td>AC/DC</td>
    <td>
        <button hx-get="/Artists?handler=Edit&id=1"
                hx-target="#artist-row-1"
                hx-swap="outerHTML">
            Edit
        </button>
    </td>
</tr>

<tr id="artist-edit-1">
    <td colspan="2">
        <form hx-post="/Artists?handler=Update&id=1"
              hx-target="#artist-edit-1"
              hx-swap="outerHTML">
            <input name="name" value="AC/DC" />
            <button type="submit">Save</button>
            <button type="button" 
                    hx-get="/Artists?handler=Cancel&id=1"
                    hx-target="#artist-row-1">
                Cancel
            </button>
        </form>
    </td>
</tr>

<!-- Option 1: Keep the same ID -->
<tr id="artist-row-1">
    <td colspan="2">
        <form hx-post="/Artists?handler=Update&id=1"
              hx-target="#artist-row-1"
              hx-swap="outerHTML">
            <!-- form content -->
        </form>
    </td>
</tr>

<!-- Option 2: Target a stable container -->
<button type="button"
        hx-get="/Artists?handler=Cancel&id=1"
        hx-target="closest tr"
        hx-swap="outerHTML">
    Cancel
</button>

@inject IWebHostEnvironment Environment

<!-- htmx and Hyperscript -->
<script src="~/lib/htmx/htmx.min.js"></script>
<script src="~/lib/hyperscript/_hyperscript.min.js"></script>

@if (Environment.IsDevelopment())
{
    <script>
        // Enable verbose htmx logging in development
        htmx.logAll();
        console.log('%chtmx debug mode enabled', 'color: #3b82f6; font-weight: bold;');
    </script>
}

htmx:configRequest
  {elt: button, verb: "get", path: "/Artists?handler=Edit&id=1", headers: {...}, ...}

htmx:beforeRequest  
  {elt: button, xhr: XMLHttpRequest, target: tr#artist-row-1, ...}

htmx:afterRequest
  {elt: button, xhr: XMLHttpRequest, target: tr#artist-row-1, successful: true, ...}

htmx:beforeSwap
  {elt: button, xhr: XMLHttpRequest, target: tr#artist-row-1, serverResponse: "...", ...}

htmx:afterSwap
  {elt: button, target: tr#artist-row-1, ...}

htmx:afterSettle
  {elt: button, target: tr#artist-row-1, ...}

// Only log errors and swaps
const eventsToLog = ['htmx:responseError', 'htmx:afterSwap', 'htmx:swapError'];

eventsToLog.forEach(eventName => {
    document.body.addEventListener(eventName, function(event) {
        console.log(eventName, event.detail);
    });
});

console.log(htmx.config);

{
    historyEnabled: true,
    historyCacheSize: 10,
    refreshOnHistoryMiss: false,
    defaultSwapStyle: "innerHTML",
    defaultSwapDelay: 0,
    defaultSettleDelay: 20,
    includeIndicatorStyles: true,
    indicatorClass: "htmx-indicator",
    requestClass: "htmx-request",
    addedClass: "htmx-added",
    settlingClass: "htmx-settling",
    swappingClass: "htmx-swapping",
    timeout: 0,
    // ... more settings
}

htmx.config.historyCacheSize = 0;

htmx.config.timeout = 60000; // 60 seconds

htmx.config.refreshOnHistoryMiss = true;

console.log(htmx.config.defaultSwapStyle); // "innerHTML" by default

document.body.addEventListener('htmx:responseError', function(event) {
    const xhr = event.detail.xhr;
    const status = xhr.status;
    const path = event.detail.pathInfo?.requestPath || 'unknown';
    
    // Log for debugging
    console.error('htmx request failed:', {
        status: status,
        statusText: xhr.statusText,
        path: path,
        response: xhr.responseText?.substring(0, 500) // First 500 chars
    });
    
    // User-facing error handling
    handleHtmxError(status, path);
});

function handleHtmxError(status, path) {
    const messages = {
        400: 'The request was invalid. Please check your input and try again.',
        401: 'Your session has expired. Please refresh the page to log in again.',
        403: 'You do not have permission to perform this action.',
        404: 'The requested resource was not found.',
        409: 'A conflict occurred. The data may have been modified by another user.',
        421: 'The submitted data was invalid.',
        429: 'Too many requests. Please wait a moment and try again.',
        500: 'A server error occurred. Please try again later.',
        502: 'The server is temporarily unavailable. Please try again later.',
        503: 'The service is currently unavailable. Please try again later.'
    };
    
    const message = messages[status] || `An error occurred (${status}).`;
    
    // Show toast notification if available
    if (typeof showToast === 'function') {
        showToast(message, 'error');
    } else {
        alert(message);
    }
}

document.body.addEventListener('htmx:responseError', function(event) {
    const status = event.detail.xhr.status;
    
    // Skip if server sent its own error HTML
    const contentType = event.detail.xhr.getResponseHeader('Content-Type');
    if (contentType?.includes('text/html') && event.detail.xhr.responseText?.includes('error-message')) {
        return; // Let the server's error content display
    }
    
    const messages = {
        400: 'Invalid request. Please check your input.',
        401: 'Session expired. Please log in again.',
        403: 'Permission denied.',
        404: 'Not found.',
        500: 'Server error. Please try again.'
    };
    
    createToast(messages[status] || `Error: ${status}`, 'error');
});

document.body.addEventListener('htmx:configRequest', function(event) {
    console.log('Request configuration:', {
        verb: event.detail.verb,           // 'get', 'post', etc.
        path: event.detail.path,           // The URL
        headers: event.detail.headers,     // Request headers
        parameters: event.detail.parameters, // Form/query parameters
        target: event.detail.target,       // Target element
        triggeringEvent: event.detail.triggeringEvent // Original DOM event
    });
});

// Add a debug parameter to all requests during development
document.body.addEventListener('htmx:configRequest', function(event) {
    event.detail.parameters['_debug'] = 'true';
    event.detail.parameters['_timestamp'] = Date.now();
});

public async Task<IActionResult> OnGetListAsync()
{
    if (Request.Query.ContainsKey("_debug"))
    {
        _logger.LogDebug("Debug request at {Timestamp}", Request.Query["_timestamp"]);
    }
    // ... rest of handler
}

document.body.addEventListener('htmx:configRequest', function(event) {
    event.detail.headers['X-Debug-Session'] = sessionStorage.getItem('debugId') || 'none';
});

public async Task<IActionResult> OnGetAsync()
{
    var isHtmxRequest = Request.Headers.ContainsKey("HX-Request");
    
    _logger.LogInformation(
        "Artists page requested | htmx: {IsHtmx} | Target: {Target} | Trigger: {Trigger}",
        isHtmxRequest,
        Request.Headers["HX-Target"].FirstOrDefault() ?? "(none)",
        Request.Headers["HX-Trigger"].FirstOrDefault() ?? "(none)"
    );
    
    await LoadArtistsAsync();
    
    if (isHtmxRequest)
    {
        return Partial("Artists/_ArtistList", this);
    }
    
    return Page();
}

using System.Diagnostics;

namespace ChinookDashboard.Middleware;

public class HtmxLoggingMiddleware
{
    private readonly RequestDelegate _next;
    private readonly ILogger<HtmxLoggingMiddleware> _logger;

    public HtmxLoggingMiddleware(RequestDelegate next, ILogger<HtmxLoggingMiddleware> logger)
    {
        _next = next;
        _logger = logger;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        // Only log htmx requests
        if (!context.Request.Headers.ContainsKey("HX-Request"))
        {
            await _next(context);
            return;
        }

        var stopwatch = Stopwatch.StartNew();
        var requestId = Guid.NewGuid().ToString("N")[..8];

        // Extract htmx headers
        var htmxTarget = context.Request.Headers["HX-Target"].FirstOrDefault();
        var htmxTrigger = context.Request.Headers["HX-Trigger"].FirstOrDefault();
        var htmxTriggerName = context.Request.Headers["HX-Trigger-Name"].FirstOrDefault();
        var htmxCurrentUrl = context.Request.Headers["HX-Current-URL"].FirstOrDefault();

        _logger.LogDebug(
            "[htmx:{RequestId}] {Method} {Path}{Query} | Target: {Target} | Trigger: {Trigger}",
            requestId,
            context.Request.Method,
            context.Request.Path,
            context.Request.QueryString,
            htmxTarget ?? "(default)",
            htmxTrigger ?? htmxTriggerName ?? "(unknown)"
        );

        try
        {
            await _next(context);

            stopwatch.Stop();

            _logger.LogDebug(
                "[htmx:{RequestId}] Completed {StatusCode} in {ElapsedMs}ms | Content-Length: {Length}",
                requestId,
                context.Response.StatusCode,
                stopwatch.ElapsedMilliseconds,
                context.Response.ContentLength ?? 0
            );
        }
        catch (Exception ex)
        {
            stopwatch.Stop();

            _logger.LogError(ex,
                "[htmx:{RequestId}] Failed after {ElapsedMs}ms | {Method} {Path}",
                requestId,
                stopwatch.ElapsedMilliseconds,
                context.Request.Method,
                context.Request.Path
            );

            throw;
        }
    }
}

// Extension method for clean registration
public static class HtmxLoggingMiddlewareExtensions
{
    public static IApplicationBuilder UseHtmxLogging(this IApplicationBuilder builder)
    {
        return builder.UseMiddleware<HtmxLoggingMiddleware>();
    }
}

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseHtmxLogging(); // Add htmx logging
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
// ... rest of pipeline

[htmx:a1b2c3d4] GET /Artists?handler=List&search=ac | Target: artist-list | Trigger: search-input
[htmx:a1b2c3d4] Completed 200 in 45ms | Content-Length: 2847

// Wrong - returns full page with layout
public async Task<IActionResult> OnGetListAsync()
{
    await LoadArtistsAsync();
    return Page(); // Includes <html>, <head>, <body>, etc.
}

// Correct - returns just the partial content
public async Task<IActionResult> OnGetListAsync()
{
    await LoadArtistsAsync();
    return Partial("Artists/_ArtistList", this);
}

// Wrong - looks for Pages/Artists/_List.cshtml
return Partial("_List", model);

// Correct - full path from Shared folder
return Partial("Artists/_ArtistList", model);

// Also correct - explicit path
return Partial("~/Pages/Shared/Artists/_ArtistList.cshtml", model);

// Partial expects ArtistListModel but receives List<Artist>
return Partial("Artists/_ArtistList", artists); // Wrong type

// Correct - pass the expected model type
return Partial("Artists/_ArtistList", new ArtistListModel { Artists = artists });

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ChinookDashboard.Extensions;

public static class PartialResultExtensions
{
    public static PartialViewResult PartialWithDiagnostics(
        this PageModel page,
        string viewName,
        object? model,
        ILogger logger)
    {
        var modelType = model?.GetType().Name ?? "null";
        var modelCount = GetItemCount(model);
        
        logger.LogDebug(
            "Returning partial '{ViewName}' | Model: {ModelType} | Items: {Count}",
            viewName,
            modelType,
            modelCount
        );

        return page.Partial(viewName, model);
    }

    private static string GetItemCount(object? model)
    {
        if (model == null) return "n/a";
        
        // Check for common collection types
        if (model is System.Collections.ICollection collection)
            return collection.Count.ToString();
            
        // Check for paginated list
        var itemsProperty = model.GetType().GetProperty("Items");
        if (itemsProperty?.GetValue(model) is System.Collections.ICollection items)
            return items.Count.ToString();
            
        return "n/a";
    }
}

public async Task<IActionResult> OnGetListAsync()
{
    await LoadArtistsAsync();
    return this.PartialWithDiagnostics("Artists/_ArtistList", Artists, _logger);
}

public async Task<IActionResult> OnGetListAsync()
{
    await LoadArtistsAsync();
    
    if (Request.Headers.ContainsKey("HX-Request"))
    {
        // Add debug headers in development
        Response.Headers.Append("X-Debug-Partial", "Artists/_ArtistList");
        Response.Headers.Append("X-Debug-Model", Artists?.GetType().Name ?? "null");
        Response.Headers.Append("X-Debug-Count", Artists?.Count.ToString() ?? "0");
    }
    
    return Partial("Artists/_ArtistList", this);
}

// Check for token input
document.querySelector('input[name="__RequestVerificationToken"]');
// Should return an <input> element with a long value

// Get the token value
document.querySelector('input[name="__RequestVerificationToken"]')?.value;
// Should return a long string like "CfDJ8N..."

<!-- In _Layout.cshtml, typically in a hidden location -->
<form id="__AjaxAntiForgeryForm" asp-antiforgery="true" style="display:none;"></form>

document.body.addEventListener('htmx:configRequest', function(event) {
    var token = document.querySelector('input[name="__RequestVerificationToken"]');
    if (token) {
        event.detail.headers['RequestVerificationToken'] = token.value;
        console.log('Anti-forgery token attached:', token.value.substring(0, 20) + '...');
    } else {
        console.warn('No anti-forgery token found on page!');
    }
});

RequestVerificationToken: CfDJ8N...

builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "RequestVerificationToken"; // Must match client header name
});

[ValidateAntiForgeryToken]
public async Task<IActionResult> OnPostUpdateAsync(int id, string name)
{
    // This will fail without the attribute when tokens are enabled
}

// In your PageModel, add a diagnostic handler
public IActionResult OnPostDiagnoseTokenAsync()
{
    var headerToken = Request.Headers["RequestVerificationToken"].FirstOrDefault();
    var formToken = Request.Form["__RequestVerificationToken"].FirstOrDefault();
    var cookieToken = Request.Cookies
        .FirstOrDefault(c => c.Key.StartsWith(".AspNetCore.Antiforgery"))
        .Value;

    _logger.LogInformation("Token Diagnosis: Header={Header}, Form={Form}, Cookie={Cookie}",
        headerToken?.Substring(0, Math.Min(20, headerToken?.Length ?? 0)) ?? "(missing)",
        formToken?.Substring(0, Math.Min(20, formToken?.Length ?? 0)) ?? "(missing)",
        !string.IsNullOrEmpty(cookieToken) ? "(present)" : "(missing)"
    );

    return Content("Check server logs for token diagnosis");
}

public async Task<IActionResult> OnPostUpdateAsync(
    int id,
    [FromForm] string? name,
    [FromForm] int? genreId)
{
    _logger.LogDebug(
        "Model binding received: id={Id}, name={Name}, genreId={GenreId}",
        id,
        name ?? "(null)",
        genreId?.ToString() ?? "(null)"
    );

    // Rest of handler...
}

public async Task<IActionResult> OnPostUpdateAsync(ArtistEditModel model)
{
    if (!ModelState.IsValid)
    {
        foreach (var entry in ModelState)
        {
            if (entry.Value.Errors.Any())
            {
                _logger.LogWarning(
                    "Binding/validation error for '{Key}': {Errors}",
                    entry.Key,
                    string.Join("; ", entry.Value.Errors.Select(e => 
                        e.ErrorMessage ?? e.Exception?.Message ?? "Unknown error"))
                );
            }
        }
        
        return Partial("Artists/_ArtistEditRow", model);
    }

    // Continue with valid model...
}

<!-- HTML uses 'artistName' -->
<input name="artistName" value="AC/DC" />

// Handler expects 'name' - won't bind!
public async Task<IActionResult> OnPostUpdateAsync(string name)

// Fix: Match the name
public async Task<IActionResult> OnPostUpdateAsync(string artistName)

// Or use [FromForm] with explicit name
public async Task<IActionResult> OnPostUpdateAsync([FromForm(Name = "artistName")] string name)

<!-- Without hidden field, unchecked = no value sent = null -->
<input type="checkbox" name="isActive" value="true" />

<!-- With hidden field, unchecked = "false", checked = "true" -->
<input type="hidden" name="isActive" value="false" />
<input type="checkbox" name="isActive" value="true" />

<!-- For List<int> selectedIds -->
<input type="checkbox" name="selectedIds" value="1" />
<input type="checkbox" name="selectedIds" value="2" />
<input type="checkbox" name="selectedIds" value="3" />

// Handler receives all checked values
public async Task<IActionResult> OnPostBulkDeleteAsync(List<int> selectedIds)
{
    _logger.LogDebug("Selected IDs: {Ids}", string.Join(", ", selectedIds));
    // ...
}

public async Task<IActionResult> OnPostUpdateAsync()
{
    // Log all form values
    foreach (var key in Request.Form.Keys)
    {
        _logger.LogDebug("Form[{Key}] = {Value}", key, Request.Form[key]);
    }
    
    // Log query parameters too
    foreach (var key in Request.Query.Keys)
    {
        _logger.LogDebug("Query[{Key}] = {Value}", key, Request.Query[key]);
    }
    
    // Then bind manually or use TryUpdateModelAsync
    var id = int.Parse(Request.Form["id"]!);
    var name = Request.Form["name"].ToString();
    
    // Continue with values...
}

typeof htmx

<button hx-get="/Artists?handler=Edit" ...>

document.querySelector('#my-target')

<!-- This button loads new content -->
<button hx-get="/load-more" hx-target="#container">Load More</button>

<div id="container">
    <!-- htmx loads this content -->
    <div class="item">
        <!-- This button works - htmx processes it after swap -->
        <button hx-delete="/items/1">Delete</button>
    </div>
</div>

// This bypasses htmx processing
container.innerHTML += '<button hx-delete="/items/2">Delete</button>';
// The new button won't work!

// Fix: Tell htmx to process the new content
container.innerHTML += '<button hx-delete="/items/2">Delete</button>';
htmx.process(container);

<!-- Check that this exists in _Layout.cshtml -->
<script src="~/lib/htmx/htmx.min.js"></script>

<!-- Or from CDN -->
<script src="https://unpkg.com/htmx.org@2.0.4"></script>

<!-- Problem: Button inside form triggers form submit, not htmx -->
<form action="/traditional-submit" method="post">
    <button hx-get="/htmx-action">This won't work as expected</button>
</form>

<!-- Solution 1: Use type="button" -->
<form action="/traditional-submit" method="post">
    <button type="button" hx-get="/htmx-action">Now htmx handles it</button>
</form>

<!-- Solution 2: Move button outside form -->
<form action="/traditional-submit" method="post">
    <!-- form content -->
</form>
<button hx-get="/htmx-action">Separate from form</button>

@page
@model ArtistsModel

<h1>Artists</h1>

<button hx-get="/Artists?handler=List" 
        hx-target="#artist-container">
    Load Artists
</button>

<div id="artist-container">
    <!-- Artists load here -->
</div>

@section Scripts {
    <!-- Scripts section exists but... -->
}

<!-- _Layout.cshtml - place before </body>, outside sections -->
<script src="~/lib/htmx/htmx.min.js"></script>
<script src="~/lib/hyperscript/_hyperscript.min.js"></script>

@await RenderSectionAsync("Scripts", required: false)
</body>

<!-- Generated in a loop without unique IDs -->
<tr id="artist-row">  <!-- First occurrence -->
    <td>AC/DC</td>
    <td><button hx-get="/edit/1" hx-target="#artist-row">Edit</button></td>
</tr>
<tr id="artist-row">  <!-- Duplicate! -->
    <td>Accept</td>
    <td><button hx-get="/edit/2" hx-target="#artist-row">Edit</button></td>
</tr>

@foreach (var artist in Model.Artists)
{
    <tr id="artist-row-@artist.Id">
        <td>@artist.Name</td>
        <td>
            <button hx-get="/Artists?handler=Edit&id=@artist.Id" 
                    hx-target="#artist-row-@artist.Id">
                Edit
            </button>
        </td>
    </tr>
}

// Find all elements with a given ID (should be only one!)
document.querySelectorAll('[id="artist-row"]').length
// If > 1, you have duplicate IDs

<!-- Initial state -->
<div id="modal-container"></div>

<button hx-get="/Artists?handler=CreateForm" 
        hx-target="#modal-container">
    Add Artist
</button>

<!-- Response replaces container with modal content -->
<div class="modal" id="create-modal">
    <form hx-post="/Artists?handler=Create"
          hx-target="#modal-container">  <!-- This ID no longer exists! -->
        ...
    </form>
</div>

<button hx-get="/Artists?handler=CreateForm" 
        hx-target="#modal-container"
        hx-swap="innerHTML">
    Add Artist
</button>

<div class="modal" id="create-modal">
    <form hx-post="/Artists?handler=Create"
          hx-target="#create-modal"
          hx-swap="outerHTML">
        ...
    </form>
</div>

document.body.addEventListener('htmx:configRequest', function(event) {
    const elt = event.detail.elt;
    const targetSelector = elt.getAttribute('hx-target');
    
    if (targetSelector && !targetSelector.startsWith('this') && 
        !targetSelector.startsWith('closest') && !targetSelector.startsWith('find')) {
        const target = document.querySelector(targetSelector);
        if (!target) {
            console.error('htmx target not found:', {
                selector: targetSelector,
                trigger: elt,
                suggestion: 'Check if target was removed by previous swap'
            });
        }
    }
});

<!-- Artist row partial -->
<tr id="artist-row-1">
    <td>AC/DC</td>
    <td>
        <button hx-get="/Artists?handler=Edit&id=1"
                hx-target="#artist-row-1"
                hx-swap="outerHTML">
            Edit
        </button>
    </td>
</tr>

<!-- Edit form partial (returned from server) -->
<tr id="artist-edit-1">  <!-- Different ID! -->
    <td colspan="2">
        <form hx-post="/Artists?handler=Update&id=1">
            <input name="name" value="AC/DC" />
            <button type="submit">Save</button>
            <button type="button"
                    hx-get="/Artists?handler=Cancel&id=1"
                    hx-target="#artist-row-1">  <!-- Original ID no longer exists -->
                Cancel
            </button>
        </form>
    </td>
</tr>

<!-- Option 1: Keep same ID -->
<tr id="artist-row-1">
    <td colspan="2">
        <form hx-post="/Artists?handler=Update&id=1"
              hx-target="#artist-row-1"
              hx-swap="outerHTML">
            ...
        </form>
    </td>
</tr>

<!-- Option 2: Use relative selector -->
<button type="button"
        hx-get="/Artists?handler=Cancel&id=1"
        hx-target="closest tr"
        hx-swap="outerHTML">
    Cancel
</button>

<!-- In server response -->
<span id="artist-count" hx-swap-oob="true">275</span>

document.querySelector('#artist-count')  // Must not be null

<!-- Correct: OOB at root level -->
<div>Primary content</div>
<span id="artist-count" hx-swap-oob="true">275</span>

<!-- Wrong: OOB nested inside container -->
<div>
    Primary content
    <span id="artist-count" hx-swap-oob="true">275</span>
</div>

<!-- New row (primary swap target) -->
<tr id="artist-row-276" hx-swap-oob="afterbegin:#artist-table-body">
    <td>New Artist</td>
    <td>0 albums</td>
</tr>

<!-- Count update (OOB) -->
<span id="artistCount" hx-swap-oob="true">276</span>

<span id="artist-count">275</span>  <!-- Note: kebab-case -->

<!-- Server response - match page ID exactly -->
<span id="artist-count" hx-swap-oob="true">276</span>

// Log OOB swap attempts
document.body.addEventListener('htmx:oobBeforeSwap', function(event) {
    console.log('OOB before swap:', {
        fragment: event.detail.fragment?.outerHTML?.substring(0, 100),
        target: event.detail.target,
        targetId: event.detail.target?.id
    });
});

// Log successful OOB swaps
document.body.addEventListener('htmx:oobAfterSwap', function(event) {
    console.log('OOB after swap:', {
        target: event.detail.target?.id || event.detail.target
    });
});

// Log OOB errors
document.body.addEventListener('htmx:oobErrorNoTarget', function(event) {
    console.error('OOB target not found:', {
        content: event.detail.content?.outerHTML?.substring(0, 100)
    });
});

<form id="artist-form">
    <input name="name" value="AC/DC" />
    <input name="genre" value="Rock" />
</form>

<!-- Button outside form - doesn't include form data! -->
<button hx-post="/Artists?handler=Create"
        hx-target="#result">
    Save
</button>

<form hx-post="/Artists?handler=Create" hx-target="#result">
    <input name="name" value="AC/DC" />
    <input name="genre" value="Rock" />
    <button type="submit">Save</button>
</form>

<form id="artist-form">
    <input name="name" value="AC/DC" />
    <input name="genre" value="Rock" />
</form>

<button hx-post="/Artists?handler=Create"
        hx-include="#artist-form"
        hx-target="#result">
    Save
</button>

<form id="artist-form" hx-post="/Artists?handler=Create" hx-target="#result">
    <input name="name" value="AC/DC" />
    <input name="genre" value="Rock" />
</form>

<!-- Button references form by ID -->
<button type="submit" form="artist-form">Save</button>

<!-- hx-include adds to, doesn't replace, automatic inclusion -->
<form hx-post="/save">
    <input name="included-by-form" value="yes" />
    
    <button type="submit" hx-include="#extra-data">Save</button>
</form>

<div id="extra-data">
    <input name="extra" value="also included" />
</div>

<!-- hx-include on the form itself doesn't do what you might expect -->
<form hx-post="/save" hx-include="this">  <!-- 'this' is redundant -->
    <input name="field1" value="yes" />
</form>

document.body.addEventListener('htmx:configRequest', function(event) {
    if (event.detail.verb !== 'get') {
        console.log('Form submission data:', {
            method: event.detail.verb.toUpperCase(),
            path: event.detail.path,
            parameters: event.detail.parameters,
            // Show which element triggered submission
            trigger: event.detail.elt.tagName + 
                    (event.detail.elt.id ? '#' + event.detail.elt.id : '') +
                    (event.detail.elt.name ? '[name=' + event.detail.elt.name + ']' : '')
        });
    }
});

// Run in browser console
const token = document.querySelector('input[name="__RequestVerificationToken"]');
console.log('Token element:', token);
console.log('Token value:', token?.value?.substring(0, 30) + '...');

<!-- In _Layout.cshtml -->
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery

<!-- Hidden form to provide token -->
<form id="__AntiForgeryForm" method="post" style="display:none">
    @Html.AntiForgeryToken()
</form>

// This should be in your layout or site.js
document.body.addEventListener('htmx:configRequest', function(event) {
    const token = document.querySelector('input[name="__RequestVerificationToken"]');
    if (token) {
        event.detail.headers['RequestVerificationToken'] = token.value;
    }
});

document.body.addEventListener('htmx:configRequest', function(event) {
    const token = document.querySelector('input[name="__RequestVerificationToken"]');
    if (token) {
        event.detail.headers['RequestVerificationToken'] = token.value;
        console.log('Token attached to request');
    } else {
        console.warn('NO TOKEN FOUND - request will fail validation');
    }
});

RequestVerificationToken: CfDJ8...

builder.Services.AddAntiforgery(options =>
{
    // This name MUST match what JavaScript sends
    options.HeaderName = "RequestVerificationToken";
});

[ValidateAntiForgeryToken]
public async Task<IActionResult> OnPostCreateAsync(...)

@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery

<!DOCTYPE html>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- Provide anti-forgery token for htmx requests -->
    <form id="__AntiForgeryForm" method="post" style="display:none">
        @Html.AntiForgeryToken()
    </form>
    
    <!-- page content -->
    @RenderBody()
    
    <script src="~/lib/htmx/htmx.min.js"></script>
    <script>
        // Attach anti-forgery token to all htmx requests
        document.body.addEventListener('htmx:configRequest', function(event) {
            // Only add for non-GET requests
            if (event.detail.verb === 'get') return;
            
            const token = document.querySelector('input[name="__RequestVerificationToken"]');
            if (token) {
                event.detail.headers['RequestVerificationToken'] = token.value;
            } else {
                console.error('Anti-forgery token not found. POST/PUT/DELETE will fail.');
            }
        });
    </script>
    
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "RequestVerificationToken";
});

[ValidateAntiForgeryToken]
public async Task<IActionResult> OnPostCreateAsync(string name)
{
    // Token validated automatically by attribute
    // Handler only executes if validation passes
}

// Log history push
document.body.addEventListener('htmx:pushedIntoHistory', function(event) {
    console.log('History push:', event.detail.path);
});

// Log history restore attempts
document.body.addEventListener('htmx:historyRestore', function(event) {
    console.log('History restore:', {
        path: event.detail.path,
        item: event.detail.item
    });
});

// Log history cache misses
document.body.addEventListener('htmx:historyCacheMiss', function(event) {
    console.log('History cache miss:', event.detail.path);
});

// Log history cache errors
document.body.addEventListener('htmx:historyCacheMissLoad', function(event) {
    console.log('Loading page for cache miss:', event.detail.path);
});

<!-- Search input without hx-push-url -->
<input type="text" 
       name="search"
       hx-get="/Artists?handler=List"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#artist-list">

<!-- Artist link without history support -->
<a hx-get="/Artists?handler=Detail&id=1"
   hx-target="#content">
    AC/DC
</a>

<!-- Search with URL push -->
<input type="text" 
       name="search"
       hx-get="/Artists?handler=List"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#artist-list"
       hx-push-url="true">

<!-- Detail link with URL push -->
<a hx-get="/Artists?handler=Detail&id=1"
   hx-target="#content"
   hx-push-url="true">
    AC/DC
</a>

<!-- Mark the content area for history restoration -->
<div id="content" hx-history-elt>
    <!-- Content that should be restored on back button -->
</div>

public async Task<IActionResult> OnGetAsync(string? search)
{
    // Load data with filter
    Artists = await _artistService.SearchAsync(search);
    
    // For htmx requests, return partial
    if (Request.Headers.ContainsKey("HX-Request"))
    {
        return Partial("Artists/_ArtistList", this);
    }
    
    // For direct navigation (including back button cache miss), return full page
    return Page();
}

<button _="on click document.getElementById('modal').classList.add('open')">
    Open Modal
</button>

<button _="on click add .open to #modal">
    Open Modal
</button>

<div _="on load if (count > 0) { show #results }">

<div _="on load if count > 0 show #results">

<button _="on click set #output.innerHTML to 'Count: ' + count">

<button _="on click set #output's innerHTML to `Count: ${count}`">

<div _="on load add .visible to me wait 2s remove .visible from me">

<div _="on load add .visible to me then wait 2s then remove .visible from me">

<button _="on click set document.querySelector('#count').textContent to '5'">

<!-- By ID -->
<button _="on click set #count's textContent to '5'">

<!-- By class (first match) -->
<button _="on click set .counter's textContent to '5'">

<!-- Relative to current element -->
<button _="on click set the closest <div/>'s textContent to '5'">

<!-- Using 'me' for self-reference -->
<button _="on click add .clicked to me">

<script src="~/lib/hyperscript/_hyperscript.min.js"></script>
<script>
    // Enable debug mode
    _hyperscript.config.debug = true;
</script>

<!-- Use 'log' to output values during execution -->
<button _="on click 
             log 'Button clicked'
             set x to #count's textContent
             log `Current count: ${x}`
             set #count's textContent to (x as Int) + 1
             log 'Count incremented'">
    Increment
</button>

<!-- Clicking the span also triggers the div's handler -->
<div _="on click add .selected to me">
    <span>Click me</span>
</div>

<!-- Only trigger if the click target is specifically this div -->
<div _="on click if event.target is me add .selected to me">
    <span>This click won't trigger the handler</span>
</div>

<!-- Only respond to clicks on buttons within this container -->
<div _="on click from <button/> in me
          log 'Button clicked'
          set the target's textContent to 'Clicked!'">
    <button>Click me</button>
    <button>Or me</button>
    <span>Clicking here does nothing</span>
</div>

<!-- Simple logging -->
<button _="on click log 'Clicked!'">Test</button>

<!-- Log variables -->
<button _="on click
             set count to #counter's textContent as Int
             log `Count is ${count}`
             if count > 10
                 log 'Count exceeds threshold'
             end">
    Check Count
</button>

<!-- Log event details -->
<div _="on click
          log event
          log event.target
          log event.clientX
          log event.clientY">
    Click anywhere
</div>

<form _="on submit
           log '=== Form Submit Debug ==='
           log `Target: ${event.target.id}`
           log `Form data: ${new FormData(me)}`
           -- Let the form continue
       ">

<div _="on htmx:afterswap log 'swapped'">

<div _="on htmx:AFTERSWAP log 'swapped'">

<div _="on htmx:afterSwap log 'swapped'">

<form id="artist-form"
      hx-post="/Artists?handler=Create"
      hx-target="#result"
      _="on htmx:beforeRequest
             -- Disable form during submission
             add @disabled to <input/> in me
             add @disabled to <button/> in me
             add .submitting to me
             set #submit-btn's textContent to 'Saving...'
             log 'Form submission started'
         
         on htmx:afterRequest
             -- Re-enable form
             remove @disabled from <input/> in me
             remove @disabled from <button/> in me
             remove .submitting from me
             set #submit-btn's textContent to 'Save'
             log `Request completed with status: ${event.detail.successful}`
         
         on htmx:responseError
             -- Show error state
             add .error to me
             set #error-message's textContent to 'Failed to save. Please try again.'
             show #error-message
             log `Error: ${event.detail.xhr.status}`
         
         on htmx:afterSwap
             -- Success! Close form or show confirmation
             if event.detail.successful
                 add .success to me
                 wait 1s
                 send closeModal to #modal
             end
             log 'Content swapped'">
    
    <div id="error-message" style="display: none;" class="error-text"></div>
    
    <label>
        Artist Name
        <input type="text" name="name" required />
    </label>
    
    <button type="submit" id="submit-btn">Save</button>
</form>

document.body.addEventListener('htmx:afterSwap', function(e) {
    console.log('htmx:afterSwap fired', e.detail);
});

<!-- Add logging to verify Hyperscript receives the event -->
<div _="on htmx:afterSwap log 'Hyperscript received afterSwap'">

<!-- This won't work - #other-div isn't in the event path -->
<div id="other-div" _="on htmx:afterSwap log 'Received'"></div>

<div id="content" hx-get="/load" hx-trigger="click">
    Load Content
</div>

<body _="on htmx:afterSwap log 'Swap occurred somewhere'">

<div id="content" 
     hx-get="/load" 
     hx-trigger="click"
     _="on htmx:afterSwap log 'My content was swapped'">
    Load Content
</div>

<div _="on htmx:afterSwap
          log event.detail.target
          log event.detail.xhr
          log event.detail.successful">

<div _="on htmx:afterSwap log event.detail">

┌─────────────────────────────────────────────────────────────┐
│  CLIENT SIDE                                                │
│  ┌─────────────────┐   ┌─────────────────┐                 │
│  │  User Interface │ → │  htmx/Browser   │                 │
│  │  (HTML/CSS)     │   │  (Attributes,   │                 │
│  │                 │   │   Events, DOM)  │                 │
│  └─────────────────┘   └────────┬────────┘                 │
└──────────────────────────────────┼──────────────────────────┘
                                   │ HTTP Request
                                   ▼
┌─────────────────────────────────────────────────────────────┐
│  NETWORK                                                    │
│  (Request headers, Response headers, Status codes)          │
└──────────────────────────────────┬──────────────────────────┘
                                   │
                                   ▼
┌─────────────────────────────────────────────────────────────┐
│  SERVER SIDE                                                │
│  ┌─────────────────┐   ┌─────────────────┐                 │
│  │  Razor Pages    │ → │  Services/      │                 │
│  │  (Handlers,     │   │  Database       │                 │
│  │   Partials)     │   │                 │                 │
│  └─────────────────┘   └─────────────────┘                 │
└─────────────────────────────────────────────────────────────┘

POST /Artists?handler=Update&id=1    200    text/html    245 B    23ms

<tr id="artist-row-1">
    <td>AC/DC Updated</td>
    <td>10 albums</td>
    <td>
        <button hx-get="/Artists?handler=Edit&amp;id=1" ...>Edit</button>
    </td>
</tr>

htmx.logAll();

htmx:configRequest {verb: "post", path: "/Artists?handler=Update&id=1", ...}
htmx:beforeRequest {...}
htmx:afterRequest {successful: true, ...}
htmx:beforeSwap {target: tr#artist-edit-1, ...}
htmx:afterSwap {target: tr#artist-edit-1, ...}

<tr id="artist-edit-1">
    <form hx-post="/Artists?handler=Update&id=1"
          hx-target="#artist-row-1"
          hx-swap="outerHTML">
        <input name="name" value="AC/DC Updated" />
        <button type="submit">Save</button>
    </form>
</tr>

<!-- After Save, the DOM shows: -->
<tr id="artist-edit-1">
    <tr id="artist-row-1">  <!-- Nested row! Invalid HTML -->
        <td>AC/DC Updated</td>
        ...
    </tr>
</tr>

<!-- _ArtistEditRow.cshtml -->
<tr id="artist-row-@Model.Id">
    <form hx-post="/Artists?handler=Update&id=@Model.Id"
          hx-target="#artist-row-@Model.Id"
          hx-swap="outerHTML">
        ...
    </form>
</tr>

<form hx-post="/Artists?handler=Update&id=@Model.Id"
      hx-target="closest tr"
      hx-swap="outerHTML">

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Text.Json;

namespace ChinookDashboard.Pages.Debug;

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;
    private readonly IWebHostEnvironment _environment;

    public IndexModel(ILogger<IndexModel> logger, IWebHostEnvironment environment)
    {
        _logger = logger;
        _environment = environment;
    }

    public Dictionary<string, string> HtmxHeaders { get; set; } = new();
    public Dictionary<string, string> AllHeaders { get; set; } = new();
    public string RequestInfo { get; set; } = "";

    public IActionResult OnGet()
    {
        // Only allow in development
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        CaptureRequestInfo();
        return Page();
    }

    public IActionResult OnGetEcho(string? message, int delay = 0)
    {
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        // Simulate slow response for testing
        if (delay > 0)
        {
            Thread.Sleep(Math.Min(delay, 5000)); // Max 5 seconds
        }

        var response = $@"
            <div class='echo-response'>
                <strong>Echo Response</strong>
                <p>Message: {System.Web.HttpUtility.HtmlEncode(message ?? "(none)")}</p>
                <p>Time: {DateTime.Now:HH:mm:ss.fff}</p>
                <p>Delay: {delay}ms</p>
            </div>";

        return Content(response, "text/html");
    }

    public IActionResult OnGetHeaders()
    {
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        CaptureRequestInfo();

        var html = "<div class='headers-response'>";
        html += "<h4>htmx Headers</h4><dl>";
        foreach (var header in HtmxHeaders)
        {
            html += $"<dt>{header.Key}</dt><dd>{System.Web.HttpUtility.HtmlEncode(header.Value)}</dd>";
        }
        html += "</dl>";

        html += "<h4>All Request Headers</h4><dl>";
        foreach (var header in AllHeaders.Take(20))
        {
            html += $"<dt>{header.Key}</dt><dd>{System.Web.HttpUtility.HtmlEncode(header.Value)}</dd>";
        }
        html += "</dl></div>";

        return Content(html, "text/html");
    }

    public IActionResult OnPostFormTest(string? field1, string? field2, int? numericField)
    {
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        _logger.LogDebug("Form test received: field1={F1}, field2={F2}, numeric={Num}",
            field1, field2, numericField);

        var html = $@"
            <div class='form-response'>
                <strong>Form Data Received</strong>
                <dl>
                    <dt>field1</dt><dd>{System.Web.HttpUtility.HtmlEncode(field1 ?? "(null)")}</dd>
                    <dt>field2</dt><dd>{System.Web.HttpUtility.HtmlEncode(field2 ?? "(null)")}</dd>
                    <dt>numericField</dt><dd>{numericField?.ToString() ?? "(null)"}</dd>
                </dl>
                <p>Received at: {DateTime.Now:HH:mm:ss.fff}</p>
            </div>";

        return Content(html, "text/html");
    }

    public IActionResult OnGetError(int statusCode = 500)
    {
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        return StatusCode(statusCode, $"Simulated {statusCode} error for testing");
    }

    public IActionResult OnGetOobTest()
    {
        if (!_environment.IsDevelopment())
        {
            return NotFound();
        }

        var html = @"
            <div class='primary-response'>
                <strong>Primary Response</strong>
                <p>This goes to the main target.</p>
            </div>
            <div id='oob-target-1' hx-swap-oob='true'>
                OOB Update 1: Updated at " + DateTime.Now.ToString("HH:mm:ss") + @"
            </div>
            <div id='oob-target-2' hx-swap-oob='innerHTML'>
                OOB Update 2: Content replaced at " + DateTime.Now.ToString("HH:mm:ss") + @"
            </div>";

        return Content(html, "text/html");
    }

    private void CaptureRequestInfo()
    {
        // Capture htmx-specific headers
        var htmxHeaderNames = new[] { "HX-Request", "HX-Target", "HX-Trigger", 
            "HX-Trigger-Name", "HX-Current-URL", "HX-Prompt", "HX-Boosted" };

        foreach (var name in htmxHeaderNames)
        {
            if (Request.Headers.TryGetValue(name, out var value))
            {
                HtmxHeaders[name] = value.ToString();
            }
        }

        // Capture all headers
        foreach (var header in Request.Headers)
        {
            AllHeaders[header.Key] = header.Value.ToString();
        }

        // Request info summary
        RequestInfo = JsonSerializer.Serialize(new
        {
            Method = Request.Method,
            Path = Request.Path.ToString(),
            QueryString = Request.QueryString.ToString(),
            IsHttps = Request.IsHttps,
            ContentType = Request.ContentType,
            ContentLength = Request.ContentLength
        }, new JsonSerializerOptions { WriteIndented = true });
    }
}

@page
@model ChinookDashboard.Pages.Debug.IndexModel
@{
    ViewData["Title"] = "htmx Debug Console";
}

<style>
    .debug-page {
        font-family: system-ui, -apple-system, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    .debug-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .debug-section h2 {
        margin-top: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    .debug-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 20px;
    }
    .result-box {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
        min-height: 100px;
    }
    .result-box:empty::before {
        content: 'Results will appear here...';
        color: #6c757d;
        font-style: italic;
    }
    .debug-input {
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }
    .debug-btn {
        padding: 8px 16px;
        background: #0d6efd;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    .debug-btn:hover {
        background: #0b5ed7;
    }
    .debug-btn.secondary {
        background: #6c757d;
    }
    .debug-btn.danger {
        background: #dc3545;
    }
    .event-log {
        font-family: monospace;
        font-size: 12px;
        background: #1e1e1e;
        color: #d4d4d4;
        padding: 15px;
        border-radius: 4px;
        max-height: 300px;
        overflow-y: auto;
    }
    .event-log .event {
        margin: 2px 0;
        padding: 2px 5px;
    }
    .event-log .event-request { color: #569cd6; }
    .event-log .event-response { color: #4ec9b0; }
    .event-log .event-swap { color: #dcdcaa; }
    .event-log .event-error { color: #f14c4c; }
    .config-display {
        font-family: monospace;
        font-size: 12px;
        background: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        max-height: 200px;
        overflow-y: auto;
    }
    .form-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
    }
    .form-row label {
        min-width: 100px;
    }
    dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px 15px;
    }
    dt {
        font-weight: bold;
        color: #495057;
    }
    dd {
        margin: 0;
        word-break: break-all;
    }
    .echo-response, .form-response, .headers-response, .primary-response {
        padding: 10px;
        background: #e7f5ff;
        border-radius: 4px;
    }
    .htmx-request {
        opacity: 0.5;
    }
</style>

<div class="debug-page">
    <h1>🔧 htmx Debug Console</h1>
    <p>Test htmx features and diagnose issues. <strong>Development only.</strong></p>

    <div class="debug-grid">
        <!-- Echo Test -->
        <div class="debug-section">
            <h2>Echo Test</h2>
            <p>Test basic htmx GET requests</p>
            
            <div class="form-row">
                <label for="echo-message">Message:</label>
                <input type="text" 
                       id="echo-message" 
                       name="message"
                       class="debug-input" 
                       placeholder="Type something..."
                       value="Hello htmx!" />
            </div>
            <div class="form-row">
                <label for="echo-delay">Delay (ms):</label>
                <input type="number" 
                       id="echo-delay" 
                       name="delay"
                       class="debug-input" 
                       value="0"
                       min="0"
                       max="5000"
                       style="width: 100px;" />
            </div>
            <div class="form-row">
                <button class="debug-btn"
                        hx-get="/Debug?handler=Echo"
                        hx-include="#echo-message, #echo-delay"
                        hx-target="#echo-result">
                    Send Echo
                </button>
            </div>
            <div id="echo-result" class="result-box"></div>
        </div>

        <!-- Form Test -->
        <div class="debug-section">
            <h2>Form Test</h2>
            <p>Test POST requests with form data</p>
            
            <form hx-post="/Debug?handler=FormTest" hx-target="#form-result">
                <div class="form-row">
                    <label for="field1">Field 1:</label>
                    <input type="text" id="field1" name="field1" class="debug-input" value="Test Value" />
                </div>
                <div class="form-row">
                    <label for="field2">Field 2:</label>
                    <input type="text" id="field2" name="field2" class="debug-input" />
                </div>
                <div class="form-row">
                    <label for="numericField">Number:</label>
                    <input type="number" id="numericField" name="numericField" class="debug-input" value="42" />
                </div>
                <div class="form-row">
                    <button type="submit" class="debug-btn">Submit Form</button>
                </div>
            </form>
            <div id="form-result" class="result-box"></div>
        </div>

        <!-- Headers Inspection -->
        <div class="debug-section">
            <h2>Headers Inspection</h2>
            <p>View htmx request headers sent to server</p>
            
            <div class="form-row">
                <button class="debug-btn"
                        hx-get="/Debug?handler=Headers"
                        hx-target="#headers-result">
                    Inspect Headers
                </button>
            </div>
            <div id="headers-result" class="result-box"></div>
        </div>

        <!-- OOB Test -->
        <div class="debug-section">
            <h2>Out-of-Band Updates</h2>
            <p>Test OOB swap functionality</p>
            
            <div class="form-row">
                <button class="debug-btn"
                        hx-get="/Debug?handler=OobTest"
                        hx-target="#oob-primary">
                    Trigger OOB Update
                </button>
            </div>
            <div id="oob-primary" class="result-box">Primary target</div>
            <div class="form-row" style="margin-top: 10px;">
                <div id="oob-target-1" class="result-box" style="flex: 1;">OOB Target 1</div>
                <div id="oob-target-2" class="result-box" style="flex: 1;">OOB Target 2</div>
            </div>
        </div>

        <!-- Error Simulation -->
        <div class="debug-section">
            <h2>Error Simulation</h2>
            <p>Test error handling</p>
            
            <div class="form-row">
                <button class="debug-btn danger"
                        hx-get="/Debug?handler=Error&statusCode=400"
                        hx-target="#error-result">
                    Trigger 400
                </button>
                <button class="debug-btn danger"
                        hx-get="/Debug?handler=Error&statusCode=404"
                        hx-target="#error-result">
                    Trigger 404
                </button>
                <button class="debug-btn danger"
                        hx-get="/Debug?handler=Error&statusCode=500"
                        hx-target="#error-result">
                    Trigger 500
                </button>
            </div>
            <div id="error-result" class="result-box"></div>
        </div>

        <!-- htmx Config Display -->
        <div class="debug-section">
            <h2>htmx Configuration</h2>
            <p>Current htmx settings</p>
            
            <div class="config-display" id="htmx-config"></div>
            <div class="form-row" style="margin-top: 10px;">
                <button class="debug-btn secondary" onclick="refreshConfig()">
                    Refresh Config
                </button>
                <button class="debug-btn secondary" onclick="htmx.logAll(); alert('Logging enabled. Check console.')">
                    Enable logAll()
                </button>
            </div>
        </div>
    </div>

    <!-- Event Log -->
    <div class="debug-section">
        <h2>Event Log</h2>
        <p>Real-time htmx event monitoring</p>
        
        <div class="form-row">
            <button class="debug-btn secondary" onclick="clearEventLog()">Clear Log</button>
            <label>
                <input type="checkbox" id="log-all-events" checked onchange="toggleEventLogging(this.checked)" />
                Log all events
            </label>
        </div>
        <div id="event-log" class="event-log">
            <div class="event">Event log started...</div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // Display htmx config
        function refreshConfig() {
            const configDisplay = document.getElementById('htmx-config');
            configDisplay.textContent = JSON.stringify(htmx.config, null, 2);
        }
        refreshConfig();

        // Event logging
        const eventLog = document.getElementById('event-log');
        let loggingEnabled = true;

        function logEvent(name, detail, className) {
            if (!loggingEnabled) return;
            
            const entry = document.createElement('div');
            entry.className = 'event ' + className;
            
            const time = new Date().toLocaleTimeString('en-US', { 
                hour12: false, 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit',
                fractionalSecondDigits: 3 
            });
            
            let info = '';
            if (detail.path) info += ` path=${detail.path}`;
            if (detail.target?.id) info += ` target=#${detail.target.id}`;
            if (detail.xhr?.status) info += ` status=${detail.xhr.status}`;
            if (detail.successful !== undefined) info += ` success=${detail.successful}`;
            
            entry.textContent = `[${time}] ${name}${info}`;
            eventLog.appendChild(entry);
            eventLog.scrollTop = eventLog.scrollHeight;
        }

        function clearEventLog() {
            eventLog.innerHTML = '<div class="event">Log cleared...</div>';
        }

        function toggleEventLogging(enabled) {
            loggingEnabled = enabled;
            logEvent(enabled ? 'Logging enabled' : 'Logging disabled', {}, '');
        }

        // htmx event listeners
        const events = [
            { name: 'htmx:configRequest', class: 'event-request' },
            { name: 'htmx:beforeRequest', class: 'event-request' },
            { name: 'htmx:afterRequest', class: 'event-response' },
            { name: 'htmx:beforeSwap', class: 'event-swap' },
            { name: 'htmx:afterSwap', class: 'event-swap' },
            { name: 'htmx:responseError', class: 'event-error' },
            { name: 'htmx:sendError', class: 'event-error' },
            { name: 'htmx:timeout', class: 'event-error' },
        ];

        events.forEach(({ name, class: className }) => {
            document.body.addEventListener(name, (e) => {
                logEvent(name, e.detail, className);
            });
        });

        // Log OOB events
        document.body.addEventListener('htmx:oobAfterSwap', (e) => {
            logEvent('htmx:oobAfterSwap', { target: e.detail.target }, 'event-swap');
        });
    </script>
}

using System.Diagnostics;

namespace ChinookDashboard.Middleware;

public class HtmxErrorLoggingMiddleware
{
    private readonly RequestDelegate _next;
    private readonly ILogger<HtmxErrorLoggingMiddleware> _logger;

    public HtmxErrorLoggingMiddleware(RequestDelegate next, ILogger<HtmxErrorLoggingMiddleware> logger)
    {
        _next = next;
        _logger = logger;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        // Only process htmx requests
        if (!context.Request.Headers.ContainsKey("HX-Request"))
        {
            await _next(context);
            return;
        }

        var requestId = Activity.Current?.Id ?? context.TraceIdentifier;
        var stopwatch = Stopwatch.StartNew();

        // Capture request details before processing
        var requestDetails = new HtmxRequestDetails
        {
            RequestId = requestId,
            Method = context.Request.Method,
            Path = context.Request.Path.ToString(),
            QueryString = SanitizeQueryString(context.Request.QueryString.ToString()),
            Target = context.Request.Headers["HX-Target"].FirstOrDefault(),
            Trigger = context.Request.Headers["HX-Trigger"].FirstOrDefault(),
            CurrentUrl = context.Request.Headers["HX-Current-URL"].FirstOrDefault(),
            UserAgent = context.Request.Headers["User-Agent"].FirstOrDefault()?[..Math.Min(100, context.Request.Headers["User-Agent"].FirstOrDefault()?.Length ?? 0)]
        };

        try
        {
            await _next(context);

            stopwatch.Stop();

            // Log 4xx and 5xx responses
            if (context.Response.StatusCode >= 400)
            {
                _logger.LogWarning(
                    "htmx request failed | RequestId: {RequestId} | Status: {StatusCode} | " +
                    "Method: {Method} | Path: {Path} | Target: {Target} | Duration: {Duration}ms",
                    requestDetails.RequestId,
                    context.Response.StatusCode,
                    requestDetails.Method,
                    requestDetails.Path,
                    requestDetails.Target ?? "(none)",
                    stopwatch.ElapsedMilliseconds
                );
            }
        }
        catch (Exception ex)
        {
            stopwatch.Stop();

            // Log exceptions with full context
            _logger.LogError(ex,
                "htmx request exception | RequestId: {RequestId} | Method: {Method} | " +
                "Path: {Path} | Target: {Target} | Trigger: {Trigger} | Duration: {Duration}ms",
                requestDetails.RequestId,
                requestDetails.Method,
                requestDetails.Path,
                requestDetails.Target ?? "(none)",
                requestDetails.Trigger ?? "(none)",
                stopwatch.ElapsedMilliseconds
            );

            throw;
        }
    }

    private static string SanitizeQueryString(string queryString)
    {
        // Remove potentially sensitive parameters
        var sensitiveParams = new[] { "password", "token", "key", "secret", "auth" };
        
        if (string.IsNullOrEmpty(queryString)) return queryString;

        foreach (var param in sensitiveParams)
        {
            // Simple replacement - in production, use proper query string parsing
            queryString = System.Text.RegularExpressions.Regex.Replace(
                queryString,
                $@"({param}=)[^&]*",
                "$1[REDACTED]",
                System.Text.RegularExpressions.RegexOptions.IgnoreCase
            );
        }

        return queryString;
    }

    private class HtmxRequestDetails
    {
        public string RequestId { get; set; } = "";
        public string Method { get; set; } = "";
        public string Path { get; set; } = "";
        public string QueryString { get; set; } = "";
        public string? Target { get; set; }
        public string? Trigger { get; set; }
        public string? CurrentUrl { get; set; }
        public string? UserAgent { get; set; }
    }
}

public static class HtmxErrorLoggingMiddlewareExtensions
{
    public static IApplicationBuilder UseHtmxErrorLogging(this IApplicationBuilder builder)
    {
        return builder.UseMiddleware<HtmxErrorLoggingMiddleware>();
    }
}

using Serilog;

Log.Logger = new LoggerConfiguration()
    .MinimumLevel.Information()
    .MinimumLevel.Override("Microsoft.AspNetCore", LogEventLevel.Warning)
    .Enrich.FromLogContext()
    .Enrich.WithProperty("Application", "ChinookDashboard")
    .WriteTo.Console()
    .WriteTo.File("logs/htmx-.log", 
        rollingInterval: RollingInterval.Day,
        outputTemplate: "{Timestamp:yyyy-MM-dd HH:mm:ss.fff} [{Level:u3}] {Message:lj}{NewLine}{Exception}")
    .CreateLogger();

builder.Host.UseSerilog();

(function() {
    'use strict';

    // Configuration
    const config = {
        endpoint: '/api/client-errors',
        maxErrorsPerMinute: 10,
        includeStack: false, // Don't send stack traces in production
        sessionId: generateSessionId()
    };

    // Rate limiting
    let errorCount = 0;
    setInterval(() => { errorCount = 0; }, 60000);

    function generateSessionId() {
        return 'sess_' + Math.random().toString(36).substring(2, 15);
    }

    function shouldReport() {
        errorCount++;
        return errorCount <= config.maxErrorsPerMinute;
    }

    function sanitizeUrl(url) {
        if (!url) return url;
        try {
            const parsed = new URL(url, window.location.origin);
            // Remove sensitive query parameters
            ['token', 'key', 'password', 'auth', 'secret'].forEach(param => {
                if (parsed.searchParams.has(param)) {
                    parsed.searchParams.set(param, '[REDACTED]');
                }
            });
            return parsed.pathname + parsed.search;
        } catch {
            return url;
        }
    }

    function reportError(errorData) {
        if (!shouldReport()) {
            console.warn('Error reporting rate limited');
            return;
        }

        // Sanitize data before sending
        const sanitizedData = {
            type: errorData.type,
            message: errorData.message?.substring(0, 500), // Limit message length
            path: sanitizeUrl(errorData.path),
            target: errorData.target,
            status: errorData.status,
            timestamp: new Date().toISOString(),
            sessionId: config.sessionId,
            pageUrl: sanitizeUrl(window.location.href),
            userAgent: navigator.userAgent.substring(0, 200)
        };

        // Send via beacon (doesn't block page unload)
        if (navigator.sendBeacon) {
            navigator.sendBeacon(config.endpoint, JSON.stringify(sanitizedData));
        } else {
            // Fallback to fetch
            fetch(config.endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(sanitizedData),
                keepalive: true
            }).catch(() => {}); // Ignore send failures
        }
    }

    // htmx error handling
    document.body.addEventListener('htmx:responseError', function(event) {
        reportError({
            type: 'htmx:responseError',
            message: `HTTP ${event.detail.xhr?.status}: ${event.detail.xhr?.statusText}`,
            path: event.detail.pathInfo?.requestPath,
            target: event.detail.target?.id,
            status: event.detail.xhr?.status
        });
    });

    document.body.addEventListener('htmx:sendError', function(event) {
        reportError({
            type: 'htmx:sendError',
            message: 'Network request failed',
            path: event.detail.pathInfo?.requestPath,
            target: event.detail.target?.id
        });
    });

    document.body.addEventListener('htmx:timeout', function(event) {
        reportError({
            type: 'htmx:timeout',
            message: 'Request timed out',
            path: event.detail.pathInfo?.requestPath,
            target: event.detail.target?.id
        });
    });

    // Expose for manual error reporting
    window.reportClientError = reportError;
})();

// In a minimal API or controller
app.MapPost("/api/client-errors", async (
    HttpContext context,
    ILogger<Program> logger) =>
{
    try
    {
        using var reader = new StreamReader(context.Request.Body);
        var body = await reader.ReadToEndAsync();
        
        // Parse and validate
        var error = JsonSerializer.Deserialize<ClientErrorReport>(body);
        if (error == null) return Results.BadRequest();

        // Log with structured data
        logger.LogWarning(
            "Client-side error | Type: {Type} | Message: {Message} | Path: {Path} | " +
            "Status: {Status} | SessionId: {SessionId}",
            error.Type,
            error.Message,
            error.Path,
            error.Status,
            error.SessionId
        );

        return Results.Ok();
    }
    catch
    {
        return Results.BadRequest();
    }
});

public record ClientErrorReport(
    string Type,
    string? Message,
    string? Path,
    string? Target,
    int? Status,
    string? Timestamp,
    string? SessionId,
    string? PageUrl,
    string? UserAgent
);

var builder = WebApplication.CreateBuilder(args);

// Add services
builder.Services.AddRazorPages();

// Add feature flags for debugging
builder.Services.Configure<DebugOptions>(
    builder.Configuration.GetSection("Debug"));

var app = builder.Build();

// Environment-specific middleware
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseHtmxLogging(); // Verbose logging in development
    
    // Map debug endpoints only in development
    app.MapRazorPages();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
    app.UseHtmxErrorLogging(); // Error-only logging in production
    
    // Exclude debug pages in production
    app.MapRazorPages().RequireAuthorization();
}

// Configuration class
public class DebugOptions
{
    public bool EnableClientLogging { get; set; }
    public bool EnableVerboseErrors { get; set; }
    public bool EnablePerformanceMetrics { get; set; }
}

@inject IWebHostEnvironment Environment
@inject IOptions<DebugOptions> DebugOptions

<!-- htmx -->
<script src="~/lib/htmx/htmx.min.js"></script>

@if (Environment.IsDevelopment())
{
    <script>
        // Full debug mode in development
        htmx.logAll();
        console.log('%c[htmx] Debug mode enabled', 'color: #3b82f6; font-weight: bold;');
    </script>
}
else if (DebugOptions.Value.EnableClientLogging)
{
    <script>
        // Limited logging in production when enabled via config
        document.body.addEventListener('htmx:responseError', function(e) {
            console.error('htmx error:', e.detail.xhr?.status, e.detail.pathInfo?.requestPath);
        });
    </script>
}

@if (Environment.IsDevelopment() || DebugOptions.Value.EnablePerformanceMetrics)
{
    <script>
        // Performance timing
        document.body.addEventListener('htmx:afterRequest', function(e) {
            const duration = e.detail.xhr?.getResponseHeader('X-Request-Duration');
            if (duration) {
                console.log(`[htmx] ${e.detail.pathInfo?.requestPath}: ${duration}ms`);
            }
        });
    </script>
}

{
  "Debug": {
    "EnableClientLogging": false,
    "EnableVerboseErrors": false,
    "EnablePerformanceMetrics": false
  }
}

{
  "Debug": {
    "EnableClientLogging": true,
    "EnableVerboseErrors": true,
    "EnablePerformanceMetrics": true
  }
}

chap21/
├── ChinookDashboard/
│   ├── Middleware/
│   │   ├── HtmxLoggingMiddleware.cs
│   │   └── HtmxErrorLoggingMiddleware.cs
│   ├── Extensions/
│   │   └── PartialResultExtensions.cs
│   ├── Pages/
│   │   └── Debug/
│   │       ├── Index.cshtml
│   │       └── Index.cshtml.cs
│   └── wwwroot/
│       └── js/
│           ├── htmx-debug.js
│           └── error-reporting.js
└── README.md