@nine-lab/nine-mu 0.1.338 → 0.1.340

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,45 +1,79 @@
 // src/components/exception/ExceptionHook.js
+import { nine } from '@nine-lab/nine-util';
+import { trace } from '@nopeer';
+
 export class ExceptionHook extends HTMLElement {
-	// 💡 [핵심] 비공개 인스턴스 필드는 클래스 최상단에 먼저 선언해야 합니다.
 	#lastPath = window.location.pathname;
 	#hasError = false;
 	#cssPath = "/css/nine-exception-hook.css";
+	#oldOnError = null;
 
 	constructor() {
 		super();
-		// Shadow DOM(open 모드) 활성화
 		this.attachShadow({ mode: 'open' });
+		trace.log("🔍 [nine-exception-hook] 인스턴스 생성됨");
 	}
 
-	// src/components/exception/ExceptionHook.js 내부 수정
-
 	connectedCallback() {
+		trace.log("🔍 [nine-exception-hook] DOM에 마운트됨. 이벤트 리스너 바인딩 시작");
 		this.#renderer();
 		this.#injectShadowStylesheet();
 
-		window.addEventListener('error', this.#handleRuntimeError, true);
+		this.#setupGlobalSniffer();
+
 		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.addEventListener('popstate', this.#handleLocationChange);
 		document.addEventListener('click', this.#handleLocationChange, true);
 	}
 
 	disconnectedCallback() {
+		trace.log("🔍 [nine-exception-hook] DOM에서 언마운트됨. 리스너 해제");
 		window.removeEventListener('error', this.#handleRuntimeError, true);
 		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.removeEventListener('popstate', this.#handleLocationChange);
 		document.removeEventListener('click', this.#handleLocationChange, true);
+
+		if (window.onerror === this.#handleRuntimeError || this.#oldOnError) {
+			window.onerror = this.#oldOnError;
+			trace.log("🔍 [nine-exception-hook] window.onerror 복구 완료");
+		}
 	}
 
+	#setupGlobalSniffer() {
+		window.addEventListener('error', this.#handleRuntimeError, true);
+		trace.log("🔍 [nine-exception-hook] window.addEventListener('error') 등록 완료");
+
+		this.#oldOnError = window.onerror;
+		window.onerror = (message, source, lineno, colno, error) => {
+			trace.log("🚨 [nine-exception-hook] 원시 window.onerror 포착!!", { message, source, lineno, error });
+
+			if (!this.#hasError) {
+				trace.log("🎯 [nine-exception-hook] 현재 에러 상태 없음 -> 에러 보드 출력 시도");
+				const errorMessage = error?.message || message || "알 수 없는 런타임 예외";
+				const errorStack = error?.stack || `${source}:${lineno}:${colno}`;
+				this.#renderError(errorMessage, errorStack);
+			} else {
+				trace.log("⚠️ [nine-exception-hook] 이미 에러 화면이 활성화되어 있어 원시 onerror 패스");
+			}
+
+			if (this.#oldOnError) {
+				trace.log("🔄 [nine-exception-hook] 기존에 등록되어 있던 다른 onerror 엔진으로 위임");
+				return this.#oldOnError(message, source, lineno, colno, error);
+			}
+			return false;
+		};
+		trace.log("🔍 [nine-exception-hook] 원시 window.onerror 가로채기(Chaining) 완료");
+	}
 
 	#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 +82,6 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#injectShadowStylesheet() {
-		// 💡 내부 필드 호출 시에도 모두 this.#형식으로 매핑합니다.
 		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
 
 		const link = document.createElement('link');
@@ -58,40 +91,47 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#handleRuntimeError = (event) => {
-		if (this.#hasError) return;
+		trace.log("🚨 [nine-exception-hook] window.addEventListener('error') 리스너 포착!!", event);
+
+		if (this.#hasError) {
+			trace.log("⚠️ [nine-exception-hook] 이미 에러 화면이 활성화되어 있어 이벤트 리스너 패스");
+			return;
+		}
 
-		// 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(파괴)해버리는 것을 방지하기 위해
-			// 브라우저 버블링을 즉시 차단하고, 에러 보드를 즉각 그리도록 순서를 가로챕니다.
+		if (errorMessage && errorMessage !== "Script error.") {
+			trace.log("🎯 [nine-exception-hook] 정상적인 에러 메시지 확인 -> 에러 보드 출력 시도", { errorMessage });
 			this.#renderError(errorMessage, errorStack);
-
-			// 필요시 브라우저 기본 빨간 에러창(Vite Overlay 등) 억제 원할 때 활성화
-			// event.preventDefault();
+		} else {
+			trace.log("⚠️ [nine-exception-hook] 'Script error.' 이거나 빈 메시지라 무시됨");
 		}
 	}
 
 	#handlePromiseError = (event) => {
+		trace.log("🚨 [nine-exception-hook] unhandledrejection (Promise 에러) 포착!!", event);
+
 		if (this.#hasError) return;
 
-		// 비동기 훅(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";
 
+		trace.log("🎯 [nine-exception-hook] Promise 거부 확인 -> 에러 보드 출력 시도");
 		this.#renderError(errorMessage, errorStack);
 	}
 
 	#handleLocationChange = () => {
 		setTimeout(() => {
+			trace.log("📍 [nine-exception-hook] 주소 이동 감지 체크", {
+				hasError: this.#hasError,
+				lastPath: this.#lastPath,
+				currentPath: window.location.pathname
+			});
+
 			if (this.#hasError && this.#lastPath !== window.location.pathname) {
-				console.log("✨ [nine-exception-hook] Shadow DOM 내부 예외 청소 및 정상 복구");
+				trace.log("✨ [nine-exception-hook] Shadow DOM 내부 예외 청소 및 정상 복구");
 				this.#lastPath = window.location.pathname;
 				this.#hasError = false;
 
@@ -105,6 +145,7 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#sendToAiAction = async (errorMessage, errorStack) => {
+		trace.log("🚀 [nine-exception-hook] AI 수정 요청 버튼 클릭됨");
 		const btn = this.shadowRoot.querySelector('.nine-ai-btn');
 		const footer = this.shadowRoot.querySelector('.nine-error-footer');
 		if (!btn) return;
@@ -115,6 +156,7 @@ export class ExceptionHook extends HTMLElement {
 
 		try {
 			if (window.triggerAutoRecovery) {
+				trace.log("📡 [nine-exception-hook] window.triggerAutoRecovery 호출 실행");
 				await window.triggerAutoRecovery({
 					message: errorMessage,
 					stack: errorStack || "No stack trace available",
@@ -127,7 +169,7 @@ export class ExceptionHook extends HTMLElement {
 				throw new Error("window.triggerAutoRecovery 관제탑 엔진이 로드되지 않았습니다.");
 			}
 		} catch (err) {
-			console.error("❌ AI 전송 실패:", err);
+			trace.error("❌ AI 전송 실패:", err);
 			btn.disabled = false;
 			btn.innerText = "❌ 재전송 시도";
 			footer.innerHTML = `<span style="color: #E53E3E;">⚠️ 전송 실패: ${err.message}</span>`;
@@ -135,35 +177,44 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#renderError(errorMessage, errorStack) {
-		if (this.#hasError) return;
-		this.#hasError = true;
+		trace.log("🎨 [nine-exception-hook] #renderError() 실행 시작. UI 전환 진행");
 
 		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-		if (coreContainer) coreContainer.style.display = 'none';
+		if (coreContainer) {
+			coreContainer.style.display = 'none';
+			trace.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김 (display: none)");
+		} else {
+			trace.error("❌ [nine-exception-hook] .nine-hook-core 엘리먼트를 찾을 수 없습니다.");
+		}
 
 		const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
-		if (!exceptionBoard) return;
+		if (!exceptionBoard) {
+			trace.error("❌ [nine-exception-hook] .nine-exception-board 엘리먼트를 찾을 수 없습니다.");
+			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;
+		trace.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 삽입 완료");
 
 		const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
 		if (aiBtn) {
 			aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
+			trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 바인딩 성공");
 		}
 	}
 }