Browser Support

/**
 * Creates a browser-compatible logger using native console methods
 * @param component - Component name used as prefix for all log messages
 * @returns Console object with prefixed logging methods
 */
function getLogger(component: string): Console;

import logger from '@wdio/logger';

// Create browser logger
const log = logger('MyApp');

// Use standard logging methods
log.info('Application started');           // Output: "MyApp: Application started"
log.warn('This is a warning');            // Output: "MyApp: This is a warning"
log.error('An error occurred');           // Output: "MyApp: An error occurred"
log.debug('Debug information');           // Output: "MyApp: Debug information"

// Multiple loggers with different prefixes
const apiLog = logger('API');
const uiLog = logger('UI');

apiLog.info('Making request to /users');  // Output: "API: Making request to /users"
uiLog.warn('Button click failed');        // Output: "UI: Button click failed"

// Works with objects and multiple arguments
log.info('User data:', { id: 1, name: 'John' });
// Output: "MyApp: User data: {id: 1, name: 'John'}"

/**
 * No-op method for browser compatibility with Node.js API
 * Does nothing in browser environment
 */
function setLevel(): void;

/**
 * No-op method for browser compatibility with Node.js API
 * Does nothing in browser environment
 */
function setLogLevelsConfig(): void;

/**
 * No-op method for browser compatibility with Node.js API
 * Does nothing in browser environment
 */
function setMaskingPatterns(): void;

/**
 * No-op method for browser compatibility with Node.js API
 * Does nothing in browser environment
 */
function waitForBuffer(): void;

/**
 * No-op method for browser compatibility with Node.js API
 * Does nothing in browser environment
 */
function clearLogger(): void;

import logger from '@wdio/logger';

// These methods can be called but have no effect in browser
logger.setLevel('debug');                 // No-op in browser
logger.setLogLevelsConfig({ 'api': 'warn' }); // No-op in browser
logger.setMaskingPatterns('password=([^ ]*)'); // No-op in browser

// This allows the same code to work in both Node.js and browser
const log = logger('universal');

// Configure for Node.js (ignored in browser)
logger.setLevel('debug');
logger.setMaskingPatterns('/token=([^ ]*)/');

// Use logger (works in both environments)
log.info('This works everywhere');

/**
 * String constant used to replace masked sensitive data
 * Available for consistency with Node.js API
 */
const SENSITIVE_DATA_REPLACER: "**MASKED**";

import { SENSITIVE_DATA_REPLACER } from '@wdio/logger';

// Use in browser-specific masking logic
function safeBrowserLog(message: string) {
  // Simple client-side masking example
  const masked = message.replace(/password=\w+/gi, `password=${SENSITIVE_DATA_REPLACER}`);
  console.log(masked);
}

// Check for masked content
if (logMessage.includes(SENSITIVE_DATA_REPLACER)) {
  console.log('Message contains sensitive data');
}

// Method mapping based on availability
const availableMethods = ['error', 'warn', 'info', 'debug', 'trace', 'silent'];

// Only methods that exist on console are added to the logger
const browserLogger = availableMethods.reduce((acc, method) => {
  if (console[method]) {
    acc[method] = console[method].bind(console, `${component}:`);
  }
  return acc;
}, {});

// package.json exports configuration handles this automatically
{
  "exports": {
    ".": {
      "browserSource": "./src/browser.ts",
      "browser": "./build/browser.js",      // <- Used in browser
      "types": "./build/index.d.ts",
      "import": "./build/index.js",         // <- Used in Node.js
      "require": "./build/index.cjs"
    }
  }
}

// Same import works in both environments
import logger from '@wdio/logger';

// Environment detection
const isNode = typeof process !== 'undefined' && process.versions?.node;
const isBrowser = typeof window !== 'undefined';

if (isBrowser) {
  // Browser-specific setup
  const browserLog = logger('WebApp');
  browserLog.info('Running in browser environment');
} else if (isNode) {
  // Node.js-specific setup
  const nodeLog = logger('NodeApp');
  logger.setLevel('debug');
  logger.setMaskingPatterns('/password=([^ ]*)/i');
  nodeLog.info('Running in Node.js environment');
}

import logger from '@wdio/logger';

class UniversalService {
  private log = logger('UniversalService');

  constructor() {
    // Configuration methods are safe to call (no-op in browser)
    logger.setLevel('debug');
    logger.setMaskingPatterns('/api[_-]?key=([^ ]*)/i');
  }

  async performOperation() {
    this.log.info('Starting operation');
    
    try {
      const result = await this.doWork();
      this.log.info('Operation completed successfully');
      return result;
    } catch (error) {
      this.log.error('Operation failed:', error);
      throw error;
    }
  }

  private async doWork() {
    this.log.debug('Performing work...');
    // Implementation here
  }
}

// Works in both Node.js and browser
const service = new UniversalService();
service.performOperation();