@nine-lab/nine-mu 0.1.344 → 0.1.346

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,238 +1,77 @@
 // 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();
-		this.attachShadow({ mode: 'open' });
-		trace.log("🔍 [nine-exception-hook] 인스턴스 생성됨");
+// npm 라이브러리용 패키지의 핵심 소스 (예: src/components/ContentErrorBoundary.jsx)
+import React from 'react';
+
+export class NineExceptionHook extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false, error: null };
+		this.lastPath = window.location.pathname;
+		this.handleLocationChange = this.handleLocationChange.bind(this);
 	}
 
-	connectedCallback() {
-		trace.log("🔍 [nine-exception-hook] DOM에 마운트됨. 이벤트 리스너 바인딩 시작");
-		this.#renderer();
-		this.#injectShadowStylesheet();
-
-		this.#setupGlobalSniffer();
-
-		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
-		window.addEventListener('popstate', this.#handleLocationChange);
-		document.addEventListener('click', this.#handleLocationChange, true);
+	static getDerivedStateFromError(error) {
+		return { hasError: true, error };
 	}
 
-	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);
+	componentDidCatch(error, errorInfo) {
+		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
 
-		if (window.onerror === this.#handleRuntimeError || this.#oldOnError) {
-			window.onerror = this.#oldOnError;
-			trace.log("🔍 [nine-exception-hook] window.onerror 복구 완료");
+		// 1. 외부 전역 복구 엔진(triggerAutoRecovery)이 있으면 호출
+		if (window.triggerAutoRecovery) {
+			window.triggerAutoRecovery(error.message || String(error));
 		}
 
-		// 화면 리셋 시 박혀있던 바깥쪽 에러 컨테이너 제거
-		this.#removeExternalOverlay();
-	}
-
-	#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}
-				:host {
-					display: block;
-					width: 100%;
-					height: 100%;
-				}
-			</style>
-			<div class="nine-hook-core" style="width: 100%; height: 100%;">
-				<slot></slot>
-			</div>
-			<div class="nine-exception-board"></div>
-		`;
-	}
-
-	#injectShadowStylesheet() {
-		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
-
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = this.#cssPath;
-		this.shadowRoot.appendChild(link);
-	}
-
-	#handleRuntimeError = (event) => {
-		trace.log("🚨 [nine-exception-hook] window.addEventListener('error') 리스너 포착!!", event);
-
-		if (this.#hasError) return;
-
-		const errorMessage = event.error?.message || event.message || String(event);
-		const errorStack = event.error?.stack || "No stack trace available";
-
-		if (errorMessage && errorMessage !== "Script error.") {
-			this.#renderError(errorMessage, errorStack);
+		// 2. 라이브러리 확장성: 컴포넌트 자체 Props로 콜백을 넘겨받았다면 실행
+		if (this.props.onCatch) {
+			this.props.onCatch(error, errorInfo);
 		}
 	}
 
-	#handlePromiseError = (event) => {
-		trace.log("🚨 [nine-exception-hook] unhandledrejection (Promise 에러) 포착!!", event);
-
-		if (this.#hasError) return;
-
-		const reason = event.reason;
-		const errorMessage = reason?.message || String(reason || "Unhandled Promise Rejection");
-		const errorStack = reason?.stack || "No stack trace available";
+	componentDidMount() {
+		window.addEventListener('popstate', this.handleLocationChange);
+		document.addEventListener('click', this.handleLocationChange, true);
+	}
 
-		this.#renderError(errorMessage, errorStack);
+	componentWillUnmount() {
+		window.removeEventListener('popstate', this.handleLocationChange);
+		document.removeEventListener('click', this.handleLocationChange, true);
 	}
 
-	#handleLocationChange = () => {
+	handleLocationChange() {
 		setTimeout(() => {
-			if (this.#hasError && this.#lastPath !== window.location.pathname) {
-				trace.log("✨ [nine-exception-hook] Shadow DOM 및 글로벌 오버레이 내부 예외 청소 및 정상 복구");
-				this.#lastPath = window.location.pathname;
-				this.#hasError = false;
-
-				this.#removeExternalOverlay();
-
-				const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-				if (coreContainer) coreContainer.style.display = '';
+			if (this.state.hasError && this.lastPath !== window.location.pathname) {
+				console.log("✨ [Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
+				this.lastPath = window.location.pathname;
+				this.setState({ hasError: false, error: null });
 			}
-		}, 50);
-	}
-
-	#removeExternalOverlay() {
-		const target = document.getElementById('nine-global-exception-container');
-		if (target) target.remove();
+		}, 10);
 	}
 
-	#sendToAiAction = async (errorMessage, errorStack) => {
-		// 글로벌 엘리먼트 내에서 탐색하도록 변경
-		const root = document.getElementById('nine-global-exception-container') || this.shadowRoot;
-		const btn = root.querySelector('.nine-ai-btn');
-		const footer = root.querySelector('.nine-error-footer');
-		if (!btn) return;
-
-		btn.disabled = true;
-		btn.innerText = "⚡ AI 관제탑에 소스 분석 요청 중...";
-		btn.classList.add('loading');
-
-		try {
-			if (window.triggerAutoRecovery) {
-				await window.triggerAutoRecovery({
-					message: errorMessage,
-					stack: errorStack || "No stack trace available",
-					path: window.location.pathname
-				});
-
-				footer.innerHTML = `✅ <b>AI 관제탑 접수 완료:</b> 분석을 바탕으로 소스 코드를 교정하고 있습니다. 잠시만 기다려주세요.`;
-				btn.innerText = "🚀 전송 완료";
-			} else {
-				throw new Error("window.triggerAutoRecovery 관제탑 엔진이 로드되지 않았습니다.");
+	render() {
+		if (this.state.hasError) {
+			// 라이브러리 커스텀 UI 제공 (외부에서 커스텀 fallback UI를 주입하지 않았다면 기본 템플릿 사용)
+			if (this.props.fallback) {
+				return this.props.fallback(this.state.error);
 			}
-		} catch (err) {
-			trace.error("❌ AI 전송 실패:", err);
-			btn.disabled = false;
-			btn.innerText = "❌ 재전송 시도";
-			footer.innerHTML = `<span style="color: #E53E3E;">⚠️ 전송 실패: ${err.message}</span>`;
-		}
-	}
 
-	#renderError(errorMessage, errorStack) {
-		if (this.#hasError) return;
-		this.#hasError = true;
-
-		setTimeout(() => {
-			trace.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 최상단 글로벌 에러 레이어 생성");
-
-			const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-			if (coreContainer) coreContainer.style.display = 'none';
-
-			// 🎯 [핵심 변경] Shadow DOM 내부가 아니라 document.body에 직접 fixed 컨테이너를 꽂아버려
-			// global-loading-overlay를 완벽히 덮어버립니다.
-			this.#removeExternalOverlay();
-
-			const externalContainer = document.createElement('div');
-			externalContainer.id = 'nine-global-exception-container';
-
-			// 인라인 스타일로 외부 요소를 완전히 차단하고 맨 앞으로 배치
-			Object.assign(externalContainer.style, {
-				position: 'fixed',
-				top: '0',
-				left: '0',
-				width: '100vw',
-				height: '100vh',
-				backgroundColor: '#FFF5F5',
-				zIndex: '2147483647', // 브라우저 표현 최대 z-index 값 부여
-				overflow: 'auto',
-				boxSizing: 'border-box',
-				display: 'block'
-			});
-
-			const errorHTML = `
-				<div class="nine-error-container" style="padding: 40px; max-width: 1200px; margin: 40px auto; font-family: sans-serif; background: white; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); text-align: left;">
-					<h3 class="nine-error-title" style="color: #C53030; margin-top: 0; font-size: 22px; font-weight: 700; border-bottom: 2px solid #FED2D2; padding-bottom: 12px; font-family: sans-serif;">⚠️ 시스템 예외 감지 (nine-exception-hook)</h3>
-					<p class="nine-error-label" style="font-weight: bold; margin: 20px 0 8px 0; color: #4A5568; font-size: 15px; font-family: sans-serif;">[에러 원인 로그]:</p>
-					<pre class="nine-error-log" style="background: #1A202C; color: #EDF2F7; padding: 20px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-family: monospace; font-size: 14px; line-height: 1.6; margin-bottom: 25px;">${errorMessage}\n\n[Stack Trace]\n${errorStack}</pre>
-					
-					<div class="nine-action-area" style="display: flex; align-items: center; gap: 20px; border-top: 1px solid #E2E8F0; padding-top: 20px;">
-						<button class="nine-ai-btn" style="background: #3182CE; color: white; border: none; padding: 14px 28px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px;">🤖 AI에게 소스코드 수정 요청</button>
-						<div class="nine-error-footer" style="font-size: 14px; color: #718096; line-height: 1.4; font-family: sans-serif;">
-							버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
-						</div>
+			return (
+				<div style={{ padding: '30px', margin: '20px', background: '#FFF5F5', border: '1px solid #FEB2B2', borderRadius: '8px', fontFamily: 'sans-serif', textAlign: 'left', ...this.props.containerStyle }}>
+					<h3 style={{ color: '#C53030', marginTop: 0, fontSize: '18px' }}>⚠️ 컴포넌트 빌드/렌더링 에러 감지</h3>
+					<p style={{ margin: '10px 0 5px 0', fontWeight: 'bold', color: '#4A5568' }}>[에러 원인 로그]:</p>
+					<pre style={{ background: '#1A202C', color: '#EDF2F7', padding: '15px', borderRadius: '6px', overflowX: 'auto', whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
+                        {this.state.error?.message || String(this.state.error)}
+                    </pre>
+					<div style={{ marginTop: '15px', fontSize: '14px', color: '#718096' }}>
+						🔄 에러 로그가 관제탑으로 자동 피드백되었습니다. AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...
 					</div>
 				</div>
-			`;
-
-			externalContainer.innerHTML = errorHTML;
-			document.body.appendChild(externalContainer);
-			trace.log("🎨 [nine-exception-hook] 브라우저 Body 최상단 레이어 배정 성공");
-
-			const aiBtn = externalContainer.querySelector('.nine-ai-btn');
-			if (aiBtn) {
-				aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
-				trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
-			}
-		}, 0);
+			);
+		}
+		return this.props.children;
 	}
 }
 
-if (!customElements.get('nine-exception-hook')) {
-	customElements.define('nine-exception-hook', ExceptionHook);
-}
+export default NineExceptionHook;

package/src/index.js

@@ -4,7 +4,7 @@ import { NineDiff } from './components/NineDiff.js';
 import { NineDiffPopup } from './components/NineDiffPopup.js';
 import { NineMenuDiffPopup } from './components/NineMenuDiffPopup.js';
 import './components/ChatMessage.js';
-import './components/exception/ExceptionHook.js';
+//import { NineExceptionHook } from './components/exception/ExceptionHook.js';
 
 /**
  * Nine-Mu 엔진 메인 클래스