@memberjunction/react-test-harness 2.97.0 → 2.99.0

package/dist/lib/component-runner.d.ts

@@ -22,7 +22,6 @@ export interface ComponentExecutionResult {
     html: string;
     errors: Violation[];
     warnings: Violation[];
-    criticalWarnings: string[];
     console: {
         type: string;
         text: string;
@@ -59,8 +58,9 @@ export declare class ComponentRunner {
     private loadComponentLibraries;
     /**
      * Set up error tracking in the page
+     * @deprecated Moved inline to page.evaluate after library loading to avoid false positives
      */
-    private setupErrorTracking;
+    private setupErrorTracking_DEPRECATED;
     /**
      * Collect runtime errors from the page
      */

package/dist/lib/component-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IA6sB7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;OAEG;YACW,kBAAkB;IAiFhC;;OAEG;YACW,oBAAoB;IA8ClC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YA+Bb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CA6BtB"}
+{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IA62B7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;;OAGG;YACW,6BAA6B;IA6P3C;;OAEG;YACW,oBAAoB;IAmHlC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YAyBb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CAuBtB"}

package/dist/lib/component-runner.js

@@ -52,7 +52,6 @@ class ComponentRunner {
         const startTime = Date.now();
         const errors = [];
         const warnings = [];
-        const criticalWarnings = [];
         const consoleLogs = [];
         const dataErrors = []; // Track data access errors from RunView/RunQuery
         let renderCount = 0;
@@ -119,10 +118,10 @@ class ComponentRunner {
             if (!runtimeCheck.hasMJRuntime) {
                 throw new Error('Failed to inject MJReactRuntime into page context');
             }
-            // Set up error tracking
-            await this.setupErrorTracking(page);
+            // NOTE: Error tracking setup moved to after library loading to avoid false positives
+            // during library initialization (e.g., antd's UMD bundle setup)
             // Set up console logging
-            this.setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings);
+            this.setupConsoleLogging(page, consoleLogs, warnings);
             // Expose MJ utilities to the page
             await this.exposeMJUtilities(page, options, dataErrors, debug);
             if (debug) {
@@ -182,6 +181,21 @@ class ComponentRunner {
                     // Create runtime context
                     // Note: Component libraries are loaded by the ComponentCompiler itself
                     // via loadRequiredLibraries, so we don't need to pass them here
+                    // Diagnostic: Check if React is available before creating context
+                    if (!window.React) {
+                        console.error('🔴 CRITICAL: React is NULL when creating runtimeContext!');
+                        console.error('Window keys:', Object.keys(window).filter(k => k.toLowerCase().includes('react')));
+                        throw new Error('React is not available in window context');
+                    }
+                    if (debug) {
+                        console.log('✅ React is available:', typeof window.React);
+                        console.log('✅ React hooks check:', {
+                            useState: typeof window.React?.useState,
+                            useEffect: typeof window.React?.useEffect,
+                            useRef: typeof window.React?.useRef,
+                            useMemo: typeof window.React?.useMemo
+                        });
+                    }
                     const runtimeContext = {
                         React: window.React,
                         ReactDOM: window.ReactDOM,
@@ -315,6 +329,94 @@ class ComponentRunner {
                     }
                     // Note: Library components are now handled by the runtime's compiler
                     // which loads them into the appropriate context/closure
+                    // NOW set up enhanced error tracking - AFTER libraries are loaded
+                    // This avoids false positives from library initialization code (e.g., antd)
+                    if (!window.__testHarnessErrorTrackingSetup) {
+                        window.__testHarnessErrorTrackingSetup = true;
+                        // Initialize error tracking arrays if not already done
+                        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                        window.__testHarnessConsoleErrors = window.__testHarnessConsoleErrors || [];
+                        window.__testHarnessConsoleWarnings = window.__testHarnessConsoleWarnings || [];
+                        window.__testHarnessTestFailed = window.__testHarnessTestFailed || false;
+                        window.__testHarnessRenderCount = window.__testHarnessRenderCount || 0;
+                        // Wrap React.createElement to detect invalid element types
+                        const originalCreateElement = window.React?.createElement;
+                        if (originalCreateElement) {
+                            window.React.createElement = function (type, props, ...children) {
+                                window.__testHarnessRenderCount++;
+                                // Enhanced error detection for invalid element types
+                                if (type !== null && type !== undefined) {
+                                    const typeOf = typeof type;
+                                    // Check for the common "object instead of component" error
+                                    if (typeOf === 'object' && !window.React.isValidElement(type)) {
+                                        // Try to get a meaningful name for the object
+                                        let objectInfo = 'unknown object';
+                                        try {
+                                            if (type.constructor && type.constructor.name) {
+                                                objectInfo = type.constructor.name;
+                                            }
+                                            else if (type.name) {
+                                                objectInfo = type.name;
+                                            }
+                                            else {
+                                                // Try to show what properties it has
+                                                const keys = Object.keys(type).slice(0, 5);
+                                                if (keys.length > 0) {
+                                                    objectInfo = `object with properties: ${keys.join(', ')}`;
+                                                }
+                                            }
+                                        }
+                                        catch (e) {
+                                            // Ignore errors in trying to get object info
+                                        }
+                                        // Generate helpful error message
+                                        const errorMsg = [
+                                            `Invalid JSX element type: React received an object (${objectInfo}) instead of a React component function.`,
+                                            '',
+                                            'This often occurs when JSX elements or React.createElement receive an object instead of a valid component function.',
+                                            '',
+                                            'Inspect all instances where you are using JSX elements that come from libraries or components to ensure they are properly referenced.',
+                                            '',
+                                            'The exact fix depends on the specific library or component structure.'
+                                        ].join('\\n');
+                                        // Log to both console and error tracking
+                                        console.error('🔴 Invalid JSX Element Type Detected:', errorMsg);
+                                        // Store the error for later collection
+                                        window.__testHarnessRuntimeErrors.push({
+                                            message: errorMsg,
+                                            type: 'invalid-element-type',
+                                            phase: 'createElement',
+                                            source: 'enhanced-detection',
+                                            elementInfo: objectInfo
+                                        });
+                                        // Still try to call the original to get React's error too
+                                        // This will provide the component stack trace
+                                    }
+                                }
+                                else if (type === undefined) {
+                                    // Undefined component - likely a failed destructure or missing import
+                                    const errorMsg = [
+                                        'Invalid JSX element type: component is undefined.',
+                                        '',
+                                        'This occurs when a JSX element references a component that is undefined at runtime.',
+                                        '',
+                                        'Inspect how this component is being accessed - it may not exist in the expected location or may have a different name.',
+                                        '',
+                                        'Check that the component exists in your dependencies or libraries and is properly referenced.'
+                                    ].join('\\n');
+                                    console.error('🔴 Undefined JSX Component:', errorMsg);
+                                    window.__testHarnessRuntimeErrors.push({
+                                        message: errorMsg,
+                                        type: 'undefined-component',
+                                        phase: 'createElement',
+                                        source: 'enhanced-detection'
+                                    });
+                                }
+                                // Call original createElement
+                                return originalCreateElement.apply(this, [type, props, ...children]);
+                            };
+                        }
+                    }
                     // Render the component
                     const rootElement = document.getElementById('root');
                     if (!rootElement) {
@@ -496,7 +598,15 @@ class ComponentRunner {
             renderCount = await page.evaluate(() => window.__testHarnessRenderCount || 0);
             // Collect all errors with source information
             const runtimeErrorsWithSource = await this.collectRuntimeErrors(page);
-            errors.push(...runtimeErrorsWithSource.map(e => e.message)); // Extract messages for backward compat
+            // Filter out JSX element type errors when adding to errors array
+            errors.push(...runtimeErrorsWithSource
+                .filter(e => {
+                // Skip JSX element type errors from error count
+                const isJSXError = e.type === 'invalid-element-type' ||
+                    e.type === 'undefined-component';
+                return !isJSXError;
+            })
+                .map(e => e.message)); // Extract messages for backward compat
             // Collect warnings (separate from errors)
             const collectedWarnings = await this.collectWarnings(page);
             warnings.push(...collectedWarnings);
@@ -504,12 +614,18 @@ class ComponentRunner {
             const asyncWaitTime = options.asyncErrorWaitTime || 1000;
             await page.waitForTimeout(asyncWaitTime);
             const asyncErrors = await this.collectRuntimeErrors(page);
-            // Only add new errors
+            // Only add new errors (excluding JSX element type errors)
             asyncErrors.forEach(err => {
-                if (!errors.includes(err.message)) {
+                const isJSXError = err.type === 'invalid-element-type' ||
+                    err.type === 'undefined-component';
+                if (!isJSXError && !errors.includes(err.message)) {
                     errors.push(err.message);
                     runtimeErrorsWithSource.push(err); // Keep the structured version too
                 }
+                else if (isJSXError && !runtimeErrorsWithSource.some(e => e.message === err.message)) {
+                    // Still track JSX errors for logging but don't add to errors array
+                    runtimeErrorsWithSource.push(err);
+                }
             });
             // Also check for new warnings
             const asyncWarnings = await this.collectWarnings(page);
@@ -529,17 +645,29 @@ class ComponentRunner {
             }
             // Determine success
             const success = errors.length === 0 &&
-                criticalWarnings.length === 0 &&
                 !hasRenderLoop &&
                 !hasTimeout &&
                 executionResult.success;
             // Combine runtime errors with data errors
             const allErrors = [...errors, ...dataErrors];
-            // Map runtime errors with source info, data errors don't have source
-            const errorViolations = runtimeErrorsWithSource.map(e => ({
+            // Map runtime errors with source info and specific rules
+            // Filter out JSX element type errors - they're too noisy and often false positives
+            const errorViolations = runtimeErrorsWithSource
+                .filter(e => {
+                // Skip JSX element type errors - still logged but not reported as violations
+                const isJSXError = e.rule === 'invalid-jsx-element' ||
+                    e.rule === 'undefined-jsx-component' ||
+                    e.type === 'invalid-element-type' ||
+                    e.type === 'undefined-component';
+                if (isJSXError && debug) {
+                    console.log('📝 JSX element error detected but not reported as violation:', e.message);
+                }
+                return !isJSXError;
+            })
+                .map(e => ({
                 message: e.message,
                 severity: 'critical',
-                rule: 'runtime-error',
+                rule: e.rule || 'runtime-error', // Use specific rule from collectRuntimeErrors
                 line: 0,
                 column: 0,
                 source: e.source
@@ -577,18 +705,39 @@ class ComponentRunner {
                     source: 'user-component' // Data errors are from user's data access code
                 });
             });
+            // Check warnings for critical patterns and move them to errors
+            const criticalWarningViolations = [];
+            const regularWarnings = [];
+            warnings.forEach(w => {
+                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(w))) {
+                    // This is a critical warning - add to errors
+                    criticalWarningViolations.push({
+                        message: w,
+                        severity: 'critical',
+                        rule: 'critical-react-warning',
+                        line: 0,
+                        column: 0,
+                        source: 'react-framework'
+                    });
+                }
+                else {
+                    // Regular warning
+                    regularWarnings.push(w);
+                }
+            });
+            // Combine all error violations
+            const allErrorViolations = [...errorViolations, ...criticalWarningViolations];
             const result = {
-                success: success && dataErrors.length === 0, // Fail if we have data errors
+                success: success && dataErrors.length === 0 && criticalWarningViolations.length === 0, // Fail on critical warnings too
                 html,
-                errors: errorViolations,
-                warnings: warnings.map(w => ({
+                errors: allErrorViolations,
+                warnings: regularWarnings.map(w => ({
                     message: w,
                     severity: 'low',
                     rule: 'warning',
                     line: 0,
                     column: 0
                 })),
-                criticalWarnings,
                 console: consoleLogs,
                 screenshot,
                 executionTime: Date.now() - startTime,
@@ -636,7 +785,6 @@ class ComponentRunner {
                     line: 0,
                     column: 0
                 })),
-                criticalWarnings,
                 console: consoleLogs,
                 executionTime: Date.now() - startTime,
                 renderCount
@@ -834,21 +982,93 @@ class ComponentRunner {
     }
     /**
      * Set up error tracking in the page
+     * @deprecated Moved inline to page.evaluate after library loading to avoid false positives
      */
-    async setupErrorTracking(page) {
-        await page.evaluate(() => {
+    async setupErrorTracking_DEPRECATED(page, componentSpec, allLibraries) {
+        await page.evaluate(({ spec, availableLibraries }) => {
             // Initialize error tracking
             window.__testHarnessRuntimeErrors = [];
             window.__testHarnessConsoleErrors = [];
             window.__testHarnessConsoleWarnings = [];
             window.__testHarnessTestFailed = false;
             window.__testHarnessRenderCount = 0;
-            // Track renders
+            // Track renders and detect invalid element types
             const originalCreateElement = window.React?.createElement;
             if (originalCreateElement) {
-                window.React.createElement = function (...args) {
+                window.React.createElement = function (type, props, ...children) {
                     window.__testHarnessRenderCount++;
-                    return originalCreateElement.apply(this, args);
+                    // Enhanced error detection for invalid element types
+                    if (type !== null && type !== undefined) {
+                        const typeOf = typeof type;
+                        // Check for the common "object instead of component" error
+                        if (typeOf === 'object' && !window.React.isValidElement(type)) {
+                            // Try to get a meaningful name for the object
+                            let objectInfo = 'unknown object';
+                            try {
+                                if (type.constructor && type.constructor.name) {
+                                    objectInfo = type.constructor.name;
+                                }
+                                else if (type.name) {
+                                    objectInfo = type.name;
+                                }
+                                else {
+                                    // Try to show what properties it has
+                                    const keys = Object.keys(type).slice(0, 5);
+                                    if (keys.length > 0) {
+                                        objectInfo = `object with properties: ${keys.join(', ')}`;
+                                    }
+                                }
+                            }
+                            catch (e) {
+                                // Ignore errors in trying to get object info
+                            }
+                            // Generate helpful error message
+                            const errorMsg = [
+                                `Invalid JSX element type: React received an object (${objectInfo}) instead of a React component function.`,
+                                '',
+                                'This often occurs when JSX elements or React.createElement receive an object instead of a valid component function.',
+                                '',
+                                'Inspect all instances where you are using JSX elements that come from libraries or components to ensure they are properly referenced.',
+                                '',
+                                'The exact fix depends on the specific library or component structure.'
+                            ].join('\\n');
+                            // Log to both console and error tracking
+                            console.error('🔴 Invalid JSX Element Type Detected:', errorMsg);
+                            // Store the error for later collection
+                            window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                            window.__testHarnessRuntimeErrors.push({
+                                message: errorMsg,
+                                type: 'invalid-element-type',
+                                phase: 'createElement',
+                                source: 'enhanced-detection',
+                                elementInfo: objectInfo
+                            });
+                            // Still try to call the original to get React's error too
+                            // This will provide the component stack trace
+                        }
+                    }
+                    else if (type === undefined) {
+                        // Undefined component - likely a failed destructure or missing import
+                        const errorMsg = [
+                            'Invalid JSX element type: component is undefined.',
+                            '',
+                            'This occurs when a JSX element references a component that is undefined at runtime.',
+                            '',
+                            'Inspect how this component is being accessed - it may not exist in the expected location or may have a different name.',
+                            '',
+                            'Check that the component exists in your dependencies or libraries and is properly referenced.'
+                        ].join('\\n');
+                        console.error('🔴 Undefined JSX Component:', errorMsg);
+                        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                        window.__testHarnessRuntimeErrors.push({
+                            message: errorMsg,
+                            type: 'undefined-component',
+                            phase: 'createElement',
+                            source: 'enhanced-detection'
+                        });
+                    }
+                    // Call original createElement
+                    return originalCreateElement.call(this, type, props, ...children);
                 };
             }
             // Override console.error
@@ -877,9 +1097,82 @@ class ComponentRunner {
                 }
                 originalConsoleError.apply(console, args);
             };
+            // Helper function to analyze undefined identifiers
+            const analyzeUndefinedIdentifier = (identifier, spec, availableLibraries) => {
+                const result = {
+                    isInSpecLibraries: false,
+                    isInSpecDependencies: false,
+                    isAvailableLibrary: false,
+                    matchedLibrary: null,
+                    specLibraries: spec?.libraries || [],
+                    specDependencies: spec?.dependencies || []
+                };
+                // Check if it's in spec libraries
+                result.isInSpecLibraries = result.specLibraries.some((lib) => lib.globalVariable === identifier);
+                // Check if it's in spec dependencies  
+                result.isInSpecDependencies = result.specDependencies.some((dep) => dep.name === identifier);
+                // Check against ALL available libraries (case-insensitive)
+                if (availableLibraries) {
+                    const availableLib = availableLibraries.find((lib) => lib.GlobalVariable &&
+                        lib.GlobalVariable.toLowerCase() === identifier.toLowerCase());
+                    if (availableLib) {
+                        result.isAvailableLibrary = true;
+                        result.matchedLibrary = availableLib;
+                    }
+                }
+                return result;
+            };
+            // Helper function to generate guidance message
+            const generateGuidance = (identifier, analysis) => {
+                // Case 1: Trying to use a library not in their spec
+                if (analysis.isAvailableLibrary && !analysis.isInSpecLibraries) {
+                    const libList = analysis.specLibraries.length > 0
+                        ? analysis.specLibraries.map((l) => l.globalVariable || l.name).filter(Boolean).join(', ')
+                        : 'no third-party libraries';
+                    return `${identifier} is not defined. It appears you're trying to use the ${analysis.matchedLibrary.Name} library. ` +
+                        `You do NOT have access to this library. ` +
+                        `Your architect gave you access to: ${libList}. ` +
+                        `You must work within these constraints and cannot load additional libraries.`;
+                }
+                // Case 2: Should be a component but not properly accessed
+                if (analysis.isInSpecDependencies) {
+                    return `${identifier} is not defined. This component exists in your dependencies. ` +
+                        `Ensure you've destructured it: const { ${identifier} } = components; ` +
+                        `or accessed it as: components.${identifier}`;
+                }
+                // Case 3: Not a valid library or component
+                const libList = analysis.specLibraries.length > 0
+                    ? `Available libraries: ${analysis.specLibraries.map((l) => l.globalVariable || l.name).filter(Boolean).join(', ')}`
+                    : 'No third-party libraries are available';
+                const depList = analysis.specDependencies.length > 0
+                    ? `Available components: ${analysis.specDependencies.map((d) => d.name).join(', ')}`
+                    : 'No component dependencies are available';
+                return `${identifier} is not defined. This is not a valid library or component in your specification. ` +
+                    `${libList}. ${depList}. ` +
+                    `You must only use the libraries and components specified in your component specification.`;
+            };
             // Global error handler
             window.addEventListener('error', (event) => {
-                // Determine source based on error content
+                // Check for "X is not defined" errors
+                const notDefinedMatch = event.message?.match(/^(\w+) is not defined$/);
+                if (notDefinedMatch) {
+                    const identifier = notDefinedMatch[1];
+                    // Analyze what this identifier might be
+                    const analysis = analyzeUndefinedIdentifier(identifier, spec, availableLibraries);
+                    // Generate specific guidance
+                    const guidance = generateGuidance(identifier, analysis);
+                    // Store enhanced error with specific guidance
+                    window.__testHarnessRuntimeErrors.push({
+                        message: guidance,
+                        stack: event.error?.stack,
+                        type: 'undefined-identifier',
+                        source: 'user-component',
+                        identifier: identifier
+                    });
+                    window.__testHarnessTestFailed = true;
+                    return;
+                }
+                // Handle other errors as before
                 let source = 'user-component'; // Default to user component
                 if (event.message && event.message.includes('Script error')) {
                     source = 'runtime-wrapper';
@@ -903,7 +1196,7 @@ class ComponentRunner {
                 window.__testHarnessTestFailed = true;
                 event.preventDefault();
             });
-        });
+        }, { spec: componentSpec, availableLibraries: allLibraries || [] });
     }
     /**
      * Collect runtime errors from the page
@@ -916,7 +1209,8 @@ class ComponentRunner {
                 testFailed: window.__testHarnessTestFailed || false
             };
         });
-        const errors = [];
+        // Track unique errors and their counts
+        const errorMap = new Map();
         // Check if we have any specific React render errors
         const hasSpecificReactError = errorData.runtimeErrors.some((error) => error.type === 'react-render-error' &&
             !error.message.includes('Script error'));
@@ -928,19 +1222,84 @@ class ComponentRunner {
                 error.message === 'Script error.') {
                 return; // Skip this generic error
             }
-            const phase = error.phase ? ` (during ${error.phase})` : '';
-            const errorMsg = `${error.type} error: ${error.message}${phase}`;
-            errors.push({
-                message: errorMsg,
-                source: error.source
-            });
+            // Map error types to specific rule names
+            let rule = 'runtime-error';
+            switch (error.type) {
+                case 'invalid-element-type':
+                    rule = 'invalid-jsx-element';
+                    break;
+                case 'undefined-component':
+                    rule = 'undefined-jsx-component';
+                    break;
+                case 'undefined-identifier':
+                    rule = 'undefined-identifier';
+                    break;
+                case 'react-render-error':
+                    rule = 'react-render-error';
+                    break;
+                case 'render-loop':
+                    rule = 'infinite-render-loop';
+                    break;
+                case 'registration-error':
+                    rule = 'component-registration-error';
+                    break;
+                case 'execution-error':
+                    rule = 'execution-error';
+                    break;
+                case 'runtime':
+                    rule = 'runtime-error';
+                    break;
+                case 'promise-rejection':
+                    rule = 'unhandled-promise-rejection';
+                    break;
+            }
+            // Create a key for deduplication based on message and type
+            const key = `${error.type}:${error.message}`;
+            if (errorMap.has(key)) {
+                // Increment count for duplicate
+                errorMap.get(key).count++;
+            }
+            else {
+                // Add new error
+                errorMap.set(key, {
+                    error: {
+                        message: error.message,
+                        source: error.source,
+                        type: error.type,
+                        rule: rule
+                    },
+                    count: 1
+                });
+            }
         });
-        // Console errors don't have source info
+        // Process console errors
         errorData.consoleErrors.forEach((error) => {
-            const errorMsg = `Console error: ${error}`;
+            const key = `console-error:${error}`;
+            if (errorMap.has(key)) {
+                errorMap.get(key).count++;
+            }
+            else {
+                errorMap.set(key, {
+                    error: {
+                        message: error,
+                        source: 'react-framework',
+                        type: 'console-error',
+                        rule: 'console-error'
+                    },
+                    count: 1
+                });
+            }
+        });
+        // Convert map to array with occurrence counts
+        const errors = [];
+        errorMap.forEach(({ error, count }) => {
+            // Append count if > 1
+            const message = count > 1
+                ? `${error.message} (occurred ${count} times)`
+                : error.message;
             errors.push({
-                message: errorMsg,
-                source: 'react-framework' // Console errors from React are framework level
+                ...error,
+                message
             });
         });
         return errors;
@@ -965,7 +1324,7 @@ class ComponentRunner {
     /**
      * Set up console logging
      */
-    setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings) {
+    setupConsoleLogging(page, consoleLogs, warnings) {
         page.on('console', (msg) => {
             const type = msg.type();
             const text = msg.text();
@@ -976,10 +1335,6 @@ class ComponentRunner {
                 if (!warnings.includes(text)) {
                     warnings.push(text);
                 }
-                // Check if it's a critical warning that should fail the test
-                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text))) {
-                    criticalWarnings.push(text);
-                }
             }
         });
         page.on('pageerror', (error) => {
@@ -1440,12 +1795,6 @@ class ComponentRunner {
                 console.log(`  ${i + 1}. ${warn.message}`);
             });
         }
-        if (result.criticalWarnings && result.criticalWarnings.length > 0) {
-            console.log('\n🔴 Critical Warnings:', result.criticalWarnings.length);
-            result.criticalWarnings.forEach((warn, i) => {
-                console.log(`  ${i + 1}. ${warn}`);
-            });
-        }
         console.log('\n========================================\n');
     }
 }