SVG cause a row of errors thrown in Chrome console - javascript

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

Related

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't redefine non-configurable property "userAgent"
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.

javascript Cannot read property 'children' of null whilte

I have this snippet code at codepen and it's working perfectl, but
When trying copy it to my site it's show this error :
(index):257 Uncaught TypeError: Cannot read property 'children' of null
at (index):257
(anonymous) # (index):257
which means this line in my site :
var count = items.children.length;
I just copy compiled html, css and js same it's without any edit, May I know why this happen ?
You probably have the Javascript code in your <head></head> tag.
There the DOM is — not — ready yet.
Try copying your <script>code</script> right before the </body> tag.

python webdriver run execute_script error:Cannot read property 'style' of undefined

I am using selenium-python bindings to do some basic browser testing. I need to click an element, which is invisible by default.So I want make the invisible element visible,I have tried to use execute_script()monthod to make it visible by using the following code.However the JS code document.getElementsByClassName("bdpfmenu")[0].style.display="block"; run successfully within Console,but it occurs error massages when I use execute_script()with python
js = 'document.getElementsByClassName("bdpfmenu")[0].style.display="block";'
driver.execute_script(js)
and the error message:
selenium.common.exceptions.WebDriverException: Message: unknown error: Cannot read property 'style' of undefined
You can get the style attribute and compare.
document.getElementsByClassName("bdpfmenu")[0].getAttribute("style")

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

Stack traces that utilise source mapping

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/.

Categories

Resources