npm - scanwarp - Versions diffs - 0.3.4 → 0.4.0 - Mend

scanwarp 0.3.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/commands/dev.js +86 -17
package/dist/dev/browser-monitor-script.js +113 -0
package/dist/integrations/mcp.js +3 -1
package/package.json +1 -1

package/dist/commands/dev.js CHANGED Viewed

@@ -14,7 +14,23 @@ const chokidar_1 = require("chokidar");
 const detector_js_1 = require("../detector.js");
 const analysis_engine_js_1 = require("../dev/analysis-engine.js");
 const schema_drift_js_1 = require("../dev/analyzers/schema-drift.js");
+const browser_monitor_script_js_1 = require("../dev/browser-monitor-script.js");
 // ─── Main dev command ───
+// ─── Helper functions ───
+function hasInstrumentInPackageJson(cwd) {
+    const packageJsonPath = path_1.default.join(cwd, 'package.json');
+    if (!fs_1.default.existsSync(packageJsonPath)) {
+        return false;
+    }
+    try {
+        const packageJson = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf-8'));
+        return !!(packageJson.dependencies?.['@scanwarp/instrument'] ||
+            packageJson.devDependencies?.['@scanwarp/instrument']);
+    }
+    catch {
+        return false;
+    }
+}
 // ─── Production setup detection ───
 function checkProductionSetup(cwd) {
     // Check if they've deployed or are using hosting platforms
@@ -29,19 +45,7 @@ function checkProductionSetup(cwd) {
     // Check if instrumentation is set up
     const hasInstrumentationFile = fs_1.default.existsSync(path_1.default.join(cwd, 'instrumentation.ts')) ||
         fs_1.default.existsSync(path_1.default.join(cwd, 'instrumentation.js'));
-    // Check if @scanwarp/instrument is in package.json
-    let hasInstrumentPackage = false;
-    const packageJsonPath = path_1.default.join(cwd, 'package.json');
-    if (fs_1.default.existsSync(packageJsonPath)) {
-        try {
-            const packageJson = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf-8'));
-            hasInstrumentPackage = !!(packageJson.dependencies?.['@scanwarp/instrument'] ||
-                packageJson.devDependencies?.['@scanwarp/instrument']);
-        }
-        catch {
-            // Ignore parse errors
-        }
-    }
+    const hasInstrumentPackage = hasInstrumentInPackageJson(cwd);
     return hasInstrumentationFile || hasInstrumentPackage;
 }
 async function devCommand(options = {}) {
@@ -87,12 +91,18 @@ async function devCommand(options = {}) {
     console.log(chalk_1.default.white(`      }`));
     console.log(chalk_1.default.gray(`    }`));
     console.log(chalk_1.default.gray(`  }\n`));
+    // Print browser monitoring instructions
+    console.log(chalk_1.default.bold('  🔍 Browser error monitoring:\n'));
+    console.log(chalk_1.default.gray(`  Add this script tag to your HTML <head> for frontend error capture:`));
+    console.log(chalk_1.default.cyan(`  <script src="http://localhost:${scanwarpPort}/monitor.js"></script>\n`));
+    console.log(chalk_1.default.gray(`  This will detect blank screens, console errors, and React issues.\n`));
     // Step 5: Start the user's dev server
     const isNextJs = detected.framework === 'Next.js';
+    const hasInstrumentPackage = hasInstrumentInPackageJson(cwd);
     const devServerPort = detectDevServerPort(devCmd);
     console.log(chalk_1.default.bold(`  Starting: ${devCmd}\n`));
     console.log(chalk_1.default.gray('─'.repeat(60)));
-    const child = startDevServer(devCmd, cwd, scanwarpPort, isNextJs);
+    const child = startDevServer(devCmd, cwd, scanwarpPort, isNextJs, hasInstrumentPackage);
     // Use store's maps for tracking (shared with MCP API)
     const previousResults = store.previousResults;
     const baselines = store.baselines;
@@ -313,6 +323,7 @@ async function startLocalServer(port) {
     const store = {
         spans: [],
         events: [],
+        browserErrors: [],
         liveLogEnabled: false,
         analysisEngine: new analysis_engine_js_1.AnalysisEngine(),
         routes: { pages: [], apiRoutes: [] },
@@ -351,6 +362,55 @@ async function startLocalServer(port) {
                     res.end(JSON.stringify({ partialSuccess: {} }));
                     return;
                 }
+                // POST /dev/errors - Browser error reporting
+                if (req.method === 'POST' && req.url === '/dev/errors') {
+                    try {
+                        const data = JSON.parse(body);
+                        const error = {
+                            type: data.error?.type || 'unknown',
+                            message: data.error?.message || 'No message',
+                            stack: data.error?.stack,
+                            timestamp: data.error?.timestamp || Date.now(),
+                            url: data.url,
+                            userAgent: data.userAgent,
+                            filename: data.error?.filename,
+                            lineno: data.error?.lineno,
+                            colno: data.error?.colno,
+                            html: data.error?.html,
+                        };
+                        store.browserErrors.push(error);
+                        // Keep only last 100 errors
+                        if (store.browserErrors.length > 100) {
+                            store.browserErrors.shift();
+                        }
+                        // Print to console for visibility
+                        if (error.type === 'blank_screen') {
+                            console.log(chalk_1.default.red('\n🚨 [Browser] Blank screen detected!'));
+                            console.log(chalk_1.default.yellow(`   URL: ${error.url}`));
+                        }
+                        else {
+                            console.log(chalk_1.default.red(`\n🚨 [Browser] ${error.type}: ${error.message}`));
+                            if (error.filename) {
+                                console.log(chalk_1.default.gray(`   ${error.filename}:${error.lineno}:${error.colno}`));
+                            }
+                        }
+                        res.writeHead(200);
+                        res.end(JSON.stringify({ success: true }));
+                    }
+                    catch (e) {
+                        res.writeHead(400);
+                        res.end(JSON.stringify({ error: 'Invalid request' }));
+                    }
+                    return;
+                }
+                // GET /monitor.js - Serve browser monitoring script
+                if (req.method === 'GET' && req.url === '/monitor.js') {
+                    const monitorScript = browser_monitor_script_js_1.BROWSER_MONITOR_SCRIPT.replace('__SCANWARP_SERVER__', `'http://localhost:${port}'`);
+                    res.setHeader('Content-Type', 'application/javascript');
+                    res.writeHead(200);
+                    res.end(monitorScript);
+                    return;
+                }
                 // GET /health
                 if (req.method === 'GET' && req.url === '/health') {
                     res.writeHead(200);
@@ -384,6 +444,15 @@ async function startLocalServer(port) {
                     res.end(JSON.stringify({ issues }));
                     return;
                 }
+                // GET /api/browser-errors
+                if (req.method === 'GET' && req.url === '/api/browser-errors') {
+                    res.writeHead(200);
+                    res.end(JSON.stringify({
+                        errors: store.browserErrors.slice(-20), // Last 20 errors
+                        total: store.browserErrors.length
+                    }));
+                    return;
+                }
                 // GET /api/routes
                 if (req.method === 'GET' && req.url === '/api/routes') {
                     const allRoutes = [
@@ -686,7 +755,7 @@ function flattenAttributes(attrs) {
     return result;
 }
 // ─── Child process management ───
-function startDevServer(devCmd, cwd, scanwarpPort, isNextJs) {
+function startDevServer(devCmd, cwd, scanwarpPort, isNextJs, hasInstrumentPackage) {
     const [cmd, ...args] = parseCommand(devCmd);
     // Build env vars
     const env = {
@@ -695,8 +764,8 @@ function startDevServer(devCmd, cwd, scanwarpPort, isNextJs) {
         SCANWARP_PROJECT_ID: 'local-dev',
         SCANWARP_SERVICE_NAME: 'dev',
     };
-    // For non-Next.js, inject NODE_OPTIONS to auto-load instrumentation
-    if (!isNextJs) {
+    // For non-Next.js, inject NODE_OPTIONS to auto-load instrumentation (if installed)
+    if (!isNextJs && hasInstrumentPackage) {
         const existingNodeOpts = process.env.NODE_OPTIONS || '';
         env.NODE_OPTIONS = `--require @scanwarp/instrument ${existingNodeOpts}`.trim();
     }

package/dist/dev/browser-monitor-script.js ADDED Viewed

@@ -0,0 +1,113 @@
+"use strict";
+/**
+ * Browser monitoring script - embedded as string for easy serving
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BROWSER_MONITOR_SCRIPT = void 0;
+exports.BROWSER_MONITOR_SCRIPT = `
+/**
+ * ScanWarp Browser Monitor
+ * Injected into user's app during dev to capture frontend errors
+ * Reports to local ScanWarp dev server
+ */
+(function() {
+  const SCANWARP_SERVER = '__SCANWARP_SERVER__';
+  const errors = [];
+  // Capture console.error
+  const originalError = console.error;
+  console.error = function(...args) {
+    captureError({
+      type: 'console.error',
+      message: args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '),
+      timestamp: Date.now(),
+      stack: new Error().stack
+    });
+    originalError.apply(console, args);
+  };
+  // Capture unhandled errors
+  window.addEventListener('error', (event) => {
+    captureError({
+      type: 'unhandled_error',
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      stack: event.error?.stack,
+      timestamp: Date.now()
+    });
+  });
+  // Capture unhandled promise rejections
+  window.addEventListener('unhandledrejection', (event) => {
+    captureError({
+      type: 'unhandled_rejection',
+      message: event.reason?.message || String(event.reason),
+      stack: event.reason?.stack,
+      timestamp: Date.now()
+    });
+  });
+  // Capture React errors (if React is present)
+  setTimeout(() => {
+    if (window.React && window.ReactDOM) {
+      const originalErrorHandler = window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactDebugCurrentFrame?.setExtraStackFrame;
+      if (originalErrorHandler) {
+        window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDebugCurrentFrame.setExtraStackFrame = function(stack) {
+          captureError({
+            type: 'react_error',
+            message: 'React rendering error',
+            stack: stack,
+            timestamp: Date.now()
+          });
+          originalErrorHandler.call(this, stack);
+        };
+      }
+    }
+  }, 100);
+  // Check if app rendered (detect blank screen)
+  setTimeout(() => {
+    const body = document.body;
+    const hasContent = body && (body.children.length > 1 || body.textContent.trim().length > 0);
+    if (!hasContent) {
+      captureError({
+        type: 'blank_screen',
+        message: 'Page rendered but appears blank - no content in body',
+        timestamp: Date.now(),
+        html: document.documentElement.outerHTML.slice(0, 500)
+      });
+    }
+  }, 2000);
+  // Send error to ScanWarp server
+  function captureError(error) {
+    errors.push(error);
+    // Send to server
+    fetch(SCANWARP_SERVER + '/dev/errors', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        url: window.location.href,
+        userAgent: navigator.userAgent,
+        error: error
+      })
+    }).catch(() => {
+      // Silently fail if server is down
+    });
+  }
+  // Expose for debugging
+  window.__scanwarp = {
+    errors: errors,
+    getErrors: () => errors,
+    clearErrors: () => errors.length = 0
+  };
+  console.log('%c[ScanWarp] %cMonitoring for errors...', 'color: #3b82f6; font-weight: bold', 'color: #6b7280');
+})();
+`;

package/dist/integrations/mcp.js CHANGED Viewed

@@ -95,7 +95,9 @@ async function setupMCP(serverUrl) {
         fs_1.default.writeFileSync(configPath, JSON.stringify(config, null, 2));
         console.log(chalk_1.default.green(`✓ MCP server added to ${toolName} configuration`));
         console.log(chalk_1.default.gray(`  Config: ${configPath}\n`));
-        console.log(chalk_1.default.yellow(`  Restart ${toolName} to load the MCP server\n`));
+        console.log(chalk_1.default.bold.yellow('  📌 One more step:'));
+        console.log(chalk_1.default.yellow(`  Restart ${toolName} to activate the MCP connection`));
+        console.log(chalk_1.default.gray(`  (${toolName} loads MCP servers at startup)\n`));
     }
     catch (error) {
         console.log(chalk_1.default.red('✗ Failed to update MCP config'));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "scanwarp",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Production monitoring built for developers who ship fast. Auto-diagnoses issues with Claude AI.",
   "main": "dist/index.js",
   "bin": {