React远程控制台日志记录

Question

我使用Express Server和Mongo来记录在使用React开发Electron应用程序时进行调试测试期间的控制台日志。我简单地使用ajax发送我通常使用console.log打印的内容。这对我想要记录的单个事件有效，但是如何将整个Chrome样式控制台导出为一个对象，以便可以访问到从控制台获取的任何内容（例如：webpack消息、来自其他组件的消息等），并将它们作为一个对象进行POST呢？基本上，需要一种方法来记录您在控制台中看到的所有内容，无论是来自第三方软件包还是我自己明确记录的内容。是否有某种控制台全部转储的方法，我没有在Chromium / Electron / React文档中看到？例如：

//import some debugger method to POST to server collecting logs

export function debugpost(logobject) {



$.ajax({
    type: "POST",
    url: "http://" + "192.168.0.94" + ":3000/tasks",

    headers: {

    },
    data: {
        log: logobject
    },
    success: function(data) {


    }.bind(this),
    error: function(errMsg) {
        console.log(errMsg);
    }.bind(this)
});
}

//simple way of recording logs in other component.
var testlogmessage = "This isn't right"

debugpost(testlogmessage);

将单个事件记录到服务器很容易。如何转储整个控制台？

更新 下面提到的是将其连接到进程的标准输出和标准错误输出。我尝试了推荐的 capture-console 包以及以下代码片段：

var logs = [],

hook_stream = function(_stream, fn) {
    // Reference default write method
    var old_write = _stream.write;
    // _stream now write with our shiny function
    _stream.write = fn;

    return function() {
        // reset to the default write method
        _stream.write = old_write;
    };
},

// hook up standard output
unhook_stdout = hook_stream(process.stdout, function(string, encoding, fd) {
    logs.push(string);
});

但是，在使用React时，无论哪种方式都会给我返回写入时的错误：

TypeError: Cannot read property 'write' of undefined
hook_stream

当我在 electron 的 main.js 中使用该特定方法时，它似乎能够很好地记录 electron 节点端的情况。然而，我无法在我的 React 组件中使其工作。

- johnsonjp34

Answer 1

一种实现方式是通过覆盖console.log方法，当代码中的任何部分调用console.log时，调用将被您的自定义函数拦截，在此函数中您可以使用一些API调用将消息记录到远程服务器中。

记录消息后，您可以调用原始的console.log方法。

下面的示例显示了console.log方法的自定义实现。

var orgLog = console.log;

console.log = function(message) {
  alert("Intercepted -> " + message); //Call Remote API to log the object.
  //Invoke the original console.log
  return orgLog(message);
}

let a = {
  foo: "bar"
};
console.log(a);

- PSK

---

谢谢。这个程序正确地记录了我所有的console.log。但是出于某种原因，它不会记录我使用的任何节点包和webpack的控制台输出。 - johnsonjp34

你在哪里定义你的自定义方法？你可能需要在入口点进行注册。 - PSK

我们在窗口上定义了这个，这对所有人都是通用的。所以理想情况下，这应该可以工作。请检查并定义您的自定义消息，与 https://developer.mozilla.org/en-US/docs/Web/API/Console/log 相同。 - PSK

@johnsonjp34 你可能还需要覆盖 console.info、console.warn 和 console.error，参考：https://github.com/webpack/webpack/blob/e4ae6463c1afd30183fb4b3cadfc4bd129229b1f/hot/log.js#L23-L29 - James Brierley

是的，它似乎收集了我所有的webpack日志，包括信息、警告和错误。但我仍然有一些错误通过，比如：“Uncaught TypeError: Cannot read property 'clockWrapperEl' of undefined at HTMLDocument.stopDragHandler”，来自我使用的一些组件，它们是react npm导入。我正在使用@PSK方法与warn和error。每当我使用console.error时，错误都会被收集，但像我提到的那个来自节点包的错误却没有被记录，但它们出现在控制台中。 - johnsonjp34

你可以覆盖window.onerror来完成这个任务。https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror - James Brierley

Answer 2

您可以使用process模块来连接stdout和stderr流。

请查看npm capture-console。您需要捕获任何渲染进程以及主进程的控制台输出。

更新

似乎electron对渲染进程的stdout流进行了一些奇怪的处理。最好使用自定义日志记录解决方案，如electron-log，并从已写入的日志文件同步日志。

- Josiah Ruddell