React 远程控制台日志记录 [英] React Remote Console Logging

问题描述

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

I setup an Express Server with Mongo to record console logs during debug testing of an Electron app using React.

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

I simply use ajax to send what I would normally print with console.log. This works fine with individual events I want logged, but how do I export the entire chrome style console as an object so that anything that would reach the console (example: webpack messages, messages from other components etc) would all be accessible as one object that I can do a POST on.

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

Basically a way to record everything that you would see in the console whether it was from a 3rd party package or that I expressly logged myself. Is there a console dump all method of some sort I'm not seeing in the chromium/electron/react docs?

示例:

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

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

Logging individual events to the server is easy. How do I dump the entire console?

更新下面提到的是绑定到进程stdout和stderr.我尝试了推荐的包捕获控制台以及这个代码片段:

UPDATE Mentioned below was to tie into the process stdout and stderr. I tried the recommended package capture-console and also this code snippet:

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 时，两者都给我写这个错误:

However both give me this error with write when using with react:

TypeError: Cannot read property 'write' of undefined
hook_stream

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

That particular method seems to log the electron node side fine when I use it in the electron main.js. However I can't get it to work within my react components.

推荐答案

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

One way of doing this is to overwrite the console.log with your custom implementation, so whenever any part of the code calls the console.log the call will be intercepted by your custom function where you can log the message to your remote server using some API calls.

一旦您记录了您的消息，您就可以调用原始的 console.log 方法.

Once you have logged your message you can call the original console.log method.

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

Following example shows a custom implementation of console.log method.

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

这篇关于React 远程控制台日志记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！