@nine-lab/nine-mu 0.1.335 → 0.1.337

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.335",
+  "version": "0.1.337",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/public/css/nine-mu.css

@@ -943,7 +943,7 @@
 }
 
 :host(nine-exception-hook) {
-	display: block;
+	display: flex;
 	width: 100%;
 	height: 100%;
 	color: inherit;

package/src/components/exception/ExceptionHook.js

@@ -11,11 +11,10 @@ export class ExceptionHook extends HTMLElement {
 		this.attachShadow({ mode: 'open' });
 	}
 
+	// src/components/exception/ExceptionHook.js 내부 수정
+
 	connectedCallback() {
-		// 기본 스켈레톤 마크업 렌더링
 		this.#renderer();
-
-		// 정적 외부 스타일시트 링크 안전하게 결합
 		this.#injectShadowStylesheet();
 
 		window.addEventListener('error', this.#handleRuntimeError, true);
@@ -31,6 +30,7 @@ export class ExceptionHook extends HTMLElement {
 		document.removeEventListener('click', this.#handleLocationChange, true);
 	}
 
+
 	#renderer = () => {
 		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
@@ -60,14 +60,32 @@ export class ExceptionHook extends HTMLElement {
 	#handleRuntimeError = (event) => {
 		if (this.#hasError) return;
 
-		if (this.contains(event.target) || event.error) {
-			this.#renderError(event.error?.message || event.message, event.error?.stack);
+		// 1. 에러 메시지 추출 (event 객체 자체 또는 event.error에서 타겟팅)
+		const errorMessage = event.error?.message || event.message || String(event);
+		const errorStack = event.error?.stack || "No stack trace available";
+
+		// 2. 개발 환경(Vite, Webpack) 및 리액트 특유의 무조건적인 전역 에러 전파 캐치
+		// 리액트 에러는 보통 전역 window로 던져지므로, 이 훅이 떠 있는 상태라면 그냥 가차없이 잡아야 합니다.
+		if (errorMessage) {
+
+			// 3. 리액트가 에러 때문에 <slot> 내부 DOM을 통째로 Unmount(파괴)해버리는 것을 방지하기 위해
+			// 브라우저 버블링을 즉시 차단하고, 에러 보드를 즉각 그리도록 순서를 가로챕니다.
+			this.#renderError(errorMessage, errorStack);
+
+			// 필요시 브라우저 기본 빨간 에러창(Vite Overlay 등) 억제 원할 때 활성화
+			// event.preventDefault();
 		}
 	}
 
 	#handlePromiseError = (event) => {
 		if (this.#hasError) return;
-		this.#renderError(event.reason?.message || String(event.reason), event.reason?.stack);
+
+		// 비동기 훅(useEffect 안의 null.data 같은 Promise 거부) 에러 캐치
+		const reason = event.reason;
+		const errorMessage = reason?.message || String(reason || "Unhandled Promise Rejection");
+		const errorStack = reason?.stack || "No stack trace available";
+
+		this.#renderError(errorMessage, errorStack);
 	}
 
 	#handleLocationChange = () => {