Master JavaScript Tracking: 7 تکنیک اساسی برای برنامه های قابل اعتماد

window.addEventListener('error', function(event) {
  const { message, filename, lineno, colno, error } = event;

  // Collect environmental context
  const context = {
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString(),
    viewportWidth: window.innerWidth,
    viewportHeight: window.innerHeight,
    // Add application-specific state here
  };

  // Send to tracking system
  reportError({
    type: 'runtime',
    message,
    stack: error?.stack,
    lineNumber: lineno,
    columnNumber: colno,
    fileName: filename,
    context
  });
});

window.addEventListener('unhandledrejection', function(event) {
  reportError({
    type: 'promise',
    message: event.reason?.message || 'Unhandled Promise Rejection',
    stack: event.reason?.stack,
    context: {
      url: window.location.href,
      timestamp: new Date().toISOString()
    }
  });
});

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    reportError({
      type: 'react',
      message: error.message,
      stack: error.stack,
      componentStack: info.componentStack,
      componentName: this.constructor.name,
      props: JSON.stringify(this.props)
    });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

async function enhanceStackTrace(stack, sourceMapUrl) {
  if (!stack) return stack;

  try {
    const sourceMapConsumer = await new SourceMapConsumer(sourceMapUrl);

    const lines = stack.split('\n');
    const enhancedLines = lines.map(line => {
      const match = line.match(/at\s+(.+)\s+\((.+):(\d+):(\d+)\)/);
      if (!match) return line;

      const [_, functionName, file, lineNumber, columnNumber] = match;
      const position = sourceMapConsumer.originalPositionFor({
        line: parseInt(lineNumber, 10),
        column: parseInt(columnNumber, 10)
      });

      if (!position.source) return line;

      return `at ${functionName} (${position.source}:${position.line}:${position.column})`;
    });

    sourceMapConsumer.destroy();
    return enhancedLines.join('\n');
  } catch (err) {
    console.warn('Failed to enhance stack trace:', err);
    return stack;
  }
}

function categorizeError(error) {
  // Define error patterns
  const patterns = [
    { 
      regex: /network|failed to fetch|cors|timeout/i, 
      category: 'network', 
      severity: 'warning'
    },
    { 
      regex: /undefined is not a function|cannot read property/i, 
      category: 'type', 
      severity: 'error'
    },
    { 
      regex: /syntax error|unexpected token/i, 
      category: 'syntax', 
      severity: 'critical'
    },
    { 
      regex: /out of memory|stack size exceeded/i, 
      category: 'memory', 
      severity: 'critical'
    }
  ];

  const message = error.message || '';
  const stack = error.stack || '';
  const content = message + ' ' + stack;

  // Find matching pattern
  for (const pattern of patterns) {
    if (pattern.regex.test(content)) {
      return {
        category: pattern.category,
        severity: pattern.severity
      };
    }
  }

  // Default categorization
  return {
    category: 'unknown',
    severity: 'error'
  };
}

function getErrorFingerprint(error) {
  const message = error.message || '';
  const stack = error.stack || '';

  // Extract the first line from the stack trace (most specific to the error location)
  const stackLine = stack.split('\n')[1] || '';

  // Remove variable values from the message and line numbers that might change
  const normalizedMessage = message.replace(/(['"]).*?\1/g, '$1...$1')
                                    .replace(/\d+/g, 'N');

  // Create a stable identifier
  return md5(normalizedMessage + ' at ' + stackLine.trim());
}

class ErrorThrottler {
  constructor() {
    this.errorCounts = new Map();
    this.lastReported = new Map();
  }

  shouldReport(errorFingerprint) {
    const now = Date.now();
    const count = (this.errorCounts.get(errorFingerprint) || 0) + 1;
    this.errorCounts.set(errorFingerprint, count);

    const lastTime = this.lastReported.get(errorFingerprint) || 0;
    const timeSinceLast = now - lastTime;

    // Calculate backoff time: 5 seconds × 2^(count-1), maxed at 2 hours
    const backoffTime = Math.min(5000 * Math.pow(2, count - 1), 7200000);

    if (timeSinceLast < backoffTime) {
      return false;
    }

    this.lastReported.set(errorFingerprint, now);
    return true;
  }

  reset(errorFingerprint) {
    this.errorCounts.delete(errorFingerprint);
    this.lastReported.delete(errorFingerprint);
  }
}

class ApiError extends Error {
  constructor(message, statusCode, endpoint, requestData) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.endpoint = endpoint;
    this.requestData = requestData;
    this.timestamp = new Date().toISOString();

    // Capture stack trace, excluding constructor call
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, ApiError);
    }
  }

  toJSON() {
    return {
      name: this.name,
      message: this.message,
      statusCode: this.statusCode,
      endpoint: this.endpoint,
      timestamp: this.timestamp
    };
  }
}

// Usage example
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

    if (!response.ok) {
      throw new ApiError(
        `Failed to fetch user data: ${response.statusText}`,
        response.status,
        `/api/users/${userId}`,
        { userId }
      );
    }

    return await response.json();
  } catch (error) {
    if (error instanceof ApiError) {
      // Handle API-specific error
      errorTracker.trackError(error);
      return null;
    }

    // Handle other errors (network, parsing, etc.)
    errorTracker.trackError(new ApiError(
      'Network or parsing error',
      0,
      `/api/users/${userId}`,
      { userId, originalError: error.message }
    ));
    return null;
  }
}

class UserImpactTracker {
  constructor() {
    this.sessionId = generateUniqueId();
    this.userJourney = [];
    this.errorsEncountered = new Map();
  }

  recordStep(stepName, metadata = {}) {
    this.userJourney.push({
      step: stepName,
      timestamp: Date.now(),
      metadata
    });
  }

  recordError(error, stepName) {
    const errorFingerprint = getErrorFingerprint(error);

    if (!this.errorsEncountered.has(errorFingerprint)) {
      this.errorsEncountered.set(errorFingerprint, []);
    }

    this.errorsEncountered.get(errorFingerprint).push({
      timestamp: Date.now(),
      step: stepName || this.getCurrentStep(),
      errorMessage: error.message
    });

    // Associate error with user journey
    reportError({
      ...error,
      sessionId: this.sessionId,
      currentStep: stepName || this.getCurrentStep(),
      journeyLength: this.userJourney.length
    });
  }

  getCurrentStep() {
    if (this.userJourney.length === 0) return 'app_start';
    return this.userJourney[this.userJourney.length - 1].step;
  }

  getJourneyAnalytics() {
    return {
      sessionId: this.sessionId,
      steps: this.userJourney.length,
      completedJourney: this.hasCompletedJourney(),
      errorCount: Array.from(this.errorsEncountered.values())
        .reduce((total, occurrences) => total + occurrences.length, 0),
      uniqueErrorCount: this.errorsEncountered.size
    };
  }

  hasCompletedJourney() {
    // Implement your business logic for a completed journey
    return this.userJourney.some(step => step.step === 'checkout_complete');
  }
}

class ResilienceWrapper {
  constructor(options = {}) {
    this.maxRetries = options.maxRetries || 3;
    this.backoffFactor = options.backoffFactor || 2;
    this.initialDelay = options.initialDelay || 1000;
    this.recoveryStrategies = options.recoveryStrategies || {};
  }

  async retryable(fn, options = {}) {
    const context = options.context || {};
    const operationName = options.name || fn.name || 'anonymous operation';

    let lastError;

    for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
      try {
        return await fn(context);
      } catch (error) {
        lastError = error;

        // Log the retry attempt
        console.warn(`Operation ${operationName} failed (attempt ${attempt}/${this.maxRetries}):`, error.message);

        // Check if we can apply a recovery strategy
        const strategyName = this.findMatchingStrategy(error);
        if (strategyName) {
          try {
            const recoveryStrategy = this.recoveryStrategies[strategyName];
            const recoveryResult = await recoveryStrategy(error, context);

            // If recovery was successful, return the result
            if (recoveryResult.recovered) {
              console.info(`Recovery strategy '${strategyName}' succeeded for ${operationName}`);
              return recoveryResult.value;
            }
          } catch (recoveryError) {
            console.error(`Recovery strategy '${strategyName}' failed:`, recoveryError);
          }
        }

        // If this is the last attempt, don't delay
        if (attempt === this.maxRetries) break;

        // Calculate backoff delay
        const delay = this.initialDelay * Math.pow(this.backoffFactor, attempt - 1);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }

    // If we've exhausted all retries and recovery strategies, report and throw
    reportError({
      ...lastError,
      operationName,
      retriesAttempted: this.maxRetries
    });

    throw lastError;
  }

  findMatchingStrategy(error) {
    return Object.keys(this.recoveryStrategies).find(strategyName => {
      const strategy = this.recoveryStrategies[strategyName];
      return strategy.matches && strategy.matches(error);
    });
  }
}

// Example usage:
const resilience = new ResilienceWrapper({
  recoveryStrategies: {
    cachedDataFallback: {
      matches: (error) => error.name === 'ApiError' && error.statusCode >= 500,
      execute: async (error, context) => {
        const cachedData = localStorage.getItem(`cache_${context.endpoint}`);
        if (cachedData) {
          return {
            recovered: true,
            value: JSON.parse(cachedData)
          };
        }
        return { recovered: false };
      }
    },
    networkReroute: {
      matches: (error) => error.message.includes('CORS') || error.message.includes('Network Error'),
      execute: async (error, context) => {
        // Try an alternative API endpoint or proxy
        try {
          const fallbackUrl = context.fallbackUrl || context.url.replace('api.', 'fallback-api.');
          const response = await fetch(fallbackUrl, context.options);
          const data = await response.json();
          return {
            recovered: true,
            value: data
          };
        } catch {
          return { recovered: false };
        }
      }
    }
  }
});

// Using the resilience wrapper
async function loadUserProfile(userId) {
  return resilience.retryable(
    async (context) => {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) throw new ApiError('User profile fetch failed', response.status, `/api/users/${userId}`);
      const data = await response.json();
      // Cache successful responses
      localStorage.setItem(`cache_/api/users/${userId}`, JSON.stringify(data));
      return data;
    },
    {
      name: 'loadUserProfile',
      context: {
        endpoint: `/api/users/${userId}`,
        fallbackUrl: `/api/backup/users/${userId}`
      }
    }
  );
}

class EnhancedErrorTracker {
  constructor(options = {}) {
    this.endpoint = options.endpoint || '/api/errors';
    this.appVersion = options.appVersion || '1.0.0';
    this.sampleRate = options.sampleRate || 1.0; // 1.0 = track all errors
    this.throttler = new ErrorThrottler();
    this.userImpact = new UserImpactTracker();
    this.sourceMapUrl = options.sourceMapUrl;

    this.init();
  }

  init() {
    window.addEventListener('error', this.handleGlobalError.bind(this));
    window.addEventListener('unhandledrejection', this.handlePromiseRejection.bind(this));

    // Record important user journey steps
    if (typeof window.history.pushState === 'function') {
      const originalPushState = window.history.pushState;
      window.history.pushState = function() {
        originalPushState.apply(this, arguments);
        this.userImpact.recordStep('navigation', { path: window.location.pathname });
      }.bind(window.history);
    }

    window.addEventListener('popstate', () => {
      this.userImpact.recordStep('navigation', { path: window.location.pathname });
    });
  }

  handleGlobalError(event) {
    const { message, filename, lineno, colno, error } = event;
    this.trackError({
      type: 'runtime',
      message,
      source: filename,
      lineno,
      colno,
      stack: error?.stack,
      originalError: error
    });

    return true;
  }

  handlePromiseRejection(event) {
    this.trackError({
      type: 'promise',
      message: event.reason?.message || 'Promise rejected',
      stack: event.reason?.stack,
      originalError: event.reason
    });
  }

  async trackError(errorData) {
    // Apply sampling
    if (Math.random() > this.sampleRate) return;

    const error = errorData.originalError || new Error(errorData.message);
    const fingerprint = getErrorFingerprint(error);

    // Apply throttling
    if (!this.throttler.shouldReport(fingerprint)) return;

    // Categorize error
    const { category, severity } = categorizeError(error);

    // Enhance stack trace if possible
    let enhancedStack = errorData.stack;
    if (this.sourceMapUrl && enhancedStack) {
      enhancedStack = await enhanceStackTrace(enhancedStack, this.sourceMapUrl);
    }

    // Record user impact
    this.userImpact.recordError(error);

    const payload = {
      ...errorData,
      stack: enhancedStack || errorData.stack,
      fingerprint,
      category,
      severity,
      timestamp: new Date().toISOString(),
      appVersion: this.appVersion,
      userAgent: navigator.userAgent,
      url: window.location.href,
      sessionId: this.userImpact.sessionId,
      userJourney: this.userImpact.getJourneyAnalytics()
    };

    try {
      const response = await fetch(this.endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
        keepalive: true
      });

      if (!response.ok) {
        console.error('Failed to send error report:', await response.text());
      }
    } catch (err) {
      console.error('Error in error reporting:', err);
      // Last resort - log to console
      console.error('Original error details:', payload);
    }
  }
}

// Initialize tracker
const errorTracker = new EnhancedErrorTracker({
  endpoint: 'https://errors.myapp.com/collect',
  appVersion: APP_VERSION,
  sampleRate: 0.9, // Track 90% of errors
  sourceMapUrl: '/sourcemaps/'
});