@nine-lab/nine-mu 0.1.335 → 0.1.336

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.335",
+  "version": "0.1.336",
   "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";` : "";
 
@@ -57,11 +57,26 @@ export class ExceptionHook extends HTMLElement {
 		this.shadowRoot.appendChild(link);
 	}
 
+	// src/components/exception/ExceptionHook.js
+
 	#handleRuntimeError = (event) => {
 		if (this.#hasError) return;
 
-		if (this.contains(event.target) || event.error) {
-			this.#renderError(event.error?.message || event.message, event.error?.stack);
+		// 🎯 핵심 1: 리액트 에러는 내부 가상 DOM에서 발생하므로
+		// event.error가 존재하거나, 에러 타겟이 이 컴포넌트 하위에 속해있는지 확인합니다.
+		const isReactError = event.error || (event.target && this.contains(event.target));
+
+		if (isReactError) {
+			// 에러 스택과 메시지 추출
+			const message = event.error?.message || event.message || "알 수 없는 런타임 에러";
+			const stack = event.error?.stack || "Stack trace unavailable";
+
+			// 🎯 핵심 2: 리액트가 에러 때문에 화면을 통째로 날려버리기 전에
+			// 기본 렌더링 슬롯(<slot>)을 즉시 숨기고 Web Component 자체 에러 보드를 띄웁니다.
+			this.#renderError(message, stack);
+
+			// 브라우저 기본 에러 동작(콘솔 중복 출력 등)을 필요에 따라 제어하려면 추가
+			// event.preventDefault();
 		}
 	}