@nine-lab/nine-mu 0.1.363 → 0.1.364

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -10,6 +10,7 @@ export const NineExceptionStyles = {
 		padding: '25px',
 		background: '#121314',
 		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+		fontSize: '14px',
 		textAlign: 'left',
 		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
 		display: 'flex',
@@ -156,30 +157,44 @@ export class NineExceptionHook extends React.Component {
 				return this.props.fallback(this.state.error);
 			}
 
-			const errorMessage = this.state.error?.message || String(this.state.error);
+			// 1. 🔍 에러 메시지 상세화 (기본 메시지 외에 에러 타입과 핵심 요약 추출)
+			let errorMessage = '';
+			if (this.state.error) {
+				const errorName = this.state.error.name ? `[${this.state.error.name}] ` : '';
+				const mainMessage = this.state.error.message || String(this.state.error);
+
+				// 에러 객체의 stack 정보가 있으면 첫 번째 라인(상세 원인)을 조합합니다.
+				if (this.state.error.stack) {
+					const stackLines = this.state.error.stack.split('\n');
+					// stack의 첫 줄이 이미 에러명을 포함하는 경우가 많으므로 정제하여 매칭
+					errorMessage = stackLines[0].includes(mainMessage)
+						? stackLines[0]
+						: `${errorName}${mainMessage}`;
+				} else {
+					errorMessage = `${errorName}${mainMessage}`;
+				}
+			} else {
+				errorMessage = 'Unknown runtime exception occurred.';
+			}
+
 			const customStyles = this.props.styles || {};
 
-			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출
-			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출기 (경로 정밀 정제 버전)
+			// 2. 🔍 React 컴포넌트 스택에서 로컬호스트 주소를 걷어낸 깔끔한 경로 추출
 			let errorLocation = '';
 			if (this.state.errorInfo?.componentStack) {
 				const lines = this.state.errorInfo.componentStack.trim().split('\n');
 				const targetLine = lines[0] || '';
 
-				// 1. 기존 방식대로 컴포넌트 이름과 전체 경로를 먼저 매칭합니다.
 				const match = targetLine.match(/at\s+(\w+)\s+\((.*)\)/) || targetLine.match(/at\s+(.*)/);
 				if (match) {
 					const componentName = match[1];
 					let rawPath = match[2] || '';
 
-					// 2. ⭐ 핵심: 경로에서 'http://localhost:5173/admin' 또는 'http://.../any-path' 파트를 찾아 통째로 날려버립니다.
 					if (rawPath.includes('http://') || rawPath.includes('https://')) {
-						// URL 객체나 정규식을 이용해 도메인 영역을 지우고 /src 포맷만 남깁니다.
 						rawPath = rawPath.replace(/^https?:\/\/[^\/]+/, '');
 					}
 
-					// 3. 컴포넌트 이름 뒤에 깔끔해진 /src 경로만 붙여줍니다.
-					errorLocation = rawPath ? `${componentName} (${rawPath})` : componentName;
+					errorLocation = rawPath ? `at ${componentName} (${rawPath})` : `at ${componentName}`;
 				} else {
 					errorLocation = targetLine.trim();
 				}
@@ -191,24 +206,24 @@ export class NineExceptionHook extends React.Component {
 					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
 
-				// 1. [SYSTEM] 라인
+				// 1. 에러 감지 로그
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.systemError, ...customStyles.systemError } },
 					'[SYSTEM] COMPONENT RENDER ERROR DETECTED'
 				),
 
-				// 2. aa is not defined 라인
+				// 2. 상세화된 에러 내용 (예: ReferenceError: aa is not defined)
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// 3. at MemberUsers 라인
+				// 3. 파싱된 에러 발생 파일명 및 라인 위치
 				errorLocation && React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.locationRow, ...customStyles.locationRow } },
-					`  at ${errorLocation}`
+					errorLocation
 				),
 
-				// 4. CLI 프롬프트 및 후속 결과 라인 영역
+				// 4. CLI 프롬프트 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
@@ -228,18 +243,17 @@ export class NineExceptionHook extends React.Component {
 						React.createElement('span', null, '/n)?')
 					),
 
-					// display: 'block'과 margin/padding 0을 주어 다른 라인들과 오차 없이 간격을 맞춤
 					this.state.reportStatus === 'sending' && React.createElement(
 						'div',
-						{ style: { color: '#ED8936', margin: '0', padding: '0', display: 'block' } },
+						{ style: { color: '#ED8936', margin: '0' } },
 						'>> Connecting to Control Tower... Sending payload.'
 					),
 
 					this.state.reportStatus === 'success' && React.createElement(
 						'div',
-						{ style: { margin: '0', padding: '0', display: 'block' } },
-						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold', display: 'block', margin: '0' } }, '>> Transmit complete. Core engine initialized.'),
-						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px', display: 'block', margin: '4px 0 0 0' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
+						{ style: { display: 'flex', flexDirection: 'column', gap: '12px', margin: '0' } },
+						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold' } }, '>> Transmit complete. Core engine initialized.'),
+						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
 					)
 				)
 			);