@fuzionx/framework 0.1.71 → 0.1.72

package/cli/templates/make/app-spa/views/default/spa/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fuzionx/player": "^0.1.71",
+    "@fuzionx/player": "^0.1.72",
     "pinia": "^3.0.4",
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"

package/lib/core/Application.js

@@ -852,7 +852,18 @@ export default class Application {
             })
             .catch((err) => {
                 console.error(`[FX] Unhandled controller error: ${ctx.method} ${ctx.path}`, err);
-                this._handleContextError(err, ctx);
+                try {
+                    this._handleContextError(err, ctx);
+                } catch (handlerErr) {
+                    // 에러 핸들링 자체 실패 → 최소한의 500 응답 보장
+                    console.error(`[FX] Error handler failed:`, handlerErr);
+                    try {
+                        ctx._statusCode = 500;
+                        ctx._body = JSON.stringify({ error: { message: err.message, status: 500 } });
+                        ctx._headers['Content-Type'] = 'application/json';
+                        ctx._sent = true;
+                    } catch { /* ctx 조작도 실패하면 포기 */ }
+                }                
                 this._sendContextResponse(rawReq.requestId, ctx);
             });
 
@@ -1251,20 +1262,29 @@ export default class Application {
 
     /**
      * Context 에러 핸들링 — ctx에 에러 응답 설정
+     *
+     * 커스텀 에러 핸들러(useError)는 부가 작업(알림 등)용으로,
+     * 기본 에러 응답 설정(ErrorHandler.handle)은 항상 실행된다.
+     *
      * @param {Error} err - 발생한 에러
      * @param {object} ctx - Context 인스턴스
      * @private
      */
     _handleContextError(err, ctx) {
-        // 커스텀 에러 핸들러 체크 (useError로 등록)
+        // 커스텀 에러 핸들러 실행 (fire-and-forget — 알림, 로깅 등 부가 작업)
         for (const { path: ePath, handler } of this._errorHandlers) {
             if (!ePath || ctx.path?.startsWith(ePath)) {
                 try {
-                    handler(err, ctx);
-                    return;
-                } catch { /* 커스텀 핸들러 실패 시 기본으로 */ }
+                    const result = handler(err, ctx);
+                    // async 핸들러 → 에러 무시 (알림 실패가 응답에 영향 X)
+                    if (result && typeof result.then === 'function') {
+                        result.catch(() => {});
+                    }
+                } catch { /* 커스텀 핸들러 sync 에러 무시 */ }
             }
         }
+
+        // 기본 에러 응답 설정 (항상 실행 — ctx에 status/body 세팅)
         this._errorHandler.handle(err, ctx);
 
         // 'error' 이벤트 발행 — 앱 레벨에서 ErrorLog 기록용 (fire-and-forget)

package/lib/http/ErrorHandler.js

@@ -34,8 +34,14 @@ export default class ErrorHandler {
             this.logger(`[${status}] ${ctx.method} ${ctx.path} — ${err.message}`);
         }
 
-        // JSON 응답 요청이면 JSON으로
-        const wantsJson = ctx.get('accept')?.includes('application/json')
+        // JSON 응답 판단 — 요청 헤더 기반 (경로 하드코딩 X)
+        //   1. Accept 헤더에 application/json 포함 (SPA fetch/axios 기본)
+        //   2. Content-Type이 JSON (JSON 요청 본문)
+        //   3. X-Requested-With: XMLHttpRequest (AJAX 요청)
+        //   4. /api 경로 (fallback — 헤더 없는 경우 대비)
+        const accept = ctx.get('accept') || '';
+        const wantsJson = accept.includes('application/json')
+            || (!accept.includes('text/html') && ctx.get('x-requested-with') === 'XMLHttpRequest')
             || ctx.is('json')
             || ctx.path?.startsWith('/api');
 
@@ -117,22 +123,134 @@ export default class ErrorHandler {
             } catch {}
         }
 
-        // 3. 프레임워크 내장 에러 페이지 (XSS 방지)
+        // 3. 프레임워크 내장 에러 페이지 (모던 디자인 — XSS 방지)
         const esc = (s) => String(s)
             .replace(/&/g, '&amp;').replace(/</g, '&lt;')
             .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
-        const title = status >= 500 ? 'Server Error' : esc(err.message);
+        // 상태 코드별 제목/이모지/색상 분기
+        const statusMap = {
+            400: { emoji: '⚠️', label: 'Bad Request', desc: '잘못된 요청입니다.', color: '#f59e0b' },
+            401: { emoji: '🔒', label: 'Unauthorized', desc: '인증이 필요합니다.', color: '#6366f1' },
+            403: { emoji: '🚫', label: 'Forbidden', desc: '접근 권한이 없습니다.', color: '#ef4444' },
+            404: { emoji: '🔍', label: 'Not Found', desc: '요청한 페이지를 찾을 수 없습니다.', color: '#8b5cf6' },
+            500: { emoji: '💥', label: 'Server Error', desc: '서버에서 오류가 발생했습니다.', color: '#ef4444' },
+            502: { emoji: '🌐', label: 'Bad Gateway', desc: '게이트웨이 오류가 발생했습니다.', color: '#f97316' },
+            503: { emoji: '🔧', label: 'Service Unavailable', desc: '서비스를 일시적으로 이용할 수 없습니다.', color: '#f59e0b' },
+        };
+        const info = statusMap[status] || {
+            emoji: status >= 500 ? '💥' : '⚠️',
+            label: status >= 500 ? 'Server Error' : 'Error',
+            desc: esc(err.message),
+            color: status >= 500 ? '#ef4444' : '#f59e0b',
+        };
+
+        // 개발 모드: 스택 트레이스 블록
+        const stackBlock = this.isDev && err.stack
+            ? `<details class="stack" open>
+                <summary>Stack Trace</summary>
+                <pre>${esc(err.stack)}</pre>
+               </details>` : '';
+
+        // 개발 모드: 요청 정보
+        const reqBlock = this.isDev
+            ? `<div class="req-info">
+                <span class="method">${esc(ctx.method)}</span>
+                <span class="path">${esc(ctx.url)}</span>
+               </div>` : '';
 
         ctx.status(status).html(
-            `<!DOCTYPE html><html><head><meta charset="utf-8"><title>${status}</title>` +
-            `<style>body{font-family:system-ui,-apple-system,sans-serif;max-width:600px;margin:80px auto;` +
-            `padding:0 20px;color:#333}h1{color:#e74c3c;}pre{background:#f5f5f5;padding:16px;border-radius:8px;` +
-            `overflow-x:auto;font-size:13px;}</style></head>` +
-            `<body><h1>${status} — ${title}</h1>` +
-            `<p>요청: ${esc(ctx.method)} ${esc(ctx.url)}</p>` +
-            `${this.isDev && err.stack ? `<pre>${esc(err.stack)}</pre>` : ''}` +
-            `</body></html>`
+            `<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${status} — ${esc(info.label)}</title>
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  :root{--bg:#0f0f11;--card:#18181b;--border:#27272a;--text:#fafafa;--sub:#a1a1aa;--accent:${info.color}}
+  @media(prefers-color-scheme:light){
+    :root{--bg:#f8f9fa;--card:#fff;--border:#e5e7eb;--text:#18181b;--sub:#71717a}
+  }
+  body{
+    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
+    background:var(--bg);color:var(--text);
+    min-height:100vh;display:flex;align-items:center;justify-content:center;
+    padding:20px;
+  }
+  .container{
+    max-width:520px;width:100%;text-align:center;
+  }
+  .status-code{
+    font-size:120px;font-weight:800;line-height:1;
+    background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));
+    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+    background-clip:text;
+    letter-spacing:-4px;margin-bottom:8px;
+    animation:fadeIn .5s ease-out;
+  }
+  .emoji{font-size:48px;margin-bottom:16px;display:block;animation:bounce .6s ease-out}
+  .card{
+    background:var(--card);border:1px solid var(--border);
+    border-radius:16px;padding:40px 32px;
+    box-shadow:0 4px 24px rgba(0,0,0,.12);
+    animation:slideUp .4s ease-out;
+  }
+  h1{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--text)}
+  .desc{color:var(--sub);font-size:14px;line-height:1.6;margin-bottom:24px}
+  .home-btn{
+    display:inline-flex;align-items:center;gap:6px;
+    padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;
+    background:var(--accent);color:#fff;
+    text-decoration:none;transition:all .2s;
+    border:none;cursor:pointer;
+  }
+  .home-btn:hover{opacity:.85;transform:translateY(-1px)}
+  .req-info{
+    margin-top:20px;padding:10px 16px;
+    background:color-mix(in srgb,var(--bg) 80%,var(--card));
+    border-radius:8px;font-size:12px;font-family:'Menlo','Consolas',monospace;
+    color:var(--sub);display:flex;gap:8px;justify-content:center;align-items:center;
+  }
+  .method{
+    background:var(--accent);color:#fff;padding:2px 8px;border-radius:4px;
+    font-weight:600;font-size:11px;
+  }
+  .stack{
+    margin-top:20px;text-align:left;
+  }
+  .stack summary{
+    font-size:12px;color:var(--sub);cursor:pointer;margin-bottom:8px;
+    font-weight:500;
+  }
+  .stack pre{
+    background:color-mix(in srgb,var(--bg) 80%,var(--card));
+    border:1px solid var(--border);border-radius:8px;
+    padding:16px;font-size:11px;line-height:1.5;
+    overflow-x:auto;color:var(--sub);font-family:'Menlo','Consolas',monospace;
+    max-height:300px;overflow-y:auto;
+  }
+  .footer{margin-top:32px;font-size:11px;color:var(--sub)}
+  @keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
+  @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+  @keyframes bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="card">
+    <span class="emoji">${info.emoji}</span>
+    <div class="status-code">${status}</div>
+    <h1>${esc(info.label)}</h1>
+    <p class="desc">${esc(info.desc)}</p>
+    <a href="/" class="home-btn">← 홈으로</a>
+    ${reqBlock}
+    ${stackBlock}
+  </div>
+  <p class="footer">FuzionX Framework</p>
+</div>
+</body>
+</html>`
         );
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzionx/framework",
-  "version": "0.1.71",
+  "version": "0.1.72",
   "type": "module",
   "description": "Full-stack MVC framework built on @fuzionx/core — Controller, Service, Model, Middleware, DI, EventBus",
   "main": "index.js",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1028.0",
-    "@fuzionx/core": "^0.1.71",
+    "@fuzionx/core": "^0.1.72",
     "better-sqlite3": "^12.8.0",
     "knex": "^3.2.5",
     "mongoose": "^9.3.2",