@absolutejs/absolute 0.15.8 → 0.15.10

package/dist/dev/client/errorOverlay.ts

@@ -3,6 +3,7 @@
 import type { ErrorOverlayOptions } from '../../../types/client';
 
 let errorOverlayElement: HTMLDivElement | null = null;
+let currentOverlayKind: 'compilation' | 'runtime' | null = null;
 
 const frameworkLabels: Record<string, string> = {
 	angular: 'Angular',
@@ -26,13 +27,32 @@ const frameworkColors: Record<string, string> = {
 	vue: '#42b883'
 };
 
-export const hideErrorOverlay = () => {
+const removeOverlayElement = () => {
 	if (errorOverlayElement && errorOverlayElement.parentNode) {
 		errorOverlayElement.parentNode.removeChild(errorOverlayElement);
-		errorOverlayElement = null;
 	}
+	errorOverlayElement = null;
+	currentOverlayKind = null;
+};
+
+export const hideErrorOverlay = () => {
+	const elm = errorOverlayElement;
+	if (!elm || !elm.parentNode) {
+		removeOverlayElement();
+		return;
+	}
+	elm.style.transition = 'opacity 150ms ease-out';
+	elm.style.opacity = '0';
+	errorOverlayElement = null;
+	currentOverlayKind = null;
+	setTimeout(() => {
+		if (elm.parentNode) elm.parentNode.removeChild(elm);
+	}, 150);
 };
 
+export const isRuntimeErrorOverlay = (): boolean =>
+	currentOverlayKind === 'runtime';
+
 export const showErrorOverlay = (opts: ErrorOverlayOptions) => {
 	const message = opts.message || 'Build failed';
 	const file = opts.file;
@@ -43,7 +63,8 @@ export const showErrorOverlay = (opts: ErrorOverlayOptions) => {
 	const frameworkLabel = frameworkLabels[framework] || framework;
 	const accent = frameworkColors[framework] || '#94a3b8';
 
-	hideErrorOverlay();
+	removeOverlayElement();
+	currentOverlayKind = opts.kind || 'compilation';
 
 	const overlay = document.createElement('div');
 	overlay.id = 'absolutejs-error-overlay';
@@ -63,7 +84,9 @@ export const showErrorOverlay = (opts: ErrorOverlayOptions) => {
 		accent +
 		';color:#fff;opacity:0.95;box-shadow:0 2px 4px rgba(0,0,0,0.2);">' +
 		frameworkLabel +
-		'</span></div><span style="color:#94a3b8;font-size:13px;font-weight:500;">Compilation Error</span>';
+		'</span></div><span style="color:#94a3b8;font-size:13px;font-weight:500;">' +
+		(opts.kind === 'runtime' ? 'Runtime Error' : 'Compilation Error') +
+		'</span>';
 	card.appendChild(header);
 
 	const content = document.createElement('div');

package/dist/dev/client/handlers/react.ts

@@ -3,6 +3,7 @@
    Code splitting ensures React lives in a shared chunk that stays cached,
    so dynamic import of the rebuilt entry reuses the same React instance. */
 
+import { hideErrorOverlay } from '../errorOverlay';
 import { detectCurrentFramework } from '../frameworkDetect';
 
 export const handleReactUpdate = (message: {
@@ -39,6 +40,11 @@ export const handleReactUpdate = (message: {
 		import(newUrl + '?t=' + Date.now())
 			.then(() => {
 				refreshRuntime.performReactRefresh();
+				if (window.__ERROR_BOUNDARY__) {
+					window.__ERROR_BOUNDARY__.reset();
+				} else {
+					hideErrorOverlay();
+				}
 			})
 			.catch((err) => {
 				console.warn(

package/dist/dev/client/handlers/rebuild.ts

@@ -1,6 +1,10 @@
 /* Rebuild, manifest, module-update, and error handlers */
 
-import { hideErrorOverlay, showErrorOverlay } from '../errorOverlay';
+import {
+	hideErrorOverlay,
+	isRuntimeErrorOverlay,
+	showErrorOverlay
+} from '../errorOverlay';
 
 export const handleManifest = (message: {
 	data: {
@@ -29,7 +33,9 @@ export const handleRebuildComplete = (message: {
 		manifest?: Record<string, string>;
 	};
 }) => {
-	hideErrorOverlay();
+	if (!isRuntimeErrorOverlay()) {
+		hideErrorOverlay();
+	}
 	if (window.__HMR_MANIFEST__) {
 		window.__HMR_MANIFEST__ = message.data.manifest;
 	}

package/dist/dev/client/hmrClient.ts

@@ -5,6 +5,7 @@ import '../../../types/client'; // Window global type extensions
 
 import { hmrState } from '../../../types/client';
 import { detectCurrentFramework } from './frameworkDetect';
+import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
 import { handleReactUpdate } from './handlers/react';
 import { handleHTMLUpdate, handleScriptUpdate } from './handlers/html';
 import { handleHTMXUpdate } from './handlers/htmx';
@@ -34,6 +35,31 @@ if (typeof window !== 'undefined') {
 	}
 }
 
+// Catch uncaught runtime errors and show the error overlay
+window.addEventListener('error', function (evt) {
+	if (!evt.error) return;
+	showErrorOverlay({
+		framework: detectCurrentFramework() || undefined,
+		kind: 'runtime',
+		message:
+			evt.error instanceof Error
+				? evt.error.stack || evt.error.message
+				: String(evt.error)
+	});
+});
+
+window.addEventListener('unhandledrejection', function (evt) {
+	if (!evt.reason) return;
+	showErrorOverlay({
+		framework: detectCurrentFramework() || undefined,
+		kind: 'runtime',
+		message:
+			evt.reason instanceof Error
+				? evt.reason.stack || evt.reason.message
+				: String(evt.reason)
+	});
+});
+
 // Prevent multiple WebSocket connections
 if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 	// Determine WebSocket URL
@@ -105,6 +131,7 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 					break;
 
 				case 'module-update':
+					hideErrorOverlay();
 					handleModuleUpdate(message);
 					break;
 
@@ -113,22 +140,27 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 					break;
 
 				case 'script-update':
+					hideErrorOverlay();
 					handleScriptUpdate(message);
 					break;
 
 				case 'html-update':
+					hideErrorOverlay();
 					handleHTMLUpdate(message);
 					break;
 
 				case 'htmx-update':
+					hideErrorOverlay();
 					handleHTMXUpdate(message);
 					break;
 
 				case 'svelte-update':
+					hideErrorOverlay();
 					handleSvelteUpdate(message);
 					break;
 
 				case 'vue-update':
+					hideErrorOverlay();
 					handleVueUpdate(message);
 					break;
 
@@ -195,6 +227,7 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 			if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
 			if (hmrState.reconnectTimeout)
 				clearTimeout(hmrState.reconnectTimeout);
+
 			return;
 		}
 

package/dist/index.js

@@ -959,6 +959,7 @@ var devClientDir3 = (() => {
     return fromSource;
   return resolve3(import.meta.dir, "./dev/client");
 })();
+var errorOverlayPath = join3(devClientDir3, "errorOverlay.ts").replace(/\\/g, "/");
 var hmrClientPath3 = join3(devClientDir3, "hmrClient.ts").replace(/\\/g, "/");
 var refreshSetupPath = join3(devClientDir3, "reactRefreshSetup.ts").replace(/\\/g, "/");
 var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory, isDev = false) => {
@@ -976,13 +977,55 @@ var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory,
       `window.__HMR_FRAMEWORK__ = "react";`,
       `window.__REACT_COMPONENT_KEY__ = "${componentName}Index";`,
       `import '${refreshSetupPath}';`,
-      `import '${hmrClientPath3}';
+      `import '${hmrClientPath3}';`,
+      `import { showErrorOverlay, hideErrorOverlay } from '${errorOverlayPath}';
+`
+    ] : [];
+    const reactImports = isDev ? [
+      `import { hydrateRoot, createRoot } from 'react-dom/client';`,
+      `import { createElement, Component } from 'react';`
+    ] : [
+      `import { hydrateRoot, createRoot } from 'react-dom/client';`,
+      `import { createElement } from 'react';`
+    ];
+    const errorBoundaryDef = isDev ? [
+      `
+// Dev-only Error Boundary to catch React render errors`,
+      `class ErrorBoundary extends Component {`,
+      `	constructor(props) {`,
+      `		super(props);`,
+      `		this.state = { hasError: false };`,
+      `		window.__ERROR_BOUNDARY__ = this;`,
+      `	}`,
+      `	static getDerivedStateFromError() {`,
+      `		return { hasError: true };`,
+      `	}`,
+      `	componentDidCatch(error) {`,
+      `		showErrorOverlay({`,
+      `			framework: 'react',`,
+      `			kind: 'runtime',`,
+      `			message: error && error.stack ? error.stack : String(error)`,
+      `		});`,
+      `	}`,
+      `	componentDidUpdate(prevProps, prevState) {`,
+      `		if (prevState.hasError && !this.state.hasError) {`,
+      `			hideErrorOverlay();`,
+      `		}`,
+      `	}`,
+      `	reset() {`,
+      `		this.setState({ hasError: false });`,
+      `	}`,
+      `	render() {`,
+      `		if (this.state.hasError) return null;`,
+      ``,
+      `		return this.props.children;`,
+      `	}`,
+      `}
 `
     ] : [];
     const content = [
       ...hmrPreamble,
-      `import { hydrateRoot, createRoot } from 'react-dom/client';`,
-      `import { createElement } from 'react';`,
+      ...reactImports,
       `import type { ComponentType } from 'react'`,
       `import { ${componentName} } from '../pages/${componentName}';
 `,
@@ -996,6 +1039,7 @@ var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory,
       `	}`,
       `}
 `,
+      ...errorBoundaryDef,
       `// Hydration with error handling and fallback`,
       `const isDev = ${isDev};`,
       `const componentPath = '../pages/${componentName}';
@@ -1070,7 +1114,7 @@ var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory,
 `,
       `		// Render into the same root container when falling back to client-only`,
       `		const root = createRoot(container);`,
-      `		root.render(createElement(${componentName}, mergedProps));`,
+      `		root.render(${isDev ? `createElement(ErrorBoundary, null, createElement(${componentName}, mergedProps))` : `createElement(${componentName}, mergedProps)`});`,
       `		window.__REACT_ROOT__ = root;`,
       `		window.__HMR_CLIENT_ONLY_MODE__ = true;`,
       `	} catch (fallbackError) {`,
@@ -1116,7 +1160,7 @@ var generateReactIndexFiles = async (reactPagesDirectory, reactIndexesDirectory,
       `		// Use onRecoverableError to catch hydration errors (React 19)`,
       `		root = hydrateRoot(`,
       `			container,`,
-      `			createElement(${componentName}, mergedProps),`,
+      `			${isDev ? `createElement(ErrorBoundary, null, createElement(${componentName}, mergedProps))` : `createElement(${componentName}, mergedProps)`},`,
       `			{`,
       `				onRecoverableError: (error) => {`,
       `					// Check if this is a hydration error (isHydrationError filters out whitespace-only head mismatches)`,
@@ -2886,7 +2930,6 @@ var triggerRebuild = async (state, config, onRebuildComplete, filesToRebuild) =>
       options: {
         ...config.options,
         injectHMR: true,
-        preserveIntermediateFiles: true,
         throwOnError: true
       }
     });
@@ -3322,8 +3365,7 @@ var devBuild = async (config) => {
     ...config,
     options: {
       ...config.options,
-      injectHMR: true,
-      preserveIntermediateFiles: true
+      injectHMR: true
     }
   });
   if (!manifest || Object.keys(manifest).length === 0) {
@@ -3594,5 +3636,5 @@ export {
   BUN_BUILD_WARNING_SUPPRESSION
 };
 
-//# debugId=8FDC61834737AD4664756E2164756E21
+//# debugId=D00BE7A74B5C034564756E2164756E21
 //# sourceMappingURL=index.js.map