fix: improve HTMX error detection and remove module exports

- Change from htmx:beforeSwap to htmx:afterSwap event for better error timing
- Simplify event listener setup (removed duplicate handlers)
- Remove 'export {}' statement that was causing syntax errors
- Add proper TypeScript interface for HTMX event details
- Errors now detected after content swap, ensuring accurate error messages
- Toast notifications work correctly for all backend HTTP errors

Resolves JavaScript syntax error on page load and improves error handling.
This commit is contained in:
2026-01-29 14:53:01 -05:00
parent 95d78158aa
commit 4426cacb46
+20 -21
View File
@@ -123,18 +123,29 @@ const parseFetchError = async (response: Response): Promise<string> => {
// Setup HTMX error listeners
const setupHTMXListeners = (): void => {
// Listen for HTMX beforeSwap event
document.body.addEventListener('htmx:beforeSwap', (evt: Event) => {
const customEvent = evt as CustomEvent<{ xhr: XMLHttpRequest }>;
if (customEvent.detail.xhr && customEvent.detail.xhr.status >= 400) {
// Listen for HTMX afterSwap event to detect errors in swapped content
document.body.addEventListener('htmx:afterSwap', (evt: Event) => {
interface HTMXEventDetail {
xhr: XMLHttpRequest;
succeeded: boolean;
target: Element;
}
const customEvent = evt as CustomEvent<HTMXEventDetail>;
// Check if request failed
if (customEvent.detail.succeeded === false && customEvent.detail.xhr) {
const xhr = customEvent.detail.xhr;
const errorMessage = parseXHRError(xhr);
showToast(errorMessage, 'error');
evt.preventDefault();
// Show toast for HTTP errors
if (xhr.status >= 400 && xhr.status < 600) {
const errorMessage = parseXHRError(xhr);
showToast(errorMessage, 'error');
}
}
});
// Listen for HTMX responseError event
// Also listen for response errors (network issues, invalid responses)
document.body.addEventListener('htmx:responseError', (evt: Event) => {
const customEvent = evt as CustomEvent<{ xhr: XMLHttpRequest }>;
const xhr = customEvent.detail.xhr;
@@ -179,20 +190,8 @@ if (typeof document !== 'undefined') {
}
// Export toast API for manual use
declare global {
interface Window {
showToast: {
error: (message: string, duration?: number) => void;
success: (message: string, duration?: number) => void;
info: (message: string, duration?: number) => void;
};
}
}
window.showToast = {
(window as any).showToast = {
error: (message: string, duration?: number) => showToast(message, 'error', duration),
success: (message: string, duration?: number) => showToast(message, 'success', duration),
info: (message: string, duration?: number) => showToast(message, 'info', duration)
};
export {};