0
# Browser Support
1

2
Browser-compatible logger implementation that adapts console methods for consistent API across environments. This provides a simplified logging interface for web applications while maintaining compatibility with the Node.js API.
3

4
## Capabilities
5

6
### Browser Logger Factory
7

8
Creates a browser-compatible logger that wraps native console methods with component prefixing.
9

10
```typescript { .api }
11
/**
12
 * Creates a browser-compatible logger using native console methods
13
 * @param component - Component name used as prefix for all log messages
14
 * @returns Console object with prefixed logging methods
15
 */
16
function getLogger(component: string): Console;
17
```
18

19
**Available Methods:** The returned Console object includes all available browser console methods with the component name as prefix:
20

21
- `error(message?: any, ...optionalParams: any[]): void`
22
- `warn(message?: any, ...optionalParams: any[]): void`
23
- `info(message?: any, ...optionalParams: any[]): void`
24
- `debug(message?: any, ...optionalParams: any[]): void`
25
- `trace(message?: any, ...optionalParams: any[]): void`
26

27
**Usage Examples:**
28

29
```typescript
30
import logger from '@wdio/logger';
31

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

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

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

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

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

53
### Compatibility Methods
54

55
No-operation methods that provide API compatibility with the Node.js version but have no effect in the browser environment.
56

57
```typescript { .api }
58
/**
59
 * No-op method for browser compatibility with Node.js API
60
 * Does nothing in browser environment
61
 */
62
function setLevel(): void;
63

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

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

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

82
/**
83
 * No-op method for browser compatibility with Node.js API
84
 * Does nothing in browser environment
85
 */
86
function clearLogger(): void;
87
```
88

89
**Usage Examples:**
90

91
```typescript
92
import logger from '@wdio/logger';
93

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

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

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

106
// Use logger (works in both environments)
107
log.info('This works everywhere');
108
```
109

110
### Exported Constants
111

112
Browser version exports the same masking constant for API consistency.
113

114
```typescript { .api }
115
/**
116
 * String constant used to replace masked sensitive data
117
 * Available for consistency with Node.js API
118
 */
119
const SENSITIVE_DATA_REPLACER: "**MASKED**";
120
```
121

122
**Usage Examples:**
123

124
```typescript
125
import { SENSITIVE_DATA_REPLACER } from '@wdio/logger';
126

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

134
// Check for masked content
135
if (logMessage.includes(SENSITIVE_DATA_REPLACER)) {
136
  console.log('Message contains sensitive data');
137
}
138
```
139

140
## Browser-Specific Behavior
141

142
### Console Method Availability
143

144
The browser logger only includes console methods that are actually available in the current browser environment:
145

146
```typescript
147
// Method mapping based on availability
148
const availableMethods = ['error', 'warn', 'info', 'debug', 'trace', 'silent'];
149

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

159
### Differences from Node.js Version
160

161
| Feature | Node.js | Browser |
162
|---------|---------|---------|
163
| Log Levels | Full support with numeric levels | Uses browser console levels |
164
| File Logging | Supports file output via WDIO_LOG_PATH | Not available |
165
| Progress Logging | Special TTY-aware progress method | Not available |
166
| Masking | Full regex-based masking system | Not implemented |
167
| Colorization | Chalk-based terminal colors | Browser console styling |
168
| Configuration | Full configuration system | No-op methods only |
169
170
### Import Handling
171

172
The package automatically serves the browser version when imported in a browser environment:
173

174
```javascript
175
// package.json exports configuration handles this automatically
176
{
177
  "exports": {
178
    ".": {
179
      "browserSource": "./src/browser.ts",
180
      "browser": "./build/browser.js",      // <- Used in browser
181
      "types": "./build/index.d.ts",
182
      "import": "./build/index.js",         // <- Used in Node.js
183
      "require": "./build/index.cjs"
184
    }
185
  }
186
}
187
```
188

189
**Usage Examples:**
190

191
```typescript
192
// Same import works in both environments
193
import logger from '@wdio/logger';
194

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

199
if (isBrowser) {
200
  // Browser-specific setup
201
  const browserLog = logger('WebApp');
202
  browserLog.info('Running in browser environment');
203
} else if (isNode) {
204
  // Node.js-specific setup
205
  const nodeLog = logger('NodeApp');
206
  logger.setLevel('debug');
207
  logger.setMaskingPatterns('/password=([^ ]*)/i');
208
  nodeLog.info('Running in Node.js environment');
209
}
210
```
211

212
## Universal Usage Patterns
213

214
Write code that works in both Node.js and browser environments:
215

216
```typescript
217
import logger from '@wdio/logger';
218

219
class UniversalService {
220
  private log = logger('UniversalService');
221

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

228
  async performOperation() {
229
    this.log.info('Starting operation');
230
    
231
    try {
232
      const result = await this.doWork();
233
      this.log.info('Operation completed successfully');
234
      return result;
235
    } catch (error) {
236
      this.log.error('Operation failed:', error);
237
      throw error;
238
    }
239
  }
240

241
  private async doWork() {
242
    this.log.debug('Performing work...');
243
    // Implementation here
244
  }
245
}
246

247
// Works in both Node.js and browser
248
const service = new UniversalService();
249
service.performOperation();
250
```