Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I override/extend ReferenceError in Chrome's JavaScript?
    text
    copied!<p>To make debugging easier, I'm capturing all of the console logs in Chrome so that users who submit a feedback entry will also submit all of the logs to our server. When someone encounters a problem in production, I can first and foremost get them back to work so that I can then sit down and more thoroughly go through all of the logs to determine the root cause of whatever issue the user encountered in production.</p> <p>The technique I use to capture the logs involves overriding console.log so that all text entered in the first argument gets stored in an array while simultaneously invoking the legacy function so that I can still see the logs in the console too.</p> <p>The problem is when there's the occasional uncaught exception. These aren't included in the uploaded logs, so it's not always clear what caused the problem. So I tried overriding ReferenceError by writing a JavaScript function that takes a function as an argument, then returns a new function that does stuff with it, like storing data in a variable, and then invoking the legacy function as the last step:</p> <pre><code>function overrideException(legacyFn) { /** arguments for original fn **/ return function() { var args = []; args[0] = arguments[0]; // pass in as arguments to original function and store result to // prove we overrode the ReferenceError output = "&gt;&gt; " + legacyFn.apply(this, args).stack; return legacyFn.apply(this, arguments); } } </code></pre> <p>To test the overrideException function, I ran the following code on the console:</p> <pre><code>ReferenceError = overrideException(ReferenceError); </code></pre> <p>Afterwards, I tested the returned function, the new ReferenceError, by manually throwing a ReferenceError:</p> <pre><code>throw new ReferenceError("YES!! IT WORKS! HAHAHA!"); </code></pre> <p>The resulting output on the console is:</p> <blockquote> <p>ReferenceError: YES!! IT WORKS! HAHAHA!</p> </blockquote> <p>And checking the global variable <code>output</code> from the overrideException function shows that it did indeed run:</p> <pre><code>output "&gt;&gt; ReferenceError: YES!! IT WORKS! HAHAHA! at ReferenceError (&lt;anonymous&gt;) at new &lt;anonymous&gt; (&lt;anonymous&gt;:18:35) at &lt;anonymous&gt;:2:7 at Object.InjectedScript._evaluateOn (&lt;anonymous&gt;:562:39) at Object.InjectedScript._evaluateAndWrap (&lt;anonymous&gt;:521:52) at Object.InjectedScript.evaluate (&lt;anonymous&gt;:440:21)" </code></pre> <p>Now, here's where things start to fall apart. In our code, we're not going to know when an uncaught exception occurs, so I tested it by attempting to run a function that doesn't exist:</p> <pre><code>ttt(); </code></pre> <p>Which results in:</p> <blockquote> <p>ReferenceError: ttt is not defined</p> </blockquote> <p>However, unlike the case where we explicitly throw an error, in this case, the function doesn't fire, and we're left with only the legacy functionality. The contents of the variable <code>output</code> is the same as in the first test.</p> <p>So the question seems to be this: <strong>How do we override the ReferenceError functionality that the JavaScript engine uses to throw errors so that it's the same one we use when we throw a ReferenceError?</strong></p> <p>Keep in mind that my problem is limited only to Chrome at this time; I'm building a Chrome Packaged app.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload