@memberjunction/react-runtime 2.71.0 → 2.72.0

package/src/utilities/component-error-analyzer.ts

@@ -0,0 +1,315 @@
+/**
+ * @fileoverview Component error analysis utilities
+ * Provides methods to analyze component errors and identify failed components
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+/**
+ * Information about a failed component
+ */
+export interface FailedComponentInfo {
+  /** Component name that failed */
+  componentName: string;
+  /** Error type (e.g., 'not_defined', 'render_error', 'property_error') */
+  errorType: string;
+  /** Original error message */
+  errorMessage: string;
+  /** Line number if available */
+  lineNumber?: number;
+  /** Additional context */
+  context?: string;
+}
+
+/**
+ * Analyzes component errors to provide detailed failure information
+ */
+export class ComponentErrorAnalyzer {
+  /**
+   * Common error patterns for component failures
+   */
+  private static readonly ERROR_PATTERNS = [
+    {
+      // Component is not defined
+      pattern: /ReferenceError: (\w+) is not defined/,
+      errorType: 'not_defined',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Cannot read property of undefined (component reference)
+      pattern: /Cannot read propert(?:y|ies) '(\w+)' of undefined/,
+      errorType: 'property_error',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Component render errors
+      pattern: /(\w+)\(\.\.\.\): Nothing was returned from render/,
+      errorType: 'render_error',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Component in stack trace
+      pattern: /at (\w+Component\w*)/,
+      errorType: 'stack_trace',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // React component errors
+      pattern: /Error: Unable to find node on an unmounted component/,
+      errorType: 'unmounted_component',
+      extractComponent: () => null // Need to look at stack trace
+    },
+    {
+      // Hook errors
+      pattern: /Invalid hook call.*component (\w+)/,
+      errorType: 'invalid_hook',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Type errors in components
+      pattern: /TypeError:.*in (\w+) \(at/,
+      errorType: 'type_error',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Missing imports/components
+      pattern: /Module not found: Error: Can't resolve '\.\/(\w+)'/,
+      errorType: 'missing_import',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Component is not a function
+      pattern: /(\w+) is not a function/,
+      errorType: 'not_a_function',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    },
+    {
+      // Minified React error with component hint
+      pattern: /Minified React error.*Visit.*for the full message.*component[: ](\w+)/s,
+      errorType: 'react_error',
+      extractComponent: (match: RegExpMatchArray) => match[1]
+    }
+  ];
+
+  /**
+   * Analyzes error messages to identify which components failed
+   * @param errors Array of error messages
+   * @returns Array of failed component names
+   */
+  static identifyFailedComponents(errors: string[]): string[] {
+    const failedComponents = new Set<string>();
+    
+    for (const error of errors) {
+      const components = this.extractComponentsFromError(error);
+      components.forEach(comp => failedComponents.add(comp));
+    }
+    
+    return Array.from(failedComponents);
+  }
+
+  /**
+   * Analyzes errors and returns detailed information about failures
+   * @param errors Array of error messages
+   * @returns Array of detailed failure information
+   */
+  static analyzeComponentErrors(errors: string[]): FailedComponentInfo[] {
+    const failures: FailedComponentInfo[] = [];
+    
+    for (const error of errors) {
+      const failureInfo = this.analyzeError(error);
+      failures.push(...failureInfo);
+    }
+    
+    // Remove duplicates based on component name and error type
+    const uniqueFailures = new Map<string, FailedComponentInfo>();
+    failures.forEach(failure => {
+      const key = `${failure.componentName}-${failure.errorType}`;
+      if (!uniqueFailures.has(key)) {
+        uniqueFailures.set(key, failure);
+      }
+    });
+    
+    return Array.from(uniqueFailures.values());
+  }
+
+  /**
+   * Extract component names from a single error message
+   */
+  private static extractComponentsFromError(error: string): string[] {
+    const components: string[] = [];
+    
+    for (const errorPattern of this.ERROR_PATTERNS) {
+      const match = error.match(errorPattern.pattern);
+      if (match) {
+        const componentName = errorPattern.extractComponent(match);
+        if (componentName && this.isLikelyComponentName(componentName)) {
+          components.push(componentName);
+        }
+      }
+    }
+    
+    // Also check for components in stack traces
+    const stackComponents = this.extractComponentsFromStackTrace(error);
+    components.push(...stackComponents);
+    
+    return components;
+  }
+
+  /**
+   * Analyze a single error and return detailed information
+   */
+  private static analyzeError(error: string): FailedComponentInfo[] {
+    const failures: FailedComponentInfo[] = [];
+    
+    for (const errorPattern of this.ERROR_PATTERNS) {
+      const match = error.match(errorPattern.pattern);
+      if (match) {
+        const componentName = errorPattern.extractComponent(match);
+        if (componentName && this.isLikelyComponentName(componentName)) {
+          failures.push({
+            componentName,
+            errorType: errorPattern.errorType,
+            errorMessage: error,
+            lineNumber: this.extractLineNumber(error),
+            context: this.extractContext(error)
+          });
+        }
+      }
+    }
+    
+    // If no specific pattern matched, try to extract from stack trace
+    if (failures.length === 0) {
+      const stackComponents = this.extractComponentsFromStackTrace(error);
+      stackComponents.forEach(componentName => {
+        failures.push({
+          componentName,
+          errorType: 'unknown',
+          errorMessage: error,
+          lineNumber: this.extractLineNumber(error)
+        });
+      });
+    }
+    
+    return failures;
+  }
+
+  /**
+   * Extract component names from stack trace
+   */
+  private static extractComponentsFromStackTrace(error: string): string[] {
+    const components: string[] = [];
+    
+    // Look for React component patterns in stack traces
+    const stackPatterns = [
+      /at (\w+Component\w*)/g,
+      /at (\w+)\s*\(/g,
+      /in (\w+)\s*\(at/g,
+      /in (\w+)\s*\(created by/g
+    ];
+    
+    for (const pattern of stackPatterns) {
+      let match;
+      while ((match = pattern.exec(error)) !== null) {
+        const name = match[1];
+        if (this.isLikelyComponentName(name)) {
+          components.push(name);
+        }
+      }
+    }
+    
+    return [...new Set(components)]; // Remove duplicates
+  }
+
+  /**
+   * Check if a string is likely to be a React component name
+   */
+  private static isLikelyComponentName(name: string): boolean {
+    // Component names typically:
+    // - Start with uppercase letter
+    // - Are not JavaScript built-ins
+    // - Are not common non-component names
+    
+    const jsBuiltins = new Set([
+      'Object', 'Array', 'String', 'Number', 'Boolean', 'Function',
+      'Promise', 'Error', 'TypeError', 'ReferenceError', 'SyntaxError',
+      'undefined', 'null', 'console', 'window', 'document'
+    ]);
+    
+    const nonComponents = new Set([
+      'render', 'setState', 'forceUpdate', 'props', 'state', 'context',
+      'componentDidMount', 'componentWillUnmount', 'useEffect', 'useState'
+    ]);
+    
+    return (
+      name.length > 0 &&
+      /^[A-Z]/.test(name) && // Starts with uppercase
+      !jsBuiltins.has(name) &&
+      !nonComponents.has(name) &&
+      !/^use[A-Z]/.test(name) // Not a hook
+    );
+  }
+
+  /**
+   * Extract line number from error message
+   */
+  private static extractLineNumber(error: string): number | undefined {
+    // Look for patterns like ":12:34" or "line 12"
+    const patterns = [
+      /:(\d+):\d+/,
+      /line (\d+)/i,
+      /Line (\d+)/
+    ];
+    
+    for (const pattern of patterns) {
+      const match = error.match(pattern);
+      if (match) {
+        return parseInt(match[1], 10);
+      }
+    }
+    
+    return undefined;
+  }
+
+  /**
+   * Extract additional context from error
+   */
+  private static extractContext(error: string): string | undefined {
+    // Extract file names or additional context
+    const fileMatch = error.match(/\(at ([^)]+)\)/);
+    if (fileMatch) {
+      return fileMatch[1];
+    }
+    
+    // Extract "created by" information
+    const createdByMatch = error.match(/created by (\w+)/);
+    if (createdByMatch) {
+      return `Created by ${createdByMatch[1]}`;
+    }
+    
+    return undefined;
+  }
+
+  /**
+   * Format error analysis results for logging
+   */
+  static formatAnalysisResults(failures: FailedComponentInfo[]): string {
+    if (failures.length === 0) {
+      return 'No component failures detected';
+    }
+    
+    let result = `Detected ${failures.length} component failure(s):\n`;
+    
+    failures.forEach((failure, index) => {
+      result += `\n${index + 1}. Component: ${failure.componentName}\n`;
+      result += `   Error Type: ${failure.errorType}\n`;
+      if (failure.lineNumber) {
+        result += `   Line: ${failure.lineNumber}\n`;
+      }
+      if (failure.context) {
+        result += `   Context: ${failure.context}\n`;
+      }
+      result += `   Message: ${failure.errorMessage.substring(0, 200)}${failure.errorMessage.length > 200 ? '...' : ''}\n`;
+    });
+    
+    return result;
+  }
+}

package/src/utilities/index.ts

@@ -5,4 +5,6 @@
 
 export * from './runtime-utilities';
 export * from './component-styles';
-export * from './standard-libraries';
+export * from './standard-libraries';
+export * from './library-loader';
+export * from './component-error-analyzer';

package/src/utilities/library-loader.ts

@@ -0,0 +1,307 @@
+/**
+ * @fileoverview Library loading utilities for React runtime
+ * Provides methods to load and manage external JavaScript libraries and CSS
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+import { 
+  STANDARD_LIBRARY_URLS,
+  StandardLibraries,
+  getCoreLibraryUrls,
+  getUILibraryUrls,
+  getCSSUrls
+} from './standard-libraries';
+
+/**
+ * Represents a loaded script or CSS resource
+ */
+interface LoadedResource {
+  element: HTMLScriptElement | HTMLLinkElement;
+  promise: Promise<any>;
+}
+
+/**
+ * Options for loading libraries
+ */
+export interface LibraryLoadOptions {
+  /** Load core libraries (lodash, d3, Chart.js, dayjs) */
+  loadCore?: boolean;
+  /** Load UI libraries (antd, React Bootstrap) */
+  loadUI?: boolean;
+  /** Load CSS files for UI libraries */
+  loadCSS?: boolean;
+  /** Custom library URLs to load */
+  customLibraries?: { url: string; globalName: string }[];
+}
+
+/**
+ * Result of loading libraries
+ */
+export interface LibraryLoadResult {
+  React: any;
+  ReactDOM: any;
+  Babel: any;
+  libraries: StandardLibraries;
+}
+
+/**
+ * Library loader class for managing external script loading
+ */
+export class LibraryLoader {
+  private static loadedResources = new Map<string, LoadedResource>();
+
+  /**
+   * Load all standard libraries (core + UI + CSS)
+   * This is the main method that should be used by test harness and Angular wrapper
+   */
+  static async loadAllLibraries(): Promise<LibraryLoadResult> {
+    return this.loadLibraries({
+      loadCore: true,
+      loadUI: true,
+      loadCSS: true
+    });
+  }
+
+  /**
+   * Load libraries with specific options
+   */
+  static async loadLibraries(options: LibraryLoadOptions): Promise<LibraryLoadResult> {
+    const {
+      loadCore = true,
+      loadUI = true,
+      loadCSS = true,
+      customLibraries = []
+    } = options;
+
+    // Load React ecosystem first
+    const [React, ReactDOM, Babel] = await Promise.all([
+      this.loadScript(STANDARD_LIBRARY_URLS.REACT, 'React'),
+      this.loadScript(STANDARD_LIBRARY_URLS.REACT_DOM, 'ReactDOM'),
+      this.loadScript(STANDARD_LIBRARY_URLS.BABEL, 'Babel')
+    ]);
+
+    // Load CSS files if requested (non-blocking)
+    if (loadCSS) {
+      getCSSUrls().forEach(url => this.loadCSS(url));
+    }
+
+    // Prepare library loading promises
+    const libraryPromises: Promise<any>[] = [];
+    const libraryNames: string[] = [];
+
+    // Core libraries
+    if (loadCore) {
+      const coreUrls = getCoreLibraryUrls();
+      coreUrls.forEach(url => {
+        const name = this.getLibraryNameFromUrl(url);
+        libraryNames.push(name);
+        libraryPromises.push(this.loadScript(url, name));
+      });
+    }
+
+    // UI libraries
+    if (loadUI) {
+      const uiUrls = getUILibraryUrls();
+      uiUrls.forEach(url => {
+        const name = this.getLibraryNameFromUrl(url);
+        libraryNames.push(name);
+        libraryPromises.push(this.loadScript(url, name));
+      });
+    }
+
+    // Custom libraries
+    customLibraries.forEach(({ url, globalName }) => {
+      libraryNames.push(globalName);
+      libraryPromises.push(this.loadScript(url, globalName));
+    });
+
+    // Load all libraries
+    const loadedLibraries = await Promise.all(libraryPromises);
+
+    // Build libraries object
+    const libraries: StandardLibraries = {
+      _: undefined // Initialize with required property
+    };
+    libraryNames.forEach((name, index) => {
+      // Map common names
+      if (name === '_') {
+        libraries._ = loadedLibraries[index];
+      } else {
+        libraries[name] = loadedLibraries[index];
+      }
+    });
+
+    // Ensure all standard properties exist
+    if (!libraries._) libraries._ = (window as any)._;
+    if (!libraries.d3) libraries.d3 = (window as any).d3;
+    if (!libraries.Chart) libraries.Chart = (window as any).Chart;
+    if (!libraries.dayjs) libraries.dayjs = (window as any).dayjs;
+    if (!libraries.antd) libraries.antd = (window as any).antd;
+    if (!libraries.ReactBootstrap) libraries.ReactBootstrap = (window as any).ReactBootstrap;
+
+    return {
+      React,
+      ReactDOM,
+      Babel,
+      libraries
+    };
+  }
+
+  /**
+   * Load a script from URL
+   */
+  private static async loadScript(url: string, globalName: string): Promise<any> {
+    // Check if already loaded
+    const existing = this.loadedResources.get(url);
+    if (existing) {
+      return existing.promise;
+    }
+
+    const promise = new Promise((resolve, reject) => {
+      // Check if global already exists
+      const existingGlobal = (window as any)[globalName];
+      if (existingGlobal) {
+        resolve(existingGlobal);
+        return;
+      }
+
+      // Check if script tag exists
+      const existingScript = document.querySelector(`script[src="${url}"]`);
+      if (existingScript) {
+        this.waitForScriptLoad(existingScript as HTMLScriptElement, globalName, resolve, reject);
+        return;
+      }
+
+      // Create new script
+      const script = document.createElement('script');
+      script.src = url;
+      script.async = true;
+      script.crossOrigin = 'anonymous';
+
+      script.onload = () => {
+        const global = (window as any)[globalName];
+        if (global) {
+          resolve(global);
+        } else {
+          // Some libraries may take a moment to initialize
+          setTimeout(() => {
+            const delayedGlobal = (window as any)[globalName];
+            if (delayedGlobal) {
+              resolve(delayedGlobal);
+            } else {
+              reject(new Error(`${globalName} not found after script load`));
+            }
+          }, 100);
+        }
+      };
+
+      script.onerror = () => {
+        reject(new Error(`Failed to load script: ${url}`));
+      };
+
+      document.head.appendChild(script);
+    });
+
+    this.loadedResources.set(url, { 
+      element: document.querySelector(`script[src="${url}"]`)!, 
+      promise 
+    });
+
+    return promise;
+  }
+
+  /**
+   * Load CSS from URL
+   */
+  private static loadCSS(url: string): void {
+    if (this.loadedResources.has(url)) {
+      return;
+    }
+
+    const existingLink = document.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      return;
+    }
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+
+    this.loadedResources.set(url, {
+      element: link,
+      promise: Promise.resolve()
+    });
+  }
+
+  /**
+   * Wait for existing script to load
+   */
+  private static waitForScriptLoad(
+    script: HTMLScriptElement,
+    globalName: string,
+    resolve: (value: any) => void,
+    reject: (reason: any) => void
+  ): void {
+    const checkGlobal = () => {
+      const global = (window as any)[globalName];
+      if (global) {
+        resolve(global);
+      } else {
+        // Retry after a short delay
+        setTimeout(() => {
+          const delayedGlobal = (window as any)[globalName];
+          if (delayedGlobal) {
+            resolve(delayedGlobal);
+          } else {
+            reject(new Error(`${globalName} not found after script load`));
+          }
+        }, 100);
+      }
+    };
+
+    // Check if already loaded
+    if ((script as any).complete || (script as any).readyState === 'complete') {
+      checkGlobal();
+      return;
+    }
+
+    // Wait for load
+    const loadHandler = () => {
+      script.removeEventListener('load', loadHandler);
+      checkGlobal();
+    };
+    script.addEventListener('load', loadHandler);
+  }
+
+  /**
+   * Get library name from URL for global variable mapping
+   */
+  private static getLibraryNameFromUrl(url: string): string {
+    // Map known URLs to their global variable names
+    if (url.includes('lodash')) return '_';
+    if (url.includes('d3')) return 'd3';
+    if (url.includes('Chart.js') || url.includes('chart')) return 'Chart';
+    if (url.includes('dayjs')) return 'dayjs';
+    if (url.includes('antd')) return 'antd';
+    if (url.includes('react-bootstrap')) return 'ReactBootstrap';
+    
+    // Default: extract name from URL
+    const match = url.match(/\/([^\/]+)(?:\.min)?\.js$/);
+    return match ? match[1] : 'unknown';
+  }
+
+  /**
+   * Get all loaded resources (for cleanup)
+   */
+  static getLoadedResources(): Map<string, LoadedResource> {
+    return this.loadedResources;
+  }
+
+  /**
+   * Clear loaded resources cache
+   */
+  static clearCache(): void {
+    this.loadedResources.clear();
+  }
+}