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.

PSK · Accepted Answer · 2018-12-19T11:14:23.527

6

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

edited Dec 19 '18 at 11:14

answered Dec 17 '18 at 06:43

PSK

17,547
5
32
43

Thanks. This is correctly logging all my console.log's. For some reason though it does not log console outputs from any node package that I am using and webpack. – johnsonjp34 Dec 19 '18 at 15:40
Where are you defining your custom method? You might require to register at the entry point – PSK Dec 19 '18 at 16:04
We are defining this on window, which is common for all. So ideally this should work. Check this and define your custom message same as https://developer.mozilla.org/en-US/docs/Web/API/Console/log – PSK Dec 19 '18 at 16:05
2

@johnsonjp34 You probably need to overwrite `console.info`, `console.warn` and `console.error` as well: https://github.com/webpack/webpack/blob/e4ae6463c1afd30183fb4b3cadfc4bd129229b1f/hot/log.js#L23-L29 – James Brierley Dec 19 '18 at 16:47
Yes that seems to collect all my webpack logs from info, warn, and error. I still have some errors passing through like: "Uncaught TypeError: Cannot read property 'clockWrapperEl' of undefined at HTMLDocument.stopDragHandler" from some components I am using that are react npm imports. I am using @PSK method with warn and error. Any time I use console.error the error gets collected however some like the one I mentioned from the node packages do not get recorded, but they show up in the console. – johnsonjp34 Dec 19 '18 at 16:53
You can override `window.onerror` for that https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror – James Brierley Dec 20 '18 at 20:38

Josiah Ruddell · Answer 2 · 2018-12-14T18:35:28.587

3

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.

edited Dec 14 '18 at 18:35

answered Dec 08 '18 at 00:43

Josiah Ruddell

29,697
8
65
67

React Remote Console Logging

2 Answers2

Linked