veryfront 0.1.72 → 0.1.73

package/src/src/server/dev-server/error-overlay/html-template.ts

@@ -10,6 +10,13 @@ const WS_RECONNECT_MAX_DELAY_MS = 5_000;
 /** Maximum number of WebSocket reconnection attempts before giving up */
 const WS_MAX_RECONNECT_ATTEMPTS = 10;
 
+/** JSON.stringify that escapes `<` to prevent `</script>` breaking inline scripts */
+function jsonForScript(value: unknown): string {
+  const json = JSON.stringify(value);
+  // JSON.stringify(undefined) returns undefined (not a string)
+  return json === undefined ? "undefined" : json.replace(/</g, "\\u003c");
+}
+
 export function generateRuntimeScript(): string {
   return `
     // Veryfront Error Overlay Runtime
@@ -110,21 +117,76 @@ export function generateRuntimeScript(): string {
             </div>
 
             <button type="button" onclick="document.getElementById('veryfront-error-overlay').remove()" style="
-              background: #333;
-              border: 1px solid #555;
-              color: #ccc;
-              padding: 8px 16px;
-              border-radius: 4px;
+              background: #fff;
+              border: none;
+              color: #000;
+              padding: 10px 20px;
+              border-radius: 9999px;
               cursor: pointer;
               font-family: inherit;
             ">
               Dismiss
             </button>
+            \${window.__VF_PROJECT_SLUG__ ? \`
+            <button type="button" id="vf-fix-btn-runtime" style="
+              background: transparent;
+              border: 1px solid rgba(255, 255, 255, 0.2);
+              color: rgba(255, 255, 255, 0.7);
+              padding: 10px 20px;
+              border-radius: 9999px;
+              cursor: pointer;
+              font-family: inherit;
+              margin-left: 8px;
+            ">
+              Fix in Veryfront
+            </button>
+            \` : ''}
           </div>
         </div>
       \`;
 
       document.body.appendChild(overlay);
+
+      // Notify Studio of runtime error
+      if (window.parent !== window) {
+        try {
+          window.parent.postMessage({
+            action: 'runtimeError',
+            url: window.location.href,
+            hasError: true,
+            errors: [{
+              type: 'error',
+              message: (errorInfo.error && errorInfo.error.message) || 'Unknown error',
+              file: errorInfo.file ? String(errorInfo.file) : undefined,
+              line: errorInfo.line ? Number(errorInfo.line) : undefined,
+              column: errorInfo.column ? Number(errorInfo.column) : undefined
+            }]
+          }, '*');
+        } catch (e) { /* postMessage may fail */ }
+      }
+
+      if (window.__VF_PROJECT_SLUG__) {
+        var fixBtn = document.getElementById('vf-fix-btn-runtime');
+        if (fixBtn) {
+          fixBtn.addEventListener('click', function() {
+            var rawName = (errorInfo.error && errorInfo.error.name) || 'Error';
+            var rawMessage = (errorInfo.error && errorInfo.error.message) || 'Unknown error';
+            var rawFile = errorInfo.file ? String(errorInfo.file) : null;
+            var rawLine = errorInfo.line ? String(errorInfo.line) : null;
+            var rawColumn = errorInfo.column ? String(errorInfo.column) : null;
+            var loc = rawFile ? rawFile + (rawLine ? ':' + rawLine : '') + (rawColumn ? ':' + rawColumn : '') : null;
+            var bt = String.fromCharCode(96);
+            var prompt = 'Find and fix the following error' +
+              (loc ? ' in ' + bt + loc + bt : '') +
+              '\\n\\n' + bt + rawMessage + bt;
+            if (window.parent !== window) {
+              window.parent.postMessage({ action: 'chatMessage', prompt: prompt }, '*');
+            } else {
+              window.open('https://veryfront.com/projects/' + window.__VF_PROJECT_SLUG__ + '?prompt=' + encodeURIComponent(prompt));
+            }
+          });
+        }
+      }
     };
 
     window.addEventListener('error', (event) => {
@@ -146,7 +208,11 @@ export function generateRuntimeScript(): string {
   `;
 }
 
-export function generateErrorHTML(errorInfo: ErrorInfo, suggestion?: string): string {
+export function generateErrorHTML(
+  errorInfo: ErrorInfo,
+  suggestion?: string,
+  projectSlug?: string,
+): string {
   const errorType = escapeHtml(formatErrorType(errorInfo.type));
   const errorName = escapeHtml(errorInfo.error.name);
   const errorMessage = escapeHtml(errorInfo.error.message);
@@ -182,6 +248,10 @@ export function generateErrorHTML(errorInfo: ErrorInfo, suggestion?: string): st
     `
     : "";
 
+  const fixButtonHtml = projectSlug
+    ? `<button type="button" id="vf-fix-btn" class="btn btn-fix">Fix in Veryfront</button>`
+    : "";
+
   return `
 <!DOCTYPE html>
 <html>
@@ -253,6 +323,32 @@ export function generateErrorHTML(errorInfo: ErrorInfo, suggestion?: string): st
       overflow-x: auto;
       font-size: 12px;
     }
+    .btn {
+      padding: 10px 20px;
+      border-radius: 9999px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 14px;
+      border: none;
+    }
+    .btn-dismiss {
+      background: #fff;
+      color: #000;
+    }
+    .btn-dismiss:hover {
+      background: #e5e5e5;
+    }
+    .btn-fix {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      margin-left: 8px;
+    }
+    .btn-fix:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-color: rgba(255, 255, 255, 0.4);
+    }
   </style>
 </head>
 <body>
@@ -267,8 +363,36 @@ export function generateErrorHTML(errorInfo: ErrorInfo, suggestion?: string): st
       ${suggestionSection}
       ${stackSection}
     </div>
+    ${fixButtonHtml}
   </div>
-  <script>
+  <script>${
+    projectSlug
+      ? `
+    (function() {
+      var slug = ${jsonForScript(projectSlug)};
+      var errorName = ${jsonForScript(errorInfo.error.name)};
+      var errorMessage = ${jsonForScript(errorInfo.error.message)};
+      var errorFile = ${jsonForScript(errorInfo.file ?? null)};
+      var errorLine = ${jsonForScript(errorInfo.line ?? null)};
+      var errorColumn = ${jsonForScript(errorInfo.column ?? null)};
+      var btn = document.getElementById('vf-fix-btn');
+      if (btn) {
+        btn.addEventListener('click', function() {
+          var loc = errorFile ? errorFile + (errorLine ? ':' + errorLine : '') + (errorColumn ? ':' + errorColumn : '') : null;
+          var bt = String.fromCharCode(96);
+          var prompt = 'Find and fix the following error' +
+            (loc ? ' in ' + bt + loc + bt : '') +
+            '\\n\\n' + bt + errorMessage + bt;
+          if (window.parent !== window) {
+            window.parent.postMessage({ action: 'chatMessage', prompt: prompt }, '*');
+          } else {
+            window.open('https://veryfront.com/projects/' + slug + '?prompt=' + encodeURIComponent(prompt));
+          }
+        });
+      }
+    })();`
+      : ""
+  }
     // Notify Studio (parent) that page has loaded with an error
     // This hides the loading spinner in Studio's preview iframe
     if (window.parent !== window) {
@@ -277,7 +401,14 @@ export function generateErrorHTML(errorInfo: ErrorInfo, suggestion?: string): st
           action: 'appUpdated',
           isInitialLoad: true,
           hasError: true,
-          url: window.location.href
+          url: window.location.href,
+          errors: [{
+            type: 'error',
+            message: ${jsonForScript(errorInfo.error.message)},
+            file: ${jsonForScript(errorInfo.file || undefined)},
+            line: ${errorInfo.line ? String(errorInfo.line) : "undefined"},
+            column: ${errorInfo.column ? String(errorInfo.column) : "undefined"}
+          }]
         }, '*');
       } catch (e) { /* postMessage may fail in cross-origin iframes */ }
     }

package/src/src/server/dev-server/error-overlay/index.ts

@@ -10,6 +10,7 @@ export {
   type ErrorType,
   formatErrorType,
   getSuggestion,
+  parseErrorLocation,
 } from "./error-formatter.js";
 export { generateErrorHTML, generateRuntimeScript } from "./html-template.js";
 export {

package/src/src/server/dev-server/error-overlay/overlay-renderer.ts

@@ -4,10 +4,11 @@ import { generateErrorHTML, generateRuntimeScript } from "./html-template.js";
 export const ErrorOverlay = {
   getRuntime: generateRuntimeScript,
   getSuggestion,
-  createHTML(errorInfo: ErrorInfo): string {
+  createHTML(errorInfo: ErrorInfo, projectSlug?: string): string {
     return generateErrorHTML(
       errorInfo,
       errorInfo.suggestion ?? getSuggestion(errorInfo.error),
+      projectSlug,
     );
   },
 };

package/src/src/server/dev-server/request-handler.ts

@@ -10,7 +10,7 @@ import {
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import type { VeryfrontConfig } from "../../config/index.js";
 import { clearConfigCache } from "../../config/index.js";
-import { ErrorOverlay } from "./error-overlay/index.js";
+import { ErrorOverlay, parseErrorLocation } from "./error-overlay/index.js";
 import { createResponseBuilder } from "../../security/index.js";
 import { resetApiHandler } from "../handlers/request/api/pages-api-handler.js";
 import { clearLayoutDiscoveryCache } from "../../rendering/layouts/index.js";
@@ -169,11 +169,15 @@ export class RequestHandler {
     const err = error as Error;
     getErrorCollector().addRuntimeError(err.message, err.stack, { source: "request-handler" });
 
+    const sourceFile = (err as Error & { sourceFile?: string }).sourceFile;
+    const location = sourceFile ? parseErrorLocation(err, sourceFile) : {};
     return new dntShim.Response(
       ErrorOverlay.createHTML({
         type: "runtime",
         error: err,
-      }),
+        ...(sourceFile ? { file: sourceFile } : {}),
+        ...location,
+      }, this.defaultProjectSlug),
       {
         status: HTTP_SERVER_ERROR,
         headers: { "content-type": "text/html; charset=utf-8" },

package/src/src/server/services/rendering/ssr.service.ts

@@ -15,7 +15,7 @@ import {
   startRenderSession,
 } from "../../../transforms/mdx/esm-module-loader/module-fetcher/index.js";
 import { getErrorCollector } from "../../../observability/error-collector.js";
-import { ErrorOverlay } from "../../dev-server/error-overlay/index.js";
+import { ErrorOverlay, parseErrorLocation } from "../../dev-server/error-overlay/index.js";
 import { ErrorPages } from "../../utils/error-html.js";
 import {
   HTTP_INTERNAL_SERVER_ERROR,
@@ -240,9 +240,16 @@ export class SSRService {
         slug,
       });
 
+      const sourceFile = (errorObj as Error & { sourceFile?: string }).sourceFile;
+      const location = sourceFile ? parseErrorLocation(errorObj, sourceFile) : {};
       return {
         status: HTTP_INTERNAL_SERVER_ERROR,
-        html: ErrorOverlay.createHTML({ error: errorObj, type: "runtime" }),
+        html: ErrorOverlay.createHTML({
+          error: errorObj,
+          type: "runtime",
+          ...(sourceFile ? { file: sourceFile } : {}),
+          ...location,
+        }, ctx.projectSlug),
         isStreaming: false,
         cacheStrategy: "no-cache",
         error: errorObj,

package/src/src/server/utils/error-html.ts

@@ -1,3 +1,5 @@
+import { escapeHTML } from "../../html/html-escape.js";
+
 interface ErrorHtmlOptions {
   statusCode: number;
   title: string;
@@ -19,13 +21,18 @@ export function generateErrorHtml(options: ErrorHtmlOptions): string {
 }
 
 function generateStyledErrorHtml(statusCode: number, title: string, message: string): string {
+  const errorMessage = title === "Not Found" ? `Page not found: ${message}` : message;
+
+  // 4xx = warning (routing/config issue), 5xx = error (something broke)
+  const errorType = statusCode >= 500 ? "error" : "warning";
+
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <link rel="icon" type="image/png" href="https://cdn.veryfront.com/images/veryfront-favicon.png">
-  <title>${statusCode} ${title} — Veryfront</title>
+  <title>${statusCode} ${escapeHTML(title)} — Veryfront</title>
   <style>
     :root {
       --bg: #ffffff;
@@ -74,9 +81,25 @@ function generateStyledErrorHtml(statusCode: number, title: string, message: str
 </head>
 <body>
   <div class="container">
-    <h1 class="title">${title}</h1>
-    <p class="message">${message}</p>
+    <h1 class="title">${escapeHTML(title)}</h1>
+    <p class="message">${escapeHTML(message)}</p>
   </div>
+  <script>
+    if (window.parent !== window) {
+      try {
+        window.parent.postMessage({
+          action: 'appUpdated',
+          isInitialLoad: true,
+          hasError: true,
+          url: window.location.href,
+          errors: [{
+            type: '${errorType}',
+            message: ${JSON.stringify(errorMessage).replace(/</g, "\\u003c")}
+          }]
+        }, '*');
+      } catch (e) { /* postMessage may fail in cross-origin iframes */ }
+    }
+  </script>
 </body>
 </html>`;
 }
@@ -94,11 +117,11 @@ function generateMinimalErrorHtml(
 <head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <title>${statusCode} ${title}</title>
+  <title>${statusCode} ${escapeHTML(title)}</title>
 </head>
 <body>
-  <h1>${statusCode} ${title}</h1>
-  <p>${fullMessage}</p>
+  <h1>${statusCode} ${escapeHTML(title)}</h1>
+  <p>${escapeHTML(fullMessage)}</p>
 </body>
 </html>`;
 }