Stack traces that utilise source mapping - javascript

Overview:
The stack trace output in the browser console is not the same trace that is returned when Error.stack is called. The console stack trace seems to take into account sourcemaps whereas the Error.stack stack trace does not.
Console Output
Here is the default stack trace that is output to the console.
Uncaught TypeError: Cannot set property 'y' of undefined source.js:4
(anonymous function) source.js:4
(anonymous function) source.js:4
(anonymous function) (index):17
Error.stack Output
Here is the stack trace from Error.stack:
TypeError: Cannot set property 'y' of undefined
at <anonymous>:1:37
at <anonymous>:1:60
at http://localhost:63342/source-map-example/example2/:17:23 (index):12
Source Code:
Here is the code that I used for this experiment:
<script>
window.onerror = function() {
console.log(arguments[4].stack);
}
var script = document.createElement('script');
script.textContent = '(function(){var person={};person.x.y="Throws an error..."})();//# sourceMappingURL=source.min.map';
document.body.appendChild(script);
</script>
Question:
Is it possible to programmatically obtain a stack trace that includes references to files & lines based on the associated sourcemap?
Edit: console.trace and new Error().stack
note: I didn't use window.onerror for these examples, instead I wrapped the embedded JS in a try...catch and attempted to utilise these approaches within the catch. The reason for this was because the stack trace didn't provide any trace into the embedded JS for either method when used within window.onerror.
console.trace() works the best, but of course the output can't be captured. Even still, this does not work as expected. The output contains a stack trace that points to the console.trace() line, and little else.
console.trace() source.js:9
(anonymous function) source.js:9
(anonymous function) source.js:9
(anonymous function)
new Error().stack does not work as expected either. It does contain a stack trace, but it's not using the sourcemap.
Error
at <anonymous>:1:85
at <anonymous>:1:105
at http://localhost:63342/source-map-example/example2/:18:23 source.js:18

Unfortunately, this is browser-specific feature is not currently supported in either Firefox or Chrome (and I am unfamiliar with its support in other browsers).
In Chrome, you can follow feature request currently being implemented at https://code.google.com/p/chromium/issues/detail?id=357958
Depending on your use case and if you have some means of capturing the sourcemaps themselves, Mozilla has an excellent sourcemapping tool that will let you map your sources/stacktraces at https://github.com/mozilla/source-map/.

Related

Get line of error/assertionError in postman

So I m getting an assertion error in postman, and the error looks like this:
There was an error in evaluating the test script: AssertionError: expected undefined to be a string
But i have 300 assertions for this API, and is virtually impossible to idenftify what assertion actually failed, is there a way for me to make postman show the line number that raised the assertionFail?
There is a way to get the line number if you dig down into this:
How do you find out the caller function in JavaScript?
Wrap your asserts in a very large try catch. Then print out the stack in the catch.
Details
Append the catch at the bottom. Something like this:
try {
// 300 asserts here
}catch (e) {
console.log(e);
console.log(`e.stack = ${e.stack}`);
}
When PM hits the assert you will see something like:
{type: "Error", name: "TypeError", message: "Cannot read property 'json' of undefined"}
e.stack = TypeError: Cannot read property 'json' of undefined
at Object.eval (eval at exec (evalmachine.<anonymous>:58:1931768), <anonymous>:89:30)
at u.exec (evalmachine.<anonymous>:58:1931803)
at t.exports (evalmachine.<anonymous>:58:5743)
at Object.<anonymous> (evalmachine.<anonymous>:58:7440)
at evalmachine.<anonymous>:15:26
at Array.forEach (<anonymous>)
at Object.emit (evalmachine.<anonymous>:14:54)
at evalmachine.<anonymous>:51:24
at evalmachine.<anonymous>:5:21
at evalmachine.<anonymous>:6:18
The top of the stack tells you the line number (zero-based):
at Object.eval (eval at exec (evalmachine.:58:1931768), :89:30)
So in this case 89, is reported as 88 in the IDE.
BTW it appears that the 30 is actually the column number of the called method.
Additional entries give a longer trace, showing the lineage of the calls before the error occurred, which may be useful in some debugging cases.
Warning this will cause the first assert error to interrupt any further testing. So undo this change when you are done.

Error can't redefine non-configurable property "userAgent"

Lately we have been getting a lot of javascript errors "can't redefine non-configurable property "userAgent"".
We don't attempt to redefine userAgent in our code. We barely even reference userAgent. The only places would be in code like the following:
var browser_msie = (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) ? true : false;
I am wondering if this error is rather coming from some bad browser behavior. It only started showing up recently.
Last evening we got over 20,000 of such error messages, and all from the same member of our service.
EDIT
The error information is as follows:
Error Message:
Message: TypeError: can&#39;t redefine non-configurable property &#34;userAgent&#34;
URL: https://www.rephunter.net/member-home.php
Line:1
Column:130
Stack:#https://www.rephunter.net/member-home.php:1:130
Error Traceback:
#0 Called backtrace in file /var/www/rephunter/www/webroot/include/error-handler-inc.php as line #68
#1 Called error_handler in file as line #
#2 Called trigger_error in file /var/www/rephunter/www/webroot/ajax/javascript-error.php as line #14
Unfortunately this offers no help, as line 1 of the page is just <!DOCTYPE html>. I don't see how to get to that part of the code. Of course if that were possible it might be easy to see the cause of the issue.
I recall in the past the Dev Tools might have given a "spiders view" of the page, but now I only see the DOM on the Elements tab, and Sources. Both of these are formatted and their is no way to see what "line 1 char 130" means.

Kotlin/JS NPE Source Reference

I have a Kotlin/JS project that is throwing a null pointer exception, but I can't figure out where it is coming from. The source map in the browser references exceptionUtils.kt?24ab which is a generic wrapper for the javascript error:
#JsName("throwNPE")
internal fun throwNPE(message: String) {
throw NullPointerException(message)
}
The stack trace for the error shown in the javascript console is, likewise, referencing the javascript bridging code, not my actual Kotlin source:
"NullPointerException
at Object.captureStack (webpack-internal:///./kotlin-dce-dev/kotlin.js:38592:15)
at NullPointerException.Exception [as constructor] (webpack-internal:///./kotlin-dce-dev/kotlin.js:38925:14)
at NullPointerException.RuntimeException [as constructor] (webpack-internal:///./kotlin-dce-dev/kotlin.js:38951:17)
at RuntimeException_init_0 (webpack-internal:///./kotlin-dce-dev/kotlin.js:38962:24)
at new NullPointerException (webpack-internal:///./kotlin-dce-dev/kotlin.js:39071:7)
at Object.throwNPE (webpack-internal:///./kotlin-dce-dev/kotlin.js:42775:13)
at Kotlin.ensureNotNull (webpack-internal:///./kotlin-dce-dev/kotlin.js:748:35)
at main (webpack-internal:///./kotlin-dce-dev/my-app.js:68:27)
at Object.eval (webpack-internal:///./kotlin-dce-dev/my-app.js:431:3)
at eval (webpack-internal:///./kotlin-dce-dev/my-app.js:5:35)"
How can I trace this back to the actual Kotlin source for the exception?

SVG cause a row of errors thrown in Chrome console

A static page with pure JS and HTML and a svg file inserted in an "object" tag, everything is fine, but in one point I have noticed a stack of errors in the console. Everything works, but anyway I would like to understand the origin of it.
I tried to move file, clear cache, attaching svg using JS code at the end of page load, removing all of JS leaving file in pure HTML, removing reference to the CSS file in the svg itself, the error is always the same and it doesn't show only when the svg is out.
Google Chrome Version 38.0.2125.58 beta on linux peppermint os three,
I didn't noticed anything like that in FF and I didn't test other browsers. Greetings
Error in event handler for (unknown): Cannot read property 'addEventListener' of null
Stack trace: TypeError: Cannot read property 'addEventListener' of null
at initialize (chrome-extension://mdgdbmohcdjfbglkepkiaabaieenhhhc/inject.js:367:16)
at handleMessage (chrome-extension://mdgdbmohcdjfbglkepkiaabaieenhhhc/inject.js:58:5)
at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
at EventImpl.dispatch_ (extensions::event_bindings:379:35)
at EventImpl.dispatch (extensions::event_bindings:403:17)
at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26)
at dispatchOnMessage (extensions::messaging:304:22) extensions::uncaught_exception_handler:9
handler extensions::uncaught_exception_handler:9
exports.handle extensions::uncaught_exception_handler:15
EventImpl.dispatch_ extensions::event_bindings:384
EventImpl.dispatch extensions::event_bindings:403
target.(anonymous function) extensions::SafeBuiltins:19
publicClass.(anonymous function) extensions::utils:93
dispatchOnMessage extensions::messaging:304

Error with Ext.Msg in js-test-driver tests

In my js-test-driver tests, I'm having an error from simply calling
Ext.Msg.alert('Error', 'An error occurred while trying load parameters for action with id ' + actionId);
Error Message: Uncaught TypeError: Cannot read property 'insertBefore' of null
Note that Ext.Msg.rendered is true and that Ext.Msg.el.dom.parentNode is null if I stop execution just before the error.
This error does not happen if:
The real app is running, only during tests.
If I run a single test, only if I run multiple tests that end up calling Ext.Msg.alert
Stack trace
Ext.define.insertBefore (ext-all-debug.js:13281)
Ext.define.show (ext-all-debug.js:42064)
Ext.define.sync (ext-all-debug.js:82755)
Ext.define.syncShadow (ext-all-debug.js:33992)
Ext.define.onAfterFloatLayout (ext-all-debug.js:34002)
Ext.define.afterComponentLayout (ext-all-debug.js:34374)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.define.afterComponentLayout (ext-all-debug.js:38639)
Ext.define.notifyOwner (ext-all-debug.js:38067)
Ext.define.callLayout (ext-all-debug.js:125114)
Ext.define.flushLayouts (ext-all-debug.js:125283)
Ext.define.runComplete (ext-all-debug.js:125769)
callOverrideParent (ext-all-debug.js:36)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.override.runComplete (ext-all-debug.js:29905)
Ext.define.run (ext-all-debug.js:125750)
Ext.define.statics.flushLayouts (ext-all-debug.js:29913)
Ext.define.statics.updateLayout (ext-all-debug.js:29947)
Ext.define.updateLayout (ext-all-debug.js:31844)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.setTitle (ext-all-debug.js:53058)
Ext.define.setTitle (ext-all-debug.js:55155)
Ext.define.reconfigure (ext-all-debug.js:90310)
Ext.define.show (ext-all-debug.js:90476)
Ext.define.alert (ext-all-debug.js:90600)
Ext.define.onInstanceRetrievalError (BaseWorkflowActionController.js:139)
(anonymous function) (ext-all-debug.js:2265)
Ext.apply.callback (ext-all-debug.js:7437)
Ext.define.Ext.apply.inheritableStatics.load (mock.js:38)
Ext.define.onDocumentClick (BaseWorkflowActionController.js:73)
(anonymous function) (VM6566:6)
Ext.apply.createListenerWrap.wrap (ext-all-debug.js:10786)
AsyncTestCase.test_unknown_error_displays_error_dialog (WorkflowSingleActionController.Test.js:87)
Any ideas of what could be going on? Or something to try?
This question was cross-posted to http://www.sencha.com/forum/showthread.php?288372-Error-calling-Ext.Msg.alert-from-js-test-driver-tests&p=1053744#post1053744
The problem is that js-test-driver runs the following code which removes any content from the DOM at the end of each test.
var testRunnerPlugin =
new jstestdriver.plugins.TestRunnerPlugin(Date, function() {
jstestdriver.log(jstestdriver.jQuery('body')[0].innerHTML);
jstestdriver.jQuery('body').children().remove();
jstestdriver.jQuery(document).unbind();
jstestdriver.jQuery(document).die();
}, runTestLoop);
Therefore, the global Ext.Msg which was rendered onto the body becomes orphaned and it fails when trying to sync the shadow.
The solution is not to use the global Ext.Msg, always instantiate a new Ext.message.MessageBox if you want your code to be testable in js-test-driver
Here's a test case that reproduces the exact same stack trace https://fiddle.sencha.com/#fiddle/7i1

Categories

Resources