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:
+20
-21
@@ -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 {};
|
||||
|
||||
Reference in New Issue
Block a user