React 远程控制台日志记录答案

【问题标题】：React Remote Console LoggingReact 远程控制台日志记录
【发布时间】：2018-12-07 16:21:52
【问题描述】：

我使用 Mongo 设置了一个 Express 服务器，以便在使用 React 对 Electron 应用程序进行调试测试期间记录控制台日志。

我只是使用 ajax 来发送我通常使用 console.log 打印的内容。这适用于我想要记录的单个事件，但是我如何将整个 chrome 样式控制台导出为一个对象，以便可以访问控制台的任何内容（例如：webpack 消息、来自其他组件的消息等）都可以作为一个对象访问我可以在上面做一个 POST。

基本上是一种记录您在控制台中看到的所有内容的方法，无论是来自第 3 方包还是我自己明确记录的内容。是否有某种我在铬/电子/反应文档中没有看到的控制台转储所有方法？

示例：

//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);

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

更新下面提到的是绑定到进程stdout和stderr。我尝试了推荐的包 capture-console 以及这段代码 sn-p:

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

当我在电子 main.js 中使用该特定方法时，它似乎可以很好地记录电子节点端。但是我无法让它在我的反应组件中工作。

【问题讨论】：

标签： reactjs console electron chromium console.log

【解决方案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);

【讨论】：

谢谢。这正确记录了我所有的 console.log。出于某种原因，尽管它没有记录我正在使用的任何节点包和 webpack 的控制台输出。
您在哪里定义自定义方法？您可能需要在入口点注册
我们在window上定义这个，这对所有人来说都是通用的。所以理想情况下这应该有效。选中此项并将您的自定义消息定义为与developer.mozilla.org/en-US/docs/Web/API/Console/log 相同
@johnsonjp34 您可能还需要覆盖console.info、console.warn 和console.error：github.com/webpack/webpack/blob/…
是的，这似乎从信息、警告和错误中收集了我所有的 webpack 日志。我仍然有一些错误通过，例如：“Uncaught TypeError: Cannot read property 'clockWrapperEl' of undefined at HTMLDocument.stopDragHandler”从我正在使用的一些组件中反应 npm 导入。我正在使用带有警告和错误的@PSK 方法。任何时候我使用 console.error 都会收集错误，但是像我从节点包中提到的错误不会被记录，但它们会显示在控制台中。

【解决方案2】：

您在process 模块中绑定到stdout、stderr 流。

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

更新

看来 electron 已经用渲染器处理标准输出流做了一些strange things。您最好使用自定义日志记录解决方案，例如 electron-log，并从写入的日志文件同步日志。

【讨论】：