写一个代理console.log的方法

135 阅读2分钟

"```markdown

自定义代理 console.log 方法

在JavaScript中,console.log是一个非常有用的调试工具,但有时我们需要对其进行扩展或修改,以便在日志输出时执行额外的操作,比如过滤特定的信息或将日志发送到服务器。以下是一个自定义代理console.log的方法。

实现步骤

1. 创建代理方法

首先,我们需要创建一个新的函数来代理原始的console.log方法。我们可以使用console.log的原始实现,并在其基础上添加额外的逻辑:

// 保存原始的 console.log 方法
const originalConsoleLog = console.log;

// 创建代理 console.log 方法
console.log = function(...args) {
    // 过滤掉不需要的日志,例如以 \"DEBUG:\" 开头的日志
    if (args[0] && typeof args[0] === 'string' && args[0].startsWith('DEBUG:')) {
        return; // 直接返回,不输出
    }
    
    // 在这里可以添加额外的逻辑,比如发送日志到服务器
    sendLogToServer(args);

    // 调用原始的 console.log 方法输出日志
    originalConsoleLog.apply(console, args);
};

2. 添加发送日志到服务器的功能

我们可以实现一个简单的函数来将日志发送到服务器。假设服务器端可以接收POST请求,我们可以使用fetch API来实现:

function sendLogToServer(logs) {
    fetch('https://example.com/logs', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ logs }),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
    })
    .catch(error => {
        originalConsoleLog('Error sending log to server:', error);
    });
}

3. 测试新的 console.log 方法

现在,我们可以测试新定义的console.log方法。我们尝试记录不同类型的日志信息:

console.log('INFO: This is an info message.');
console.log('DEBUG: This debug message will be filtered out.');
console.log('ERROR: This is an error message.');

// 你还可以测试发送日志到服务器的功能
console.log('This is another message to log.');

4. 完整代码示例

以下是完整的代码示例,将上述步骤整合在一起:

// 保存原始的 console.log 方法
const originalConsoleLog = console.log;

// 创建代理 console.log 方法
console.log = function(...args) {
    // 过滤掉不需要的日志
    if (args[0] && typeof args[0] === 'string' && args[0].startsWith('DEBUG:')) {
        return; // 直接返回,不输出
    }

    // 发送日志到服务器
    sendLogToServer(args);

    // 调用原始的 console.log 方法输出日志
    originalConsoleLog.apply(console, args);
};

// 发送日志到服务器的函数
function sendLogToServer(logs) {
    fetch('https://example.com/logs', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ logs }),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
    })
    .catch(error => {
        originalConsoleLog('Error sending log to server:', error);
    });
}

// 测试新的 console.log 方法
console.log('INFO: This is an info message.');
console.log('DEBUG: This debug message will be filtered out.');
console.log('ERROR: This is an error message.');
console.log('This is another message to log.');

通过这个自定义的代理console.log方法,我们可以灵活地控制日志的输出和存储,帮助我们更好地调试和监控应用程序的运行状态。