9

Let's say I have the following code:

<script>

    function billy() {
        alert('muahahahaha!');
    }

    function suzzy() {
        return;
    }

</script>

and a button like this (with an undefined onclick handler):

<input type='button' value='click me' onClick='FRANK()' />

When I click the button, the following appears in the developer console:

Function 'FRANK()' is not defined.

How could I store that message in a variable and display it on the page?

document.getElementById('prompt').innerHTML = log;

So it would appear as:

<div id='prompt'>
    Function 'FRANK()' has not been defined.
</div>
jahroy
  • 22,322
  • 9
  • 59
  • 108
XRipperxMetalX
  • 135
  • 2
  • 9
  • 1
    I have no idea of what you are talking, you have a function called frank which you haven't defined, your suzzy function returns nothing, so what you are trying to do? – Mr. Alien May 27 '14 at 05:38
  • I just want to know why it is you want to do this? – powerc9000 May 27 '14 at 05:38
  • I read the question for twice, I cant get it either. – jhyap May 27 '14 at 05:38
  • 5
    he wants to print error in dom in place of console – Govind Singh May 27 '14 at 05:39
  • Yes thank you Govind Singh Nagarkoti – XRipperxMetalX May 27 '14 at 05:42
  • The question is pretty clear , but he could have got the solution in 2 or 3 google hits – Bharath R May 27 '14 at 05:43
  • http://stackoverflow.com/questions/16616722/sending-all-javascript-console-output-into-a-dom-element – Govind Singh May 27 '14 at 05:59
  • Trust me I spent a lot of time on Google. About an hour or so... Well I also didn't know much of what to search for. To be honest, this whole post right here helped me learn a whole new aspect of web browsers – XRipperxMetalX May 30 '14 at 05:25
  • I absolutely did understand the question, and I want the same thing. Very often, a JavaScript error will occur, and, yes, it'll silently get logged to the Console, but for regular users, whatever was happening on the webpage will just *stop*... and they won't even know that an error had occurred. "Is my webpage slow.. should I just wait..? Is anything happening ?" Even in Angular, using a GlobalErrorHandler, JavaScript errors will just get ignored. From a Support point of view, this is pretty hopeless... – Mike Gledhill Jan 28 '21 at 09:14

2 Answers2

17

If you want to display any error of the page in your div, you may use the global event handler onerror :

window.onerror = function(e){
  document.getElementById('prompt').innerHTML = e.toString();
}

Demonstration


If your goal is to intercept all what is written by the browser in the console, not only the errors, I'm not sure it's directly possible as the browser doesn't use the accessible console functions for everything.

But you can do a lot by hooking all global event handlers :

Demonstration

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    I didn't knew this :D - this throws all the errors from the console? – Mr. Alien May 27 '14 at 05:43
  • @BharathRallapalli What do you mean ? A script doesn't go on running if an error is throwed and not catched. – Denys Séguret May 27 '14 at 05:46
  • What I am saying is in that onclick event if OP calls multiple undefined functions , this code will show only first error hit .. but it can be changed to show all .. juz saying :) – Bharath R May 27 '14 at 05:52
  • @BharathRallapalli [Absolutely not, all errors are catched](http://jsbin.com/jusum/3/edit) – Denys Séguret May 27 '14 at 05:53
  • Not all errors but I'm trying to make my own JavaScript based terminal and want all information to be logged as well as executed. I just was missing this little aspect and now it's finished. – XRipperxMetalX May 27 '14 at 05:58
  • @BharathRallapalli Only one error is raised in your example as the script execution can't go on. You can't change that without changing the event handler (which could be done by automatically wrapping all statements in try/catch but makes no sense) – Denys Séguret May 27 '14 at 05:58
  • I'm wondering though, is it possible to log all events that occur? Not just the errors? – XRipperxMetalX May 27 '14 at 05:58
  • That's pretty cool btw, it was very hard to follow though. A lot going on. Probably because it's 3 am and I'm tired lol – XRipperxMetalX May 27 '14 at 06:51
3

I think @dystroy's answer is sufficient here, but if you want proper error handling, you should be using try and catch statements instead..

Demo

function throw_msg() {
    try {
        var a = '';
        alert(b);
    }
    catch(throw_error) {
        document.getElementById('error-box').innerHTML=throw_error.message;
        setTimeout(
            function() {
                document.getElementById('error-box').innerHTML='';
            }, 2000);
    }
}

Explanation for the above code :

We are first creating a function which will be called on click of the button, and than when you click the button, the code in the try block gets executed, if it has any error, we then throw the error using the catch statement where the error message is printed using throw_error.message and at the end, we use setTimeout to clear out the error message in 2000 i.e 2 seconds

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Sweet! now what is throw_error? Can that be named error? and then printed with error.message? – XRipperxMetalX May 27 '14 at 06:07
  • @XRipperxMetalX Yes indeed, I don't use such keywords because they are too general to be used, also in some languages, such types of keywords are reserved keywords of the language (not in javascript) by using which creates more dirty errors, so I use custom ones... http://jsfiddle.net/xkMbW/1/ <-- demo with error.message – Mr. Alien May 27 '14 at 06:09
  • @dystroy Obviously it won't, thats why I wrote error handling for a particular code block – Mr. Alien May 27 '14 at 06:23
  • can't we use window.onerror.each(e, function(){ /*each error is here as "e"*/ }); – Janaka R Rajapaksha May 27 '14 at 06:42
  • I can't seem to find any documentation on .message method whatsoever, what is that? I really like your method btw, reason being because I was already using the try and catch statements – XRipperxMetalX May 27 '14 at 06:50
  • Also, is it possible to split this message into an array? .split(' ') isn't working for me. – XRipperxMetalX May 27 '14 at 06:54
  • 1
    @XRipperxMetalX refer the try and catch page of mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch and for error, refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error – Mr. Alien May 27 '14 at 06:54
  • @JanakaRRajapaksha no, you have to store it in your own array, by `push(e)` when `window.onerror` – syahid246 Jul 03 '22 at 07:12