first commit

vite-plugins/ErrorOverlay.js

@@ -0,0 +1,55 @@
+// Make HTMLElement available in non-browser environments
+const { HTMLElement = class {} } = globalThis;
+
+export class ErrorOverlay extends HTMLElement {
+	static getOverlayHTML() {
+		return `
+      <div>
+			</div>
+    `;
+	}
+	close() {
+		this.parentNode?.removeChild(this);
+	}
+
+	static sendErrorToParent(error, title, details, componentName) {
+		// Send error to parent using framewire
+		if (globalThis.window?.parent) {
+
+			try {
+				globalThis.window.parent?.postMessage({
+					type: "app_error",
+					error: { title, details, componentName, originalError: error }
+				}, "*");
+			} catch (error) {
+				console.warn('Failed to send error to iframe parent:', error?.message);
+			}
+		}
+	}
+
+	constructor(error) {
+		super(error)
+
+		const stack = error?.stack;
+		let componentName = stack?.match(/at\s+(\w+)\s+\(eval/)?.[1];
+		if (componentName === 'eval') {
+			componentName = null;
+		}
+		const title = componentName ? `in ${componentName}: ${error.message?.toString()}` : error.message?.toString();
+		const details = JSON.stringify(error);
+
+		// Call editor frame with the error (via post message)
+		ErrorOverlay.sendErrorToParent(error, title, details, componentName);
+
+		// Create the overlay element using HTML template
+		const overlay = document.createElement('div');
+		overlay.innerHTML = ErrorOverlay.getOverlayHTML();
+
+		// Add to DOM
+		document.body.appendChild(overlay);
+	}
+}
+
+
+// vite/react-plugin transpiles classes with _SomeClass, so we need to replace all _ErrorOverlay with ErrorOverlay
+export const errorOverlayCode = ErrorOverlay.toString().replaceAll('_ErrorOverlay', 'ErrorOverlay');