@nine-lab/nine-mu 0.1.358 → 0.1.360

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -5,11 +5,10 @@ import React from 'react';
 // ==========================================
 export const NineExceptionStyles = {
 	container: {
-		padding: '20px 25px',        // 위아래 여백을 적절히 줄여 꽉 찬 느낌 유도
-		margin: '20px 0',            // 좌우 마진을 없애 부모 너비에 100% 꽉 차게 설정
-		background: '#121314',       // 터미널 다크 블랙 배경
-		border: '1px solid #343A40',
-		borderRadius: '6px',
+		minHeight: '100%',
+		flexGrow: 1,
+		padding: '25px',
+		background: '#121314',
 		// ⭐ 모든 요소가 완벽한 터미널 정렬을 갖추도록 고정폭 서체를 부모에 강제 주입
 		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
 		textAlign: 'left',
@@ -31,7 +30,7 @@ export const NineExceptionStyles = {
 	},
 	pre: {
 		background: 'transparent',
-		color: '#F8F9FA',
+		color: '#666',
 		padding: '0',
 		margin: '0',                 // pre 태그 고유의 불규칙한 여백 완전 제거
 		border: 'none',
@@ -88,6 +87,11 @@ export class NineExceptionHook extends React.Component {
 
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
+
+		this.setState({
+			errorInfo: errorInfo || null
+		});
+
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -116,7 +120,8 @@ export class NineExceptionHook extends React.Component {
 
 	handleLocationChange() {
 		setTimeout(() => {
-			if (this.state.hasError && this.state.reportStatus !== 'idle') {
+			// reportStatus 조건 대신, 에러가 나 있는 상태에서 주소가 바뀌었는지만 체크해야 안전합니다.
+			if (this.state.hasError && this.lastPath !== window.location.pathname) {
 				console.log("[Nine-Library] 페이지 주소 변경 감지 -> 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
 				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
@@ -149,6 +154,22 @@ export class NineExceptionHook extends React.Component {
 			const errorMessage = this.state.error?.message || String(this.state.error);
 			const customStyles = this.props.styles || {};
 
+			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출기
+			let errorLocation = '';
+			if (this.state.errorInfo?.componentStack) {
+				// 스택 트레이스 문자열에서 실제 파일 경로가 포함된 첫 줄을 타겟팅합니다.
+				const lines = this.state.errorInfo.componentStack.trim().split('\n');
+				const targetLine = lines[0] || '';
+
+				// 정규식을 이용해 파일명과 라인 번호 정제 (예: at UserList (at users.js:42) -> UserList (users.js:42))
+				const match = targetLine.match(/at\s+(\w+)\s+\((.*)\)/) || targetLine.match(/at\s+(.*)/);
+				if (match) {
+					errorLocation = match[2] ? `${match[1]} (${match[2]})` : match[1];
+				} else {
+					errorLocation = targetLine.trim();
+				}
+			}
+
 			return React.createElement(
 				'div',
 				{
@@ -162,10 +183,17 @@ export class NineExceptionHook extends React.Component {
 					'[SYSTEM] COMPONENT RENDER ERROR DETECTED'
 				),
 
-				// 2. 에러 내용
+				// 2. 에러 내용 (aa is not defined)
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// 3. CLI 프롬프트 영역
+				// ⭐ 3. [추가] 파싱된 에러 발생 파일명 및 라인 위치 (터미널 그레이 색상 매칭)
+				errorLocation && React.createElement(
+					'div',
+					{ style: { color: '#666', fontSize: '14px', margin: '0 0 12px 0', fontFamily: 'Consolas, Monaco, monospace', lineHeight: '1' } },
+					`  at ${errorLocation}`
+				),
+
+				// 4. CLI 프롬프트 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },