@nine-lab/nine-mu 0.1.337 → 0.1.339

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,9 +1,12 @@
 // src/components/exception/ExceptionHook.js
+import { nine } from '@nine-lab/nine-util';
+
 export class ExceptionHook extends HTMLElement {
-	// 💡 [핵심] 비공개 인스턴스 필드는 클래스 최상단에 먼저 선언해야 합니다.
+	// 💡 비공개 인스턴스 필드 정의
 	#lastPath = window.location.pathname;
 	#hasError = false;
 	#cssPath = "/css/nine-exception-hook.css";
+	#oldOnError = null;
 
 	constructor() {
 		super();
@@ -11,13 +14,13 @@ 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);
+		// 🎯 리액트 및 개발 오버레이의 stopPropagation을 우회하기 위한 이중 스니퍼 가동
+		this.#setupGlobalSniffer();
+
 		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.addEventListener('popstate', this.#handleLocationChange);
 		document.addEventListener('click', this.#handleLocationChange, true);
@@ -28,18 +31,43 @@ export class ExceptionHook extends HTMLElement {
 		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.removeEventListener('popstate', this.#handleLocationChange);
 		document.removeEventListener('click', this.#handleLocationChange, true);
+
+		// 🎯 원시 onerror 핸들러 복구
+		if (window.onerror === this.#handleRuntimeError || this.#oldOnError) {
+			window.onerror = this.#oldOnError;
+		}
 	}
 
+	#setupGlobalSniffer() {
+		// 표준 캡처링 리스너 등록
+		window.addEventListener('error', this.#handleRuntimeError, true);
+
+		// 🎯 [치트키] 타 프레임워크가 이벤트를 삼켜도 무조건 실행되는 원시 hook 가로채기
+		this.#oldOnError = window.onerror;
+		window.onerror = (message, source, lineno, colno, error) => {
+			if (!this.#hasError) {
+				const errorMessage = error?.message || message || "알 수 없는 런타임 예외";
+				const errorStack = error?.stack || `${source}:${lineno}:${colno}`;
+				this.#renderError(errorMessage, errorStack);
+			}
+
+			// 기존에 등록되어 있던 다른 onerror 엔진(Vite, 브라우저 등)이 있으면 그대로 실행되도록 위임
+			if (this.#oldOnError) {
+				return this.#oldOnError(message, source, lineno, colno, error);
+			}
+			return false;
+		};
+	}
 
 	#renderer = () => {
 		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
 		this.shadowRoot.innerHTML = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
-                ${customImport}
-            </style>
-            
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+				${customImport}
+			</style>
+			
 			<div class="nine-hook-core">
 				<slot></slot>
 			</div>
@@ -48,7 +76,6 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#injectShadowStylesheet() {
-		// 💡 내부 필드 호출 시에도 모두 this.#형식으로 매핑합니다.
 		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
 
 		const link = document.createElement('link');
@@ -60,27 +87,20 @@ export class ExceptionHook extends HTMLElement {
 	#handleRuntimeError = (event) => {
 		if (this.#hasError) return;
 
-		// 1. 에러 메시지 추출 (event 객체 자체 또는 event.error에서 타겟팅)
+		// 🎯 event.error가 null이거나 유실되더라도 message를 통해 에러를 무조건 포착합니다.
 		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(파괴)해버리는 것을 방지하기 위해
-			// 브라우저 버블링을 즉시 차단하고, 에러 보드를 즉각 그리도록 순서를 가로챕니다.
+		// 브라우저 내부 스크립트 로딩 에러 예외 처리 후 가차없이 바인딩
+		if (errorMessage && errorMessage !== "Script error.") {
 			this.#renderError(errorMessage, errorStack);
-
-			// 필요시 브라우저 기본 빨간 에러창(Vite Overlay 등) 억제 원할 때 활성화
-			// event.preventDefault();
 		}
 	}
 
 	#handlePromiseError = (event) => {
 		if (this.#hasError) return;
 
-		// 비동기 훅(useEffect 안의 null.data 같은 Promise 거부) 에러 캐치
+		// 비동기 비정상 런타임 거부(ex. null.data 읽기 에러) 캐치
 		const reason = event.reason;
 		const errorMessage = reason?.message || String(reason || "Unhandled Promise Rejection");
 		const errorStack = reason?.stack || "No stack trace available";
@@ -145,19 +165,19 @@ export class ExceptionHook extends HTMLElement {
 		if (!exceptionBoard) return;
 
 		const errorHTML = `
-            <div class="nine-error-container">
-                <h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
-                <p class="nine-error-label">[에러 원인 로그]:</p>
-                <pre class="nine-error-log">${errorMessage}</pre>
-                
-                <div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
-                    <button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
-                    <div class="nine-error-footer">
-                        버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
-                    </div>
-                </div>
-            </div>
-        `;
+			<div class="nine-error-container">
+				<h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
+				<p class="nine-error-label">[에러 원인 로그]:</p>
+				<pre class="nine-error-log">${errorMessage}</pre>
+				
+				<div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
+					<button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
+					<div class="nine-error-footer">
+						버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+					</div>
+				</div>
+			</div>
+		`;
 
 		exceptionBoard.innerHTML = errorHTML;