@nine-lab/nine-mu 0.1.339 → 0.1.341

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,8 +1,8 @@
 // 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";
@@ -10,15 +10,15 @@ export class ExceptionHook extends HTMLElement {
 
 	constructor() {
 		super();
-		// Shadow DOM(open 모드) 활성화
 		this.attachShadow({ mode: 'open' });
+		trace.log("🔍 [nine-exception-hook] 인스턴스 생성됨");
 	}
 
 	connectedCallback() {
+		trace.log("🔍 [nine-exception-hook] DOM에 마운트됨. 이벤트 리스너 바인딩 시작");
 		this.#renderer();
 		this.#injectShadowStylesheet();
 
-		// 🎯 리액트 및 개발 오버레이의 stopPropagation을 우회하기 위한 이중 스니퍼 가동
 		this.#setupGlobalSniffer();
 
 		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
@@ -27,36 +27,42 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	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);
 
-		// 🎯 원시 onerror 핸들러 복구
 		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') 등록 완료");
 
-		// 🎯 [치트키] 타 프레임워크가 이벤트를 삼켜도 무조건 실행되는 원시 hook 가로채기
 		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 패스");
 			}
 
-			// 기존에 등록되어 있던 다른 onerror 엔진(Vite, 브라우저 등)이 있으면 그대로 실행되도록 위임
 			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 = () => {
@@ -85,33 +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;
+		}
 
-		// 🎯 event.error가 null이거나 유실되더라도 message를 통해 에러를 무조건 포착합니다.
 		const errorMessage = event.error?.message || event.message || String(event);
 		const errorStack = event.error?.stack || "No stack trace available";
 
-		// 브라우저 내부 스크립트 로딩 에러 예외 처리 후 가차없이 바인딩
 		if (errorMessage && errorMessage !== "Script error.") {
+			trace.log("🎯 [nine-exception-hook] 정상적인 에러 메시지 확인 -> 에러 보드 출력 시도", { errorMessage });
 			this.#renderError(errorMessage, errorStack);
+		} else {
+			trace.log("⚠️ [nine-exception-hook] 'Script error.' 이거나 빈 메시지라 무시됨");
 		}
 	}
 
 	#handlePromiseError = (event) => {
+		trace.log("🚨 [nine-exception-hook] unhandledrejection (Promise 에러) 포착!!", event);
+
 		if (this.#hasError) return;
 
-		// 비동기 비정상 런타임 거부(ex. null.data 읽기 에러) 캐치
 		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;
 
@@ -125,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;
@@ -135,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",
@@ -147,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>`;
@@ -158,33 +180,47 @@ export class ExceptionHook extends HTMLElement {
 		if (this.#hasError) return;
 		this.#hasError = true;
 
-		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-		if (coreContainer) coreContainer.style.display = 'none';
-
-		const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
-		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가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+		// 🎯 [핵심] 리액트가 에러 발생 후 하위 DOM을 Unmount/조작하는 동기적인 타이밍을
+		// 완전히 흘려보낸 뒤(setTimeout 0)에 안전하게 Web Component UI를 꽂아 넣습니다.
+		setTimeout(() => {
+			console.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 에러 UI 최종 렌더링");
+
+			const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+			if (coreContainer) {
+				coreContainer.style.display = 'none';
+				console.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김");
+			}
+
+			const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+			if (!exceptionBoard) {
+				console.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>
-		`;
+			`;
 
-		exceptionBoard.innerHTML = errorHTML;
+			exceptionBoard.innerHTML = errorHTML;
+			console.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 최종 삽입 성공");
 
-		const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
-		if (aiBtn) {
-			aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
-		}
+			const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
+			if (aiBtn) {
+				aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
+				console.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
+			}
+		}, 0);
 	}
 }