JavaScript日志输出完全指南从基础consolelog到高级日志管理技术详解调试技巧错误追踪性能优化生产环境应用与日志分析工具使用提升开发效率与代码质量

威震华夏关云长

引言

在JavaScript开发过程中，日志输出是一项不可或缺的技术。无论是简单的调试、复杂的错误追踪，还是生产环境中的问题排查，日志都扮演着至关重要的角色。本文将全面介绍JavaScript日志输出的各个方面，从基础的console.log方法到高级的日志管理技术，帮助开发者掌握调试技巧、错误追踪、性能优化和生产环境应用，最终提升开发效率和代码质量。

基础日志输出：console.log及其相关方法

console.log基础

console.log()是JavaScript中最基础也是最常用的日志输出方法。它可以将信息输出到浏览器的控制台或Node.js的终端中。

2. console.log("Hello, World!"); // 输出字符串
3. console.log(42); // 输出数字
4. console.log({name: "John", age: 30}); // 输出对象
5. console.log([1, 2, 3]); // 输出数组

复制代码

console.log()可以接受多个参数，它们会以空格分隔的形式输出：

2. const name = "Alice";
3. const age = 25;
4. console.log("Name:", name, "Age:", age); // 输出: Name: Alice Age: 25

复制代码

其他console方法

除了console.log()，Console API还提供了许多其他有用的方法：

1. console.info()：用于输出信息性消息，在大多数浏览器中与console.log()行为相同。

2. console.info("This is an informational message");

复制代码

1. console.warn()：用于输出警告信息，通常会有黄色背景或警告图标。

2. console.warn("This is a warning message");

复制代码

1. console.error()：用于输出错误信息，通常会有红色背景或错误图标。

2. console.error("This is an error message");

复制代码

1. console.debug()：用于输出调试信息，在默认情况下可能不可见，需要在控制台设置中启用。

2. console.debug("This is a debug message");

复制代码

1. console.table()：以表格形式显示数据，特别适合显示数组或对象数组。

2. const users = [
3.     {name: "John", age: 30, city: "New York"},
4.     {name: "Alice", age: 25, city: "Los Angeles"},
5.     {name: "Bob", age: 35, city: "Chicago"}
6. ];
7. console.table(users);

复制代码

1. console.time()和console.timeEnd()：用于测量代码执行时间。

2. console.time("Operation");
3. // 执行一些操作
4. for (let i = 0; i < 1000000; i++) {
5.     Math.sqrt(i);
6. }
7. console.timeEnd("Operation"); // 输出: Operation: 12.345ms

复制代码

1. console.count()：用于计数，可以标记某个代码段被执行的次数。

2. for (let i = 0; i < 5; i++) {
3.     console.count("Loop executed");
4. }
5. // 输出:
6. // Loop executed: 1
7. // Loop executed: 2
8. // Loop executed: 3
9. // Loop executed: 4
10. // Loop executed: 5

复制代码

1. console.group()和console.groupEnd()：用于将相关日志分组显示，使输出更有层次。

2. console.group("User Details");
3. console.log("Name: John");
4. console.log("Age: 30");
5. console.group("Address");
6. console.log("Street: 123 Main St");
7. console.log("City: New York");
8. console.groupEnd();
9. console.groupEnd();

复制代码

1. console.trace()：输出当前调用堆栈的跟踪信息。

2. function functionA() {
3.     functionB();
4. }
6. function functionB() {
7.     functionC();
8. }
10. function functionC() {
11.     console.trace();
12. }
14. functionA();

复制代码

1. console.assert()：当断言为false时输出错误信息。

2. const value = 10;
3. console.assert(value > 20, "Value is not greater than 20"); // 输出: Assertion failed: Value is not greater than 20

复制代码

格式化输出

console.log()支持格式化字符串，使用占位符来插入变量值：

2. const name = "Alice";
3. const age = 25;
4. console.log("Name: %s, Age: %d", name, age); // 输出: Name: Alice, Age: 25

复制代码

支持的格式占位符包括：

• %s：字符串
• %d或%i：整数
• %f：浮点数
• %o：对象（可展开的DOM元素）
• %O：对象（可展开的JavaScript对象）
• %c：CSS样式

使用CSS样式：

2. console.log("%cThis is a styled message", "color: blue; font-size: 20px; font-weight: bold;");

复制代码

高级日志管理技术

自定义日志系统

为了更好地控制日志输出，我们可以创建一个自定义的日志系统。这样的系统可以提供日志级别、格式化、过滤等功能。

2. class Logger {
3.     constructor(level = 'info') {
4.         this.levels = {
5.             error: 0,
6.             warn: 1,
7.             info: 2,
8.             debug: 3
9.         };
10.         this.level = level;
11.     }
13.     setLevel(level) {
14.         if (this.levels.hasOwnProperty(level)) {
15.             this.level = level;
16.         } else {
17.             console.error(`Invalid log level: ${level}`);
18.         }
19.     }
21.     _log(level, ...args) {
22.         if (this.levels[level] <= this.levels[this.level]) {
23.             const timestamp = new Date().toISOString();
24.             console[level](`[${timestamp}] [${level.toUpperCase()}]`, ...args);
25.         }
26.     }
28.     error(...args) {
29.         this._log('error', ...args);
30.     }
32.     warn(...args) {
33.         this._log('warn', ...args);
34.     }
36.     info(...args) {
37.         this._log('info', ...args);
38.     }
40.     debug(...args) {
41.         this._log('debug', ...args);
42.     }
43. }
45. // 使用示例
46. const logger = new Logger('debug');
47. logger.error('This is an error message');
48. logger.warn('This is a warning message');
49. logger.info('This is an info message');
50. logger.debug('This is a debug message');
52. // 更改日志级别
53. logger.setLevel('warn');
54. logger.debug('This debug message will not be displayed');
55. logger.warn('This warning message will still be displayed');

复制代码

日志级别管理

日志级别允许我们根据重要性过滤日志消息。常见的日志级别包括：

1. ERROR：严重错误，导致应用程序无法正常运行
2. WARN：潜在问题，不会阻止应用程序运行但需要注意
3. INFO：一般信息，表示应用程序正常运行
4. DEBUG：调试信息，通常仅在开发环境中使用

在生产环境中，我们通常将日志级别设置为WARN或ERROR，以减少日志量并提高性能。

日志格式化

统一的日志格式可以使日志更易于阅读和分析。我们可以扩展自定义日志系统以支持格式化：

2. class FormattedLogger extends Logger {
3.     constructor(level = 'info', options = {}) {
4.         super(level);
5.         this.options = {
6.             showTimestamp: options.showTimestamp !== false,
7.             showLevel: options.showLevel !== false,
8.             template: options.template || '[{timestamp}] [{level}] {message}'
9.         };
10.     }
12.     _formatMessage(level, message) {
13.         let formatted = this.options.template;
14.         
15.         if (this.options.showTimestamp) {
16.             formatted = formatted.replace('{timestamp}', new Date().toISOString());
17.         }
18.         
19.         if (this.options.showLevel) {
20.             formatted = formatted.replace('{level}', level.toUpperCase());
21.         }
22.         
23.         formatted = formatted.replace('{message}', message);
24.         
25.         return formatted;
26.     }
28.     _log(level, ...args) {
29.         if (this.levels[level] <= this.levels[this.level]) {
30.             const formattedMessage = this._formatMessage(level, args.join(' '));
31.             console[level](formattedMessage);
32.         }
33.     }
34. }
36. // 使用示例
37. const formattedLogger = new FormattedLogger('debug', {
38.     template: '[{timestamp}] [{level}] => {message}'
39. });
40. formattedLogger.info('Application started');
41. formattedLogger.warn('Low disk space');
42. formattedLogger.error('Database connection failed');

复制代码

日志持久化

在浏览器环境中，我们可以使用localStorage或IndexedDB来持久化日志：

2. class PersistentLogger extends FormattedLogger {
3.     constructor(level = 'info', options = {}) {
4.         super(level, options);
5.         this.maxLogs = options.maxLogs || 1000;
6.         this.storageKey = options.storageKey || 'app_logs';
7.         this._loadLogs();
8.     }
10.     _loadLogs() {
11.         try {
12.             const storedLogs = localStorage.getItem(this.storageKey);
13.             this.logs = storedLogs ? JSON.parse(storedLogs) : [];
14.         } catch (e) {
15.             console.error('Failed to load logs from storage:', e);
16.             this.logs = [];
17.         }
18.     }
20.     _saveLogs() {
21.         try {
22.             localStorage.setItem(this.storageKey, JSON.stringify(this.logs));
23.         } catch (e) {
24.             console.error('Failed to save logs to storage:', e);
25.         }
26.     }
28.     _log(level, ...args) {
29.         super._log(level, ...args);
30.         
31.         const logEntry = {
32.             timestamp: new Date().toISOString(),
33.             level: level,
34.             message: args.join(' ')
35.         };
36.         
37.         this.logs.push(logEntry);
38.         
39.         // 保持日志数量不超过最大值
40.         if (this.logs.length > this.maxLogs) {
41.             this.logs = this.logs.slice(-this.maxLogs);
42.         }
43.         
44.         this._saveLogs();
45.     }
47.     getLogs(level) {
48.         if (level) {
49.             return this.logs.filter(log => log.level === level);
50.         }
51.         return this.logs;
52.     }
54.     clearLogs() {
55.         this.logs = [];
56.         this._saveLogs();
57.     }
58. }
60. // 使用示例
61. const persistentLogger = new PersistentLogger('debug');
62. persistentLogger.info('Application started');
63. persistentLogger.warn('Low disk space');
64. persistentLogger.error('Database connection failed');
66. // 获取所有日志
67. console.log(persistentLogger.getLogs());
69. // 仅获取错误日志
70. console.log(persistentLogger.getLogs('error'));

复制代码

远程日志记录

在生产环境中，将日志发送到远程服务器进行集中管理和分析是非常有用的：

2. class RemoteLogger extends PersistentLogger {
3.     constructor(level = 'info', options = {}) {
4.         super(level, options);
5.         this.remoteUrl = options.remoteUrl;
6.         this.batchSize = options.batchSize || 10;
7.         this.flushInterval = options.flushInterval || 10000; // 10秒
8.         this.pendingLogs = [];
9.         
10.         if (this.remoteUrl) {
11.             setInterval(() => this.flush(), this.flushInterval);
12.         }
13.     }
15.     _log(level, ...args) {
16.         super._log(level, ...args);
17.         
18.         if (this.remoteUrl) {
19.             const logEntry = {
20.                 timestamp: new Date().toISOString(),
21.                 level: level,
22.                 message: args.join(' '),
23.                 userAgent: navigator.userAgent,
24.                 url: window.location.href
25.             };
26.             
27.             this.pendingLogs.push(logEntry);
28.             
29.             if (this.pendingLogs.length >= this.batchSize) {
30.                 this.flush();
31.             }
32.         }
33.     }
35.     async flush() {
36.         if (this.pendingLogs.length === 0) return;
37.         
38.         const logsToSend = [...this.pendingLogs];
39.         this.pendingLogs = [];
40.         
41.         try {
42.             const response = await fetch(this.remoteUrl, {
43.                 method: 'POST',
44.                 headers: {
45.                     'Content-Type': 'application/json'
46.                 },
47.                 body: JSON.stringify({ logs: logsToSend })
48.             });
49.             
50.             if (!response.ok) {
51.                 throw new Error(`HTTP error! status: ${response.status}`);
52.             }
53.         } catch (e) {
54.             console.error('Failed to send logs to remote server:', e);
55.             // 如果发送失败，将日志重新放回待发送队列
56.             this.pendingLogs = [...logsToSend, ...this.pendingLogs];
57.         }
58.     }
59. }
61. // 使用示例
62. const remoteLogger = new RemoteLogger('debug', {
63.     remoteUrl: 'https://api.example.com/logs',
64.     batchSize: 5,
65.     flushInterval: 5000
66. });
67. remoteLogger.info('Application started');
68. remoteLogger.warn('Low disk space');
69. remoteLogger.error('Database connection failed');

复制代码

调试技巧

条件日志记录

条件日志记录允许我们只在特定条件下输出日志，这在调试复杂问题时非常有用：

2. function debugLog(condition, ...args) {
3.     if (condition) {
4.         console.log(...args);
5.     }
6. }
8. // 使用示例
9. const debugMode = true;
10. const user = { name: 'Alice', role: 'admin' };
12. debugLog(debugMode, 'Current user:', user);
13. debugLog(user.role === 'admin', 'Admin action performed');

复制代码

命名空间日志

使用命名空间可以帮助我们更好地组织和过滤日志：

2. const createNamespaceLogger = (namespace) => {
3.     return {
4.         log: (...args) => console.log(`[${namespace}]`, ...args),
5.         info: (...args) => console.info(`[${namespace}]`, ...args),
6.         warn: (...args) => console.warn(`[${namespace}]`, ...args),
7.         error: (...args) => console.error(`[${namespace}]`, ...args),
8.         debug: (...args) => console.debug(`[${namespace}]`, ...args)
9.     };
10. };
12. // 使用示例
13. const authLogger = createNamespaceLogger('AUTH');
14. const dbLogger = createNamespaceLogger('DATABASE');
15. const uiLogger = createNamespaceLogger('UI');
17. authLogger.info('User logged in');
18. dbLogger.warn('Slow query detected');
19. uiLogger.error('Failed to render component');

复制代码

性能分析日志

使用日志来分析代码性能：

2. function analyzePerformance(fn, ...args) {
3.     console.time(`Performance analysis: ${fn.name}`);
4.     const result = fn(...args);
5.     console.timeEnd(`Performance analysis: ${fn.name}`);
6.     return result;
7. }
9. // 使用示例
10. function fibonacci(n) {
11.     if (n <= 1) return n;
12.     return fibonacci(n - 1) + fibonacci(n - 2);
13. }
15. const result = analyzePerformance(fibonacci, 30);
16. console.log('Result:', result);

复制代码

状态变化日志

记录应用程序状态的变化，有助于理解数据流：

2. class StateLogger {
3.     constructor(initialState) {
4.         this.state = initialState;
5.         this.logState('Initial state');
6.     }
8.     logState(action) {
9.         console.log(`[${action}] State:`, JSON.parse(JSON.stringify(this.state)));
10.     }
12.     updateState(updates, action = 'State update') {
13.         this.state = { ...this.state, ...updates };
14.         this.logState(action);
15.         return this.state;
16.     }
17. }
19. // 使用示例
20. const appState = new StateLogger({ user: null, isLoading: false });
21. appState.updateState({ isLoading: true }, 'Fetching user data');
22. appState.updateState({ user: { name: 'Alice' }, isLoading: false }, 'User data fetched');

复制代码

事件流日志

记录事件流可以帮助我们理解应用程序的交互流程：

2. function createEventLogger() {
3.     const events = [];
4.    
5.     return {
6.         log: (event, data) => {
7.             const timestamp = new Date().toISOString();
8.             events.push({ event, data, timestamp });
9.             console.log(`[EVENT] ${event}:`, data);
10.         },
11.         getEvents: () => events,
12.         clear: () => { events.length = 0; }
13.     };
14. }
16. // 使用示例
17. const eventLogger = createEventLogger();
19. // 模拟用户操作
20. eventLogger.log('page_load', { page: 'home' });
21. eventLogger.log('button_click', { button: 'login' });
22. eventLogger.log('form_submit', { form: 'login', data: { username: 'alice' } });
23. eventLogger.log('api_request', { endpoint: '/login', method: 'POST' });
24. eventLogger.log('api_response', { status: 200, data: { token: 'abc123' } });
25. eventLogger.log('navigation', { from: 'login', to: 'dashboard' });
27. // 获取所有事件
28. console.log(eventLogger.getEvents());

复制代码

错误追踪

错误日志记录

正确记录错误信息对于调试和修复问题至关重要：

2. function logError(error, context = {}) {
3.     console.error('Error occurred:', {
4.         message: error.message,
5.         stack: error.stack,
6.         context: context,
7.         timestamp: new Date().toISOString(),
8.         userAgent: navigator.userAgent,
9.         url: window.location.href
10.     });
11. }
13. // 使用示例
14. try {
15.     // 可能出错的代码
16.     JSON.parse('{invalid json}');
17. } catch (error) {
18.     logError(error, {
19.         action: 'parseJSON',
20.         input: '{invalid json}'
21.     });
22. }

复制代码

全局错误处理

设置全局错误处理器来捕获未处理的错误：

2. // 全局JavaScript错误处理
3. window.addEventListener('error', (event) => {
4.     console.error('Global error caught:', {
5.         message: event.message,
6.         filename: event.filename,
7.         lineno: event.lineno,
8.         colno: event.colno,
9.         error: event.error,
10.         timestamp: new Date().toISOString()
11.     });
12.    
13.     // 可以在这里添加将错误发送到服务器的代码
14. });
16. // 未处理的Promise拒绝处理
17. window.addEventListener('unhandledrejection', (event) => {
18.     console.error('Unhandled promise rejection:', {
19.         reason: event.reason,
20.         timestamp: new Date().toISOString()
21.     });
22.    
23.     // 可以在这里添加将错误发送到服务器的代码
24. });
26. // 使用示例
27. // 触发全局错误处理
28. setTimeout(() => {
29.     undefinedFunction(); // 未定义的函数
30. }, 1000);
32. // 触发未处理的Promise拒绝
33. setTimeout(() => {
34.     Promise.reject(new Error('Intentional rejection'));
35. }, 2000);

复制代码

错误边界（React）

在React应用中，使用错误边界来捕获组件树中的JavaScript错误：

2. import React from 'react';
4. class ErrorBoundary extends React.Component {
5.     constructor(props) {
6.         super(props);
7.         this.state = { hasError: false, error: null, errorInfo: null };
8.     }
10.     static getDerivedStateFromError(error) {
11.         // 更新state以触发下一次渲染显示降级UI
12.         return { hasError: true };
13.     }
15.     componentDidCatch(error, errorInfo) {
16.         // 记录错误信息
17.         this.setState({
18.             error: error,
19.             errorInfo: errorInfo
20.         });
21.         
22.         // 可以在这里将错误日志发送到服务器
23.         console.error('Error caught by boundary:', error, errorInfo);
24.     }
26.     render() {
27.         if (this.state.hasError) {
28.             // 自定义降级UI
29.             return (
30.                 <div>
31.                     <h2>Something went wrong.</h2>
32.                     <details style={{ whiteSpace: 'pre-wrap' }}>
33.                         {this.state.error && this.state.error.toString()}
34.                         <br />
35.                         {this.state.errorInfo.componentStack}
36.                     </details>
37.                 </div>
38.             );
39.         }
41.         return this.props.children;
42.     }
43. }
45. // 使用示例
46. function BuggyComponent() {
47.     // 这将触发错误
48.     return <>{undefinedVariable}</>;
49. }
51. function App() {
52.     return (
53.         <ErrorBoundary>
54.             <h1>My App</h1>
55.             <BuggyComponent />
56.         </ErrorBoundary>
57.     );
58. }

复制代码

错误报告系统

创建一个错误报告系统，收集和发送错误信息：

2. class ErrorReporter {
3.     constructor(options = {}) {
4.         this.url = options.url;
5.         this.appVersion = options.appVersion || 'unknown';
6.         this.environment = options.environment || 'development';
7.         this.setupGlobalHandlers();
8.     }
10.     setupGlobalHandlers() {
11.         window.addEventListener('error', (event) => {
12.             this.reportError(event.error, {
13.                 type: 'global_error',
14.                 filename: event.filename,
15.                 lineno: event.lineno,
16.                 colno: event.colno
17.             });
18.         });
20.         window.addEventListener('unhandledrejection', (event) => {
21.             this.reportError(event.reason, {
22.                 type: 'unhandled_promise_rejection'
23.             });
24.         });
25.     }
27.     reportError(error, context = {}) {
28.         const errorReport = {
29.             message: error.message || String(error),
30.             stack: error.stack,
31.             context: {
32.                 ...context,
33.                 appVersion: this.appVersion,
34.                 environment: this.environment,
35.                 userAgent: navigator.userAgent,
36.                 url: window.location.href,
37.                 timestamp: new Date().toISOString()
38.             }
39.         };
41.         console.error('Error reported:', errorReport);
43.         if (this.url) {
44.             this.sendToServer(errorReport);
45.         }
46.     }
48.     async sendToServer(errorReport) {
49.         try {
50.             const response = await fetch(this.url, {
51.                 method: 'POST',
52.                 headers: {
53.                     'Content-Type': 'application/json'
54.                 },
55.                 body: JSON.stringify(errorReport)
56.             });
58.             if (!response.ok) {
59.                 throw new Error(`HTTP error! status: ${response.status}`);
60.             }
61.         } catch (e) {
62.             console.error('Failed to send error report:', e);
63.         }
64.     }
65. }
67. // 使用示例
68. const errorReporter = new ErrorReporter({
69.     url: 'https://api.example.com/errors',
70.     appVersion: '1.0.0',
71.     environment: 'production'
72. });
74. // 手动报告错误
75. try {
76.     // 可能出错的代码
77.     JSON.parse('{invalid json}');
78. } catch (error) {
79.     errorReporter.reportError(error, {
80.         action: 'parseJSON',
81.         input: '{invalid json}'
82.     });
83. }

复制代码

性能优化

性能监控日志

使用日志来监控应用程序的性能：

2. class PerformanceMonitor {
3.     constructor() {
4.         this.metrics = {};
5.     }
7.     startTimer(name) {
8.         this.metrics[name] = {
9.             startTime: performance.now(),
10.             endTime: null,
11.             duration: null
12.         };
13.     }
15.     endTimer(name) {
16.         if (this.metrics[name] && !this.metrics[name].endTime) {
17.             this.metrics[name].endTime = performance.now();
18.             this.metrics[name].duration =
19.                 this.metrics[name].endTime - this.metrics[name].startTime;
20.             
21.             console.log(`[PERFORMANCE] ${name}: ${this.metrics[name].duration.toFixed(2)}ms`);
22.             
23.             return this.metrics[name].duration;
24.         }
25.         return null;
26.     }
28.     getMetric(name) {
29.         return this.metrics[name];
30.     }
32.     getAllMetrics() {
33.         return this.metrics;
34.     }
35. }
37. // 使用示例
38. const perfMonitor = new PerformanceMonitor();
40. // 监控函数执行时间
41. function fetchData() {
42.     perfMonitor.startTimer('fetchData');
43.    
44.     // 模拟API调用
45.     return new Promise(resolve => {
46.         setTimeout(() => {
47.             perfMonitor.endTimer('fetchData');
48.             resolve({ data: 'example data' });
49.         }, 500);
50.     });
51. }
53. fetchData().then(data => {
54.     console.log('Data received:', data);
55.     console.log('All metrics:', perfMonitor.getAllMetrics());
56. });

复制代码

资源加载监控

监控资源加载时间：

2. function monitorResourceLoading() {
3.     // 使用Performance API获取资源加载时间
4.     window.addEventListener('load', () => {
5.         const resources = performance.getEntriesByType('resource');
6.         
7.         console.group('Resource Loading Performance');
8.         resources.forEach(resource => {
9.             const duration = resource.duration.toFixed(2);
10.             const size = (resource.transferSize / 1024).toFixed(2);
11.             
12.             if (duration > 100 || size > 100) { // 只显示加载时间超过100ms或大小超过100KB的资源
13.                 console.warn(`Slow or large resource: ${resource.name}`, {
14.                     type: resource.initiatorType,
15.                     duration: `${duration}ms`,
16.                     size: `${size}KB`
17.                 });
18.             }
19.         });
20.         console.groupEnd();
21.     });
22. }
24. // 使用示例
25. monitorResourceLoading();

复制代码

用户交互性能

监控用户交互的性能：

2. function measureInteractionPerformance() {
3.     // 使用Event Timing API
4.     const observer = new PerformanceObserver((list) => {
5.         for (const entry of list.getEntries()) {
6.             const delay = entry.processingStart - entry.startTime;
7.             const duration = entry.duration;
8.             
9.             console.log(`[INTERACTION] ${entry.name}:`, {
10.                 delay: `${delay.toFixed(2)}ms`,
11.                 duration: `${duration.toFixed(2)}ms`
12.             });
13.             
14.             // 如果交互延迟超过100ms，记录警告
15.             if (delay > 100) {
16.                 console.warn(`Slow interaction detected: ${entry.name}`, {
17.                     delay: `${delay.toFixed(2)}ms`,
18.                     target: entry.target
19.                 });
20.             }
21.         }
22.     });
23.    
24.     observer.observe({ entryTypes: ['event'] });
25. }
27. // 使用示例
28. measureInteractionPerformance();
30. // 添加一些交互元素来测试
31. document.addEventListener('DOMContentLoaded', () => {
32.     const button = document.createElement('button');
33.     button.textContent = 'Click me';
34.     button.addEventListener('click', () => {
35.         // 模拟一些处理
36.         const start = performance.now();
37.         while (performance.now() - start < 50) {
38.             // 空循环，模拟处理时间
39.         }
40.         console.log('Button clicked');
41.     });
42.     document.body.appendChild(button);
43. });

复制代码

内存使用监控

监控内存使用情况：

2. function monitorMemoryUsage() {
3.     if (performance.memory) {
4.         const memoryData = {
5.             used: `${(performance.memory.usedJSHeapSize / 1048576).toFixed(2)} MB`,
6.             total: `${(performance.memory.totalJSHeapSize / 1048576).toFixed(2)} MB`,
7.             limit: `${(performance.memory.jsHeapSizeLimit / 1048576).toFixed(2)} MB`,
8.             usage: `${((performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit) * 100).toFixed(2)}%`
9.         };
10.         
11.         console.log('[MEMORY USAGE]', memoryData);
12.         
13.         // 如果内存使用超过80%，发出警告
14.         if (parseFloat(memoryData.usage) > 80) {
15.             console.warn('High memory usage detected:', memoryData);
16.         }
17.         
18.         return memoryData;
19.     } else {
20.         console.log('Memory monitoring not supported in this browser');
21.         return null;
22.     }
23. }
25. // 使用示例
26. // 每隔5秒监控一次内存使用
27. setInterval(monitorMemoryUsage, 5000);

复制代码

生产环境应用

生产环境日志最佳实践

在生产环境中，日志记录需要遵循一些最佳实践：

1. 适当的日志级别：在生产环境中，通常只记录WARN和ERROR级别的日志，以减少性能影响。
2. 避免敏感信息：确保日志中不包含敏感信息，如密码、令牌、个人身份信息等。
3. 日志轮转：实现日志轮转机制，防止日志文件过大。
4. 结构化日志：使用结构化格式（如JSON）记录日志，便于后续分析。
5. 异步日志：使用异步方式记录日志，减少对主线程性能的影响。

适当的日志级别：在生产环境中，通常只记录WARN和ERROR级别的日志，以减少性能影响。

避免敏感信息：确保日志中不包含敏感信息，如密码、令牌、个人身份信息等。

日志轮转：实现日志轮转机制，防止日志文件过大。

结构化日志：使用结构化格式（如JSON）记录日志，便于后续分析。

异步日志：使用异步方式记录日志，减少对主线程性能的影响。

2. class ProductionLogger {
3.     constructor(options = {}) {
4.         this.level = options.level || 'warn';
5.         this.levels = { error: 0, warn: 1, info: 2, debug: 3 };
6.         this.remoteUrl = options.remoteUrl;
7.         this.sanitizeFields = options.sanitizeFields || ['password', 'token', 'creditCard'];
8.         this.batchSize = options.batchSize || 10;
9.         this.pendingLogs = [];
10.         this.flushInterval = options.flushInterval || 10000;
11.         
12.         if (this.remoteUrl) {
13.             setInterval(() => this.flush(), this.flushInterval);
14.         }
15.     }
17.     sanitize(data) {
18.         if (!data || typeof data !== 'object') return data;
19.         
20.         const sanitized = { ...data };
21.         
22.         for (const field in sanitized) {
23.             if (this.sanitizeFields.includes(field)) {
24.                 sanitized[field] = '[REDACTED]';
25.             } else if (typeof sanitized[field] === 'object' && sanitized[field] !== null) {
26.                 sanitized[field] = this.sanitize(sanitized[field]);
27.             }
28.         }
29.         
30.         return sanitized;
31.     }
33.     _log(level, message, data = {}) {
34.         if (this.levels[level] > this.levels[this.level]) return;
35.         
36.         const logEntry = {
37.             timestamp: new Date().toISOString(),
38.             level: level,
39.             message: message,
40.             data: this.sanitize(data),
41.             userAgent: navigator.userAgent,
42.             url: window.location.href
43.         };
44.         
45.         // 在开发环境中，也输出到控制台
46.         if (process.env.NODE_ENV !== 'production') {
47.             console[level](`[${level.toUpperCase()}] ${message}`, logEntry.data);
48.         }
49.         
50.         // 添加到待发送队列
51.         this.pendingLogs.push(logEntry);
52.         
53.         if (this.pendingLogs.length >= this.batchSize) {
54.             this.flush();
55.         }
56.     }
58.     async flush() {
59.         if (this.pendingLogs.length === 0 || !this.remoteUrl) return;
60.         
61.         const logsToSend = [...this.pendingLogs];
62.         this.pendingLogs = [];
63.         
64.         try {
65.             // 使用navigator.sendBeacon进行非阻塞请求
66.             const data = JSON.stringify({ logs: logsToSend });
67.             const blob = new Blob([data], { type: 'application/json' });
68.             
69.             if (navigator.sendBeacon(this.remoteUrl, blob)) {
70.                 console.log(`${logsToSend.length} logs sent successfully`);
71.             } else {
72.                 // 如果sendBeacon不可用，回退到fetch
73.                 const response = await fetch(this.remoteUrl, {
74.                     method: 'POST',
75.                     headers: { 'Content-Type': 'application/json' },
76.                     body: data,
77.                     keepalive: true
78.                 });
79.                
80.                 if (!response.ok) {
81.                     throw new Error(`HTTP error! status: ${response.status}`);
82.                 }
83.             }
84.         } catch (e) {
85.             console.error('Failed to send logs to remote server:', e);
86.             // 如果发送失败，将日志重新放回待发送队列
87.             this.pendingLogs = [...logsToSend, ...this.pendingLogs];
88.         }
89.     }
91.     error(message, data) {
92.         this._log('error', message, data);
93.     }
95.     warn(message, data) {
96.         this._log('warn', message, data);
97.     }
99.     info(message, data) {
100.         this._log('info', message, data);
101.     }
103.     debug(message, data) {
104.         this._log('debug', message, data);
105.     }
106. }
108. // 使用示例
109. const prodLogger = new ProductionLogger({
110.     level: 'warn',
111.     remoteUrl: 'https://api.example.com/logs',
112.     sanitizeFields: ['password', 'token', 'creditCard', 'ssn'],
113.     batchSize: 5,
114.     flushInterval: 5000
115. });
117. prodLogger.info('Application started', { version: '1.0.0' });
118. prodLogger.warn('Feature flag disabled', { flag: 'newFeature' });
119. prodLogger.error('API request failed', {
120.     endpoint: '/users',
121.     status: 500,
122.     error: 'Internal server error',
123.     user: { id: 123, name: 'Alice', password: 'secret123' } // 密码将被自动过滤
124. });

复制代码

客户端错误监控

在生产环境中，监控客户端错误非常重要：

2. class ClientErrorMonitor {
3.     constructor(options = {}) {
4.         this.url = options.url;
5.         this.appVersion = options.appVersion || 'unknown';
6.         this.environment = options.environment || 'production';
7.         this.sampleRate = options.sampleRate || 1.0; // 错误采样率
8.         this.setupGlobalHandlers();
9.     }
11.     setupGlobalHandlers() {
12.         // 全局JavaScript错误处理
13.         window.addEventListener('error', (event) => {
14.             if (Math.random() < this.sampleRate) {
15.                 this.reportError({
16.                     type: 'javascript_error',
17.                     message: event.message,
18.                     filename: event.filename,
19.                     lineno: event.lineno,
20.                     colno: event.colno,
21.                     stack: event.error?.stack
22.                 });
23.             }
24.         });
26.         // 未处理的Promise拒绝处理
27.         window.addEventListener('unhandledrejection', (event) => {
28.             if (Math.random() < this.sampleRate) {
29.                 this.reportError({
30.                     type: 'unhandled_promise_rejection',
31.                     message: event.reason?.message || String(event.reason),
32.                     stack: event.reason?.stack
33.                 });
34.             }
35.         });
37.         // 控制台错误拦截
38.         const originalError = console.error;
39.         console.error = (...args) => {
40.             originalError.apply(console, args);
41.             
42.             if (Math.random() < this.sampleRate) {
43.                 this.reportError({
44.                     type: 'console_error',
45.                     message: args.map(arg =>
46.                         typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
47.                     ).join(' ')
48.                 });
49.             }
50.         };
51.     }
53.     reportError(errorData) {
54.         const errorReport = {
55.             ...errorData,
56.             appVersion: this.appVersion,
57.             environment: this.environment,
58.             userAgent: navigator.userAgent,
59.             url: window.location.href,
60.             timestamp: new Date().toISOString(),
61.             screenSize: `${window.screen.width}x${window.screen.height}`,
62.             viewportSize: `${window.innerWidth}x${window.innerHeight}`
63.         };
65.         if (this.url) {
66.             this.sendToServer(errorReport);
67.         }
68.     }
70.     sendToServer(errorReport) {
71.         // 使用navigator.sendBeacon进行非阻塞请求
72.         const data = JSON.stringify(errorReport);
73.         const blob = new Blob([data], { type: 'application/json' });
74.         
75.         if (navigator.sendBeacon) {
76.             navigator.sendBeacon(this.url, blob);
77.         } else {
78.             // 回退方案
79.             fetch(this.url, {
80.                 method: 'POST',
81.                 headers: { 'Content-Type': 'application/json' },
82.                 body: data,
83.                 keepalive: true
84.             }).catch(e => console.error('Failed to send error report:', e));
85.         }
86.     }
88.     // 手动报告错误
89.     captureException(error, context = {}) {
90.         this.reportError({
91.             type: 'manual_report',
92.             message: error.message,
93.             stack: error.stack,
94.             context: context
95.         });
96.     }
98.     // 手动报告消息
99.     captureMessage(message, level = 'info') {
100.         this.reportError({
101.             type: 'manual_message',
102.             message: message,
103.             level: level
104.         });
105.     }
106. }
108. // 使用示例
109. const errorMonitor = new ClientErrorMonitor({
110.     url: 'https://api.example.com/errors',
111.     appVersion: '1.0.0',
112.     environment: 'production',
113.     sampleRate: 0.5 // 只采样50%的错误
114. });
116. // 手动报告错误
117. try {
118.     // 可能出错的代码
119.     JSON.parse('{invalid json}');
120. } catch (error) {
121.     errorMonitor.captureException(error, {
122.         action: 'parseJSON',
123.         input: '{invalid json}'
124.     });
125. }
127. // 手动报告消息
128. errorMonitor.captureMessage('User completed onboarding', 'info');

复制代码

性能监控

在生产环境中监控应用性能：

2. class PerformanceMonitor {
3.     constructor(options = {}) {
4.         this.url = options.url;
5.         this.appVersion = options.appVersion || 'unknown';
6.         this.environment = options.environment || 'production';
7.         this.sampleRate = options.sampleRate || 0.1; // 性能数据采样率
8.         this.metrics = {};
9.         this.init();
10.     }
12.     init() {
13.         // 监控页面加载性能
14.         window.addEventListener('load', () => {
15.             if (Math.random() < this.sampleRate) {
16.                 this.collectPageLoadMetrics();
17.             }
18.         });
20.         // 监控资源加载性能
21.         if ('PerformanceObserver' in window) {
22.             const resourceObserver = new PerformanceObserver((list) => {
23.                 if (Math.random() < this.sampleRate) {
24.                     this.collectResourceMetrics(list.getEntries());
25.                 }
26.             });
27.             resourceObserver.observe({ entryTypes: ['resource'] });
28.         }
30.         // 监控用户交互性能
31.         if ('PerformanceObserver' in window) {
32.             const interactionObserver = new PerformanceObserver((list) => {
33.                 if (Math.random() < this.sampleRate) {
34.                     this.collectInteractionMetrics(list.getEntries());
35.                 }
36.             });
37.             interactionObserver.observe({ entryTypes: ['event'] });
38.         }
40.         // 监控内存使用情况
41.         if (performance.memory) {
42.             setInterval(() => {
43.                 if (Math.random() < this.sampleRate) {
44.                     this.collectMemoryMetrics();
45.                 }
46.             }, 60000); // 每分钟收集一次
47.         }
48.     }
50.     collectPageLoadMetrics() {
51.         const navigation = performance.getEntriesByType('navigation')[0];
52.         
53.         if (navigation) {
54.             const metrics = {
55.                 type: 'page_load',
56.                 domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
57.                 loadComplete: navigation.loadEventEnd - navigation.loadEventStart,
58.                 firstPaint: this.getFirstPaint(),
59.                 firstContentfulPaint: this.getFirstContentfulPaint(),
60.                 timeToInteractive: this.getTimeToInteractive(),
61.                 timestamp: new Date().toISOString()
62.             };
63.             
64.             this.sendMetrics(metrics);
65.         }
66.     }
68.     collectResourceMetrics(resources) {
69.         const slowResources = resources.filter(resource => resource.duration > 100);
70.         
71.         if (slowResources.length > 0) {
72.             const metrics = {
73.                 type: 'slow_resources',
74.                 resources: slowResources.map(resource => ({
75.                     name: resource.name,
76.                     type: resource.initiatorType,
77.                     duration: resource.duration,
78.                     size: resource.transferSize
79.                 })),
80.                 timestamp: new Date().toISOString()
81.             };
82.             
83.             this.sendMetrics(metrics);
84.         }
85.     }
87.     collectInteractionMetrics(interactions) {
88.         const slowInteractions = interactions.filter(interaction => {
89.             const delay = interaction.processingStart - interaction.startTime;
90.             return delay > 100; // 延迟超过100ms的交互
91.         });
92.         
93.         if (slowInteractions.length > 0) {
94.             const metrics = {
95.                 type: 'slow_interactions',
96.                 interactions: slowInteractions.map(interaction => ({
97.                     name: interaction.name,
98.                     delay: interaction.processingStart - interaction.startTime,
99.                     duration: interaction.duration
100.                 })),
101.                 timestamp: new Date().toISOString()
102.             };
103.             
104.             this.sendMetrics(metrics);
105.         }
106.     }
108.     collectMemoryMetrics() {
109.         const metrics = {
110.             type: 'memory_usage',
111.             used: performance.memory.usedJSHeapSize,
112.             total: performance.memory.totalJSHeapSize,
113.             limit: performance.memory.jsHeapSizeLimit,
114.             timestamp: new Date().toISOString()
115.         };
116.         
117.         this.sendMetrics(metrics);
118.     }
120.     getFirstPaint() {
121.         const paintEntries = performance.getEntriesByType('paint');
122.         const fpEntry = paintEntries.find(entry => entry.name === 'first-paint');
123.         return fpEntry ? fpEntry.startTime : null;
124.     }
126.     getFirstContentfulPaint() {
127.         const paintEntries = performance.getEntriesByType('paint');
128.         const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
129.         return fcpEntry ? fcpEntry.startTime : null;
130.     }
132.     getTimeToInteractive() {
133.         // 这是一个简化的TTI计算，实际应用中可能需要更复杂的算法
134.         const navigation = performance.getEntriesByType('navigation')[0];
135.         if (!navigation) return null;
136.         
137.         const fcp = this.getFirstContentfulPaint();
138.         if (!fcp) return null;
139.         
140.         // 查找FCP之后5秒内没有长任务的窗口
141.         const longTasks = performance.getEntriesByType('longtask');
142.         const lastLongTask = longTasks
143.             .filter(task => task.startTime > fcp)
144.             .sort((a, b) => b.startTime - a.startTime)[0];
145.         
146.         if (!lastLongTask) return fcp + 5000; // 如果没有长任务，假设TTI是FCP后5秒
147.         
148.         return Math.max(lastLongTask.startTime + lastLongTask.duration, fcp + 5000);
149.     }
151.     sendMetrics(metrics) {
152.         const fullMetrics = {
153.             ...metrics,
154.             appVersion: this.appVersion,
155.             environment: this.environment,
156.             userAgent: navigator.userAgent,
157.             url: window.location.href
158.         };
159.         
160.         if (this.url) {
161.             // 使用navigator.sendBeacon进行非阻塞请求
162.             const data = JSON.stringify(fullMetrics);
163.             const blob = new Blob([data], { type: 'application/json' });
164.             
165.             if (navigator.sendBeacon) {
166.                 navigator.sendBeacon(this.url, blob);
167.             } else {
168.                 // 回退方案
169.                 fetch(this.url, {
170.                     method: 'POST',
171.                     headers: { 'Content-Type': 'application/json' },
172.                     body: data,
173.                     keepalive: true
174.                 }).catch(e => console.error('Failed to send metrics:', e));
175.             }
176.         }
177.     }
179.     // 手动记录自定义指标
180.     measureCustomMetric(name, value, tags = {}) {
181.         const metrics = {
182.             type: 'custom_metric',
183.             name: name,
184.             value: value,
185.             tags: tags,
186.             timestamp: new Date().toISOString()
187.         };
188.         
189.         this.sendMetrics(metrics);
190.     }
191. }
193. // 使用示例
194. const perfMonitor = new PerformanceMonitor({
195.     url: 'https://api.example.com/metrics',
196.     appVersion: '1.0.0',
197.     environment: 'production',
198.     sampleRate: 0.1
199. });
201. // 手动记录自定义指标
202. function checkout() {
203.     const startTime = performance.now();
204.    
205.     // 执行结账流程
206.     // ...
207.    
208.     const duration = performance.now() - startTime;
209.     perfMonitor.measureCustomMetric('checkout_duration', duration, {
210.         payment_method: 'credit_card'
211.     });
212. }

复制代码

日志分析工具

浏览器开发者工具

现代浏览器提供了强大的开发者工具，用于分析日志和调试应用程序：

1. Console面板：查看和过滤日志消息使用console对象的方法进行日志记录执行JavaScript代码
2. 查看和过滤日志消息
3. 使用console对象的方法进行日志记录
4. 执行JavaScript代码
5. Network面板：监控网络请求查看请求和响应详情分析加载性能
6. 监控网络请求
7. 查看请求和响应详情
8. 分析加载性能
9. Performance面板：记录和分析运行时性能识别性能瓶颈分析CPU使用情况
10. 记录和分析运行时性能
11. 识别性能瓶颈
12. 分析CPU使用情况
13. Memory面板：分析内存使用情况识别内存泄漏比较内存快照
14. 分析内存使用情况
15. 识别内存泄漏
16. 比较内存快照

Console面板：

• 查看和过滤日志消息
• 使用console对象的方法进行日志记录
• 执行JavaScript代码

Network面板：

• 监控网络请求
• 查看请求和响应详情
• 分析加载性能

Performance面板：

• 记录和分析运行时性能
• 识别性能瓶颈
• 分析CPU使用情况

Memory面板：

• 分析内存使用情况
• 识别内存泄漏
• 比较内存快照

ELK Stack (Elasticsearch, Logstash, Kibana)

ELK Stack是一个强大的日志分析平台：

1. Elasticsearch：用于存储和索引日志数据
2. Logstash：用于收集、处理和转发日志数据
3. Kibana：用于可视化和分析日志数据

以下是如何将JavaScript应用与ELK Stack集成的示例：

2. class ELKLogger {
3.     constructor(options = {}) {
4.         this.elasticsearchUrl = options.elasticsearchUrl || 'http://localhost:9200';
5.         this.indexName = options.indexName || 'js-logs';
6.         this.appName = options.appName || 'javascript-app';
7.         this.environment = options.environment || 'development';
8.         this.level = options.level || 'info';
9.         this.levels = { error: 0, warn: 1, info: 2, debug: 3 };
10.         this.batchSize = options.batchSize || 10;
11.         this.flushInterval = options.flushInterval || 10000;
12.         this.pendingLogs = [];
13.         
14.         if (this.elasticsearchUrl) {
15.             setInterval(() => this.flush(), this.flushInterval);
16.         }
17.     }
19.     _log(level, message, data = {}) {
20.         if (this.levels[level] > this.levels[this.level]) return;
21.         
22.         const logEntry = {
23.             '@timestamp': new Date().toISOString(),
24.             level: level,
25.             message: message,
26.             application: this.appName,
27.             environment: this.environment,
28.             data: data,
29.             userAgent: navigator.userAgent,
30.             url: window.location.href,
31.             screenSize: `${window.screen.width}x${window.screen.height}`,
32.             viewportSize: `${window.innerWidth}x${window.innerHeight}`
33.         };
34.         
35.         // 在开发环境中，也输出到控制台
36.         if (this.environment === 'development') {
37.             console[level](`[${level.toUpperCase()}] ${message}`, data);
38.         }
39.         
40.         // 添加到待发送队列
41.         this.pendingLogs.push(logEntry);
42.         
43.         if (this.pendingLogs.length >= this.batchSize) {
44.             this.flush();
45.         }
46.     }
48.     async flush() {
49.         if (this.pendingLogs.length === 0 || !this.elasticsearchUrl) return;
50.         
51.         const logsToSend = [...this.pendingLogs];
52.         this.pendingLogs = [];
53.         
54.         try {
55.             // 批量索引格式
56.             const bulkBody = logsToSend.flatMap(log => [
57.                 { index: { _index: this.indexName } },
58.                 log
59.             ]);
60.             
61.             const response = await fetch(`${this.elasticsearchUrl}/_bulk`, {
62.                 method: 'POST',
63.                 headers: {
64.                     'Content-Type': 'application/x-ndjson'
65.                 },
66.                 body: bulkBody.map(JSON.stringify).join('\n') + '\n'
67.             });
68.             
69.             if (!response.ok) {
70.                 throw new Error(`HTTP error! status: ${response.status}`);
71.             }
72.             
73.             const result = await response.json();
74.             
75.             if (result.errors) {
76.                 console.error('Some logs failed to index:', result);
77.             }
78.         } catch (e) {
79.             console.error('Failed to send logs to Elasticsearch:', e);
80.             // 如果发送失败，将日志重新放回待发送队列
81.             this.pendingLogs = [...logsToSend, ...this.pendingLogs];
82.         }
83.     }
85.     error(message, data) {
86.         this._log('error', message, data);
87.     }
89.     warn(message, data) {
90.         this._log('warn', message, data);
91.     }
93.     info(message, data) {
94.         this._log('info', message, data);
95.     }
97.     debug(message, data) {
98.         this._log('debug', message, data);
99.     }
100. }
102. // 使用示例
103. const elkLogger = new ELKLogger({
104.     elasticsearchUrl: 'http://localhost:9200',
105.     indexName: 'my-app-logs',
106.     appName: 'My JavaScript App',
107.     environment: 'production',
108.     level: 'info',
109.     batchSize: 5,
110.     flushInterval: 5000
111. });
113. elkLogger.info('Application started', { version: '1.0.0' });
114. elkLogger.warn('Feature flag disabled', { flag: 'newFeature' });
115. elkLogger.error('API request failed', {
116.     endpoint: '/users',
117.     status: 500,
118.     error: 'Internal server error'
119. });

复制代码

Sentry

Sentry是一个流行的错误监控平台，特别适合前端应用：

2. // 集成Sentry的示例
3. import * as Sentry from "@sentry/browser";
4. import { BrowserTracing } from "@sentry/tracing";
6. // 初始化Sentry
7. Sentry.init({
8.   dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
9.   integrations: [new BrowserTracing()],
10.   
11.   // 设置采样率，在生产环境中建议设置为0.2
12.   tracesSampleRate: 1.0,
13.   
14.   // 设置环境
15.   environment: process.env.NODE_ENV || 'development',
16.   
17.   // 设置发布版本
18.   release: "my-app@1.0.0",
19.   
20.   // 在发送前可以修改或丢弃事件
21.   beforeSend(event) {
22.     if (event.request) {
23.       event.request.headers = {
24.         ...event.request.headers,
25.         'Authorization': '[REDACTED]'
26.       };
27.     }
28.     return event;
29.   }
30. });
32. // 手动捕获异常
33. try {
34.   // 可能出错的代码
35.   myUndefinedFunction();
36. } catch (error) {
37.   Sentry.captureException(error);
38. }
40. // 手动捕获消息
41. Sentry.captureMessage("Something went wrong");
43. // 添加用户上下文
44. Sentry.withScope((scope) => {
45.   scope.setUser({ id: "123", email: "user@example.com" });
46.   scope.setTag("page", "checkout");
47.   scope.setExtra("data", {
48.     value1: "some data",
49.     value2: "another data"
50.   });
51.   Sentry.captureException(new Error("Custom error with context"));
52. });
54. // 事务跟踪
55. const transaction = Sentry.startTransaction({
56.   name: "checkout-process",
57.   op: "transaction"
58. });
60. const span = transaction.startChild({ op: "task", description: "processing payment" });
62. // 执行一些操作
63. processPayment();
65. span.finish();
66. transaction.finish();

复制代码

LogRocket

LogRocket是一个前端监控和调试工具，可以记录用户会话、控制台日志、网络请求等：

2. // 集成LogRocket的示例
3. import LogRocket from 'logrocket';
4. import setupLogRocketReact from 'logrocket-react';
6. // 初始化LogRocket
7. LogRocket.init('your-app-id');
9. // 对于React应用，设置LogRocket React插件
10. setupLogRocketReact(LogRocket);
12. // 添加用户信息
13. LogRocket.identify('123', {
14.   name: 'John Doe',
15.   email: 'john@example.com',
16.   
17.   // 添加自定义属性
18.   subscriptionType: 'pro',
19.   favoriteColor: 'blue'
20. });
22. // 记录自定义事件
23. LogRocket.track('checkout_started', {
24.   items: 3,
25.   total: 99.99,
26.   currency: 'USD'
27. });
29. // 记录会话URL以便于查找
30. const sessionURL = LogRocket.sessionURL;
31. console.log('LogRocket session URL:', sessionURL);
33. // 将LogRocket会话URL与其他错误报告系统集成
34. Sentry.configureScope((scope) => {
35.   scope.setExtra("sessionURL", LogRocket.sessionURL);
36. });

复制代码

Grafana Loki

Grafana Loki是一个日志聚合系统，与Grafana集成用于可视化：

2. class LokiLogger {
3.     constructor(options = {}) {
4.         this.lokiUrl = options.lokiUrl || 'http://localhost:3100/loki/api/v1/push';
5.         this.username = options.username;
6.         this.password = options.password;
7.         this.labels = {
8.             ...options.labels,
9.             app: options.appName || 'javascript-app',
10.             env: options.environment || 'development'
11.         };
12.         this.level = options.level || 'info';
13.         this.levels = { error: 0, warn: 1, info: 2, debug: 3 };
14.         this.batchSize = options.batchSize || 10;
15.         this.flushInterval = options.flushInterval || 10000;
16.         this.pendingLogs = [];
17.         
18.         if (this.lokiUrl) {
19.             setInterval(() => this.flush(), this.flushInterval);
20.         }
21.     }
23.     _log(level, message, data = {}) {
24.         if (this.levels[level] > this.levels[this.level]) return;
25.         
26.         const logEntry = {
27.             timestamp: new Date().toISOString(),
28.             level: level,
29.             message: message,
30.             data: data,
31.             userAgent: navigator.userAgent,
32.             url: window.location.href
33.         };
34.         
35.         // 在开发环境中，也输出到控制台
36.         if (this.labels.env === 'development') {
37.             console[level](`[${level.toUpperCase()}] ${message}`, data);
38.         }
39.         
40.         // 添加到待发送队列
41.         this.pendingLogs.push(logEntry);
42.         
43.         if (this.pendingLogs.length >= this.batchSize) {
44.             this.flush();
45.         }
46.     }
48.     async flush() {
49.         if (this.pendingLogs.length === 0 || !this.lokiUrl) return;
50.         
51.         const logsToSend = [...this.pendingLogs];
52.         this.pendingLogs = [];
53.         
54.         try {
55.             // 准备Loki格式的日志
56.             const streams = [{
57.                 stream: {
58.                     ...this.labels,
59.                     level: logsToSend[0].level
60.                 },
61.                 values: logsToSend.map(log => [
62.                     `${Date.now()}000000`, // 纳秒时间戳
63.                     JSON.stringify({
64.                         message: log.message,
65.                         data: log.data,
66.                         userAgent: log.userAgent,
67.                         url: log.url
68.                     })
69.                 ])
70.             }];
71.             
72.             const headers = {
73.                 'Content-Type': 'application/json'
74.             };
75.             
76.             // 添加基本认证（如果提供了用户名和密码）
77.             if (this.username && this.password) {
78.                 headers['Authorization'] = `Basic ${btoa(`${this.username}:${this.password}`)}`;
79.             }
80.             
81.             const response = await fetch(this.lokiUrl, {
82.                 method: 'POST',
83.                 headers: headers,
84.                 body: JSON.stringify({ streams })
85.             });
86.             
87.             if (!response.ok) {
88.                 throw new Error(`HTTP error! status: ${response.status}`);
89.             }
90.         } catch (e) {
91.             console.error('Failed to send logs to Loki:', e);
92.             // 如果发送失败，将日志重新放回待发送队列
93.             this.pendingLogs = [...logsToSend, ...this.pendingLogs];
94.         }
95.     }
97.     error(message, data) {
98.         this._log('error', message, data);
99.     }
101.     warn(message, data) {
102.         this._log('warn', message, data);
103.     }
105.     info(message, data) {
106.         this._log('info', message, data);
107.     }
109.     debug(message, data) {
110.         this._log('debug', message, data);
111.     }
112. }
114. // 使用示例
115. const lokiLogger = new LokiLogger({
116.     lokiUrl: 'http://localhost:3100/loki/api/v1/push',
117.     username: 'loki',
118.     password: 'password',
119.     labels: {
120.         app: 'my-app',
121.         env: 'production',
122.         version: '1.0.0'
123.     },
124.     level: 'info',
125.     batchSize: 5,
126.     flushInterval: 5000
127. });
129. lokiLogger.info('Application started');
130. lokiLogger.warn('Feature flag disabled', { flag: 'newFeature' });
131. lokiLogger.error('API request failed', {
132.     endpoint: '/users',
133.     status: 500,
134.     error: 'Internal server error'
135. });

复制代码

总结

有效的日志记录是JavaScript开发中不可或缺的一部分。从基础的console.log到高级的日志管理技术，良好的日志实践可以帮助我们：

1. 提高调试效率：通过详细的日志信息，快速定位和解决问题。
2. 增强错误追踪：捕获和记录错误，包括堆栈跟踪和上下文信息，以便于分析。
3. 优化性能：通过性能监控日志，识别和解决性能瓶颈。
4. 改善生产环境稳定性：在生产环境中实施适当的日志策略，及时发现和解决问题。
5. 提升用户体验：通过分析用户交互日志，了解用户行为并改进应用。

通过本文介绍的各种技术和工具，开发者可以构建一个全面的日志系统，从开发到生产环境，有效提升开发效率和代码质量。记住，好的日志不仅仅是记录信息，更是提供洞察力和解决问题的能力。

在实际应用中，根据项目需求和团队情况选择合适的日志策略和工具，并随着项目的发展不断调整和优化日志系统，使其成为开发流程中的有力助手。