Capturing JavaScript Console.Log

Capturing javascript console.log?

You can hijack JavaScript functions in the following manner:

(function(){
    var oldLog = console.log;
    console.log = function (message) {
        // DO MESSAGE HERE.
        oldLog.apply(console, arguments);
    };
})();

1. Line 1 wraps your function in a closure so no other functions have direct access to oldLog (for maintainability reasons).
2. Line 2 captures the original method.
3. Line 3 creates a new function.
4. Line 4 is where you send message to your server.
5. Line 5 is invokes the original method as it would have been handled originally.

apply is used so we can invoke it on console using the original arguments. Simply calling oldLog(message) would fail because log depends on its association with console.

---

Update Per zzzzBov's comment below, in IE9 console.log isn't actually a function so oldLog.apply would fail. See console.log.apply not working in IE9 for more details.

Read console.log() output form javascript

As others have stated, you can override the console.log() function with your own, and implement your own implementation:

var oldLog = unsafeWindow.console.log;
var messages = [];

unsafeWindow.console.log = function(msg) {
    messages.push(msg);
    oldLog.apply(null, arguments);
}

// Access the entire console.log history in messages

How to capture console.log from external sources?

The problem here is because of that iframe. iframes have a different window object, independent from the parent's window object. This means whatever modifications you did to the parent's window.console will not affect the iframe's window.console.

You could get the frame's window object via contentWindow and modify its console. But you'd have to do this for each present and future iframe. Additionally, you cannot access the contentWindow of a iframe rendering a page from another domain.

If you're attempting to capture the logs of all the frames and somehow consolidate them into one big log, a better option is to have that same console-altering script on every page you want tracked. Then send all your logs to the server, ordered by timestamp or something. That's pretty much how Sentry works.

How to collect all console outputs or access current content of console in frontend

It's a better approach, if you do not rely on the console. It's up to you, but I say that letting an error reaching the console is not a best practice. You can catch the errors before they arrive on the console anyway.

• For HTTPClient errors, you can use an error Iterceptor
• For Angular "code" errors, I recommend using a Global Error Handler

Is there a way to capture JavaScript console output so I can reference it elsewhere?

you can overwrite the console function(s) that you want to use

if(window.console && console.log){
   console.log = function(){
      var args = arguments;
      /* process args to your app */ 
   }
}

javascript - Capturing console with line number

You can try to parse the value of new Error().stack. It is a string which is the stack trace of the scope where the Error object was created.

The output is browser dependent since it is a non-standard feature. Since you only need it to work on nw.js it could be an option for you.

On node.js (and I suspect chrome) the output is a newline separated string where each line is of the format:

at functionName (/absolute/file/path:lineNumber:charNumber)

So the in your case the information you want is probably:

new Error().stack.split('\n')[1];

---

Related Topics