React Remote Console Logging

Question

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

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.

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?

example:

//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?

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

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

TypeError: Cannot read property 'write' of undefined
hook_stream

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.

Answer 1

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.

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

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

Answer 2

You tie into the stdout, stderr streams in the process module.

Take a look at npm capture-console. You will need to capture console output from any renderer process as well as the main process.

UPDATE

It appears electron has done some strange things with renderer process stdout stream. You are better off using a custom logging solution like electron-log and syncing logs from the written log file.