Our company site has a JavaScript problem that I'm desperately trying to solve, but really struggling with. My JS skills are good enough to build a site with things like jQuery, but I am not that proficient in debugging - so really appreciate any help.
Seemingly randomly, all JS components (e.g. a jQuery Datepicker) on the page stop working. When force-reloading the page with the error console open, these errors happen about 60% of the time - there doesn't seem to be any pattern to it. The only way to fix the site once this happens is by clearing the cache and reloading.
The Console outputs the following:
Uncaught TypeError: Object #<Object> has no method 'each'
Uncaught TypeError: Object #<Object> has no method 'not'
Uncaught TypeError: Object #<Object> has no method 'each'
However: that's just one example. Other times I will get completely different errors. E.g. a few minutes after submitting this question, I tried again, and got this:
Uncaught TypeError: Cannot call method 'apply' of undefined
Which again was thrown from jquery.min.js - pretty-printed, line 1453 (third line down):
if (g.call(k) === "[object Array]")
if (!u)
e.push.apply(e, k);
I set Chrome to break on all unhandled exceptions, and this was another exception it caught - on line 3 of the minified jQuery library. Shown below is the pretty-printed version:
try {
b.call(c.documentElement, "[test!='']:sizzle")
} catch (f) {
e = !0
}
The actual erroring line begins b.call[...]. This works out to line 1904 of jquery.min.js.
I am using the latest jQuery
This only started happening recently - after changing nothing!
The errors happen seemingly randomly
Usually (but sometimes), no errors are thrown from my scripts - e.g. script.js - usually they are thrown from a minified library. It varies each time.
This seems to happen in all browsers, but more often in Chrome than Firefox
Any ideas where to begin? Unfortunately this is an internal corporate website so providing access is tricky, as we deal with sensitive data throughout the site.
Thank you for your help!
Seems to me that your page is quite big and the browser tries to execute the js code before the DOM loads completely... probably because you're using in-line javascript code..
That could explain the random errors and the fact that you have errors when you force the reload.
I'd suggest you to put your JS code inside a dom ready event so the js code could be executed without problems..
Hope this helps :)
Related
I'm facing an issue while debugging my application. Following is the architecture:
Server: Java (Servlet)
Client: React+D3
Problem: Whenever, I change some react or d3 code and if an error occurs then it just shows me that some react (or d3) error has occurred but never tells me which function the error occurred (as seen in snapshot). Now, I know that simply debugging it by having the information like variable name and searching where I defined that variable. However, situation becomes tough when I use same object multiple times (say window) and had made several changes in the code. In this case, a specific line number where the error occured can be handy and quick. Let me know if I'm missing some basics about debugging such applications?
EDIT1:
1. In the snapshot, http://localhost:8080/..../Server Server is the main servlet application, kind of launchpad, which triggers several other react-based js files.
2. The mentioned ReferenceError is inside a function updateWindow() but the console never mentions this (and that's my problem).
PS: I'm using Eclipse tomcat on server-side
I think there's no straight forward solution to this problem. So, I'll post the method that worked for me with few additional points:
Problem: It doesn't gives a nice error trace like standard Java application, probably because it mixes with JavaScript code.
At every line of the error trace, line:column specifies the error line. I used this as a reference and started manual debugging from where my application launches i.e. Server.java and look where I defined the createChart() in the JS file and drill-down until I found the referenced variable.
In case of ReactJS' error (an error after resolving reference issue), I debugged it with normal react.js (not minified version react.min.js) so that it shows me exact line of error. Minified version is cluttered and is useless while debugging.
PS: If someone has better answer I'll edit this in future.
I am new to GWT and trying to create a small application. I am currently assembling a small framework for the app, a generic layout handler, etc. This may not be the last problem I will bump into, but I just cannot find any solution to this on google.
So I have a class type, which return me Composites. Also, I have another one, which stores these kind of classes in Stack (I also tried Vector, I thought maybe GWT has issues with it). It didn't matter. If I call the .clear method on the Stack, I have the aforementioned error in the inspection menu of Chrome:
Uncaught TypeError: Cannot read property 'clear_31_g$' of undefined
Like if GWT does not know, how to convert this method to javascript or what? Do you know what is the problem here?
eclipse neon, Java 7 setting on Java SDK 1.8 (maybe this?), GWT 2.7.0 and App Engine 1.9.34
Thanks!
edit1: I also found the page, which contains the emulated JRE classes' list (http://www.gwtproject.org/doc/latest/RefJreEmulation.html) with all supported methods. Now I see, that clear is not on that list for Stack, but empty does and that gives me the same error. :-/
This error simply means that you try to call the clear() method on a null object (the object is undefined).
The error message itself is not as clear as it could be. First, it's not always about reading a property but also about calling a method. Second, remember that you run a compiled to javascript code and the property (or method) name may differ from the original one - it has something like _31_g$ added in the runtime.
So I'm getting the following error:
Uncaught Error: Assertion Failed: The key provided to get must be a string, you passed undefined
Should be easy enough to fix, if there was any indication of the line in my code that causes that error.
Using the chrome console, I click on ember.debug.js:6254 next to the error, which just shows me the ember code that throws the error. I can expand the error, but I just get a bunch of functions that can't be clicked on and no indication where they come from.
Can someone please help me figure out how to identify the line in my Ember code that is causing the error.
I've gotten this error before. It happens when you call get() in any of its forms (Ember.get() or this.get() or get(this)) without a string as the name of the property you want to retrieve.
You should be able to find the source of the error by auditing your application for wherever you call get() and making sure you pass the property name as a string. E.g., Ember.get('model.someProp') or this.get('someProp') or get(this, 'someProp').
This should be a comment but I can't, so here goes:
Iam new to Ember and have been spending quite a long time debugging. Remember that long stack of function calls that chrome's console shows.
Look for anything other than ember.debug.js...especially those marked (anonymous function) and files with names vendor.js or app-name.js
Usually in software development when debugging your best friends are going to be console.log() or alert() (in the case of JavaScript). Usually you have to figure out if your getting what ever is that you passing to your function by consolelog everything until you find your bug. Ember sometimes will not tell you what is exactly the error because does not know where exactly is coming from.
...computers are annoying but we love them....
here are some articles from Mozilla developer and Google on how to debug JavaScript.
I had a NULL value in my database which I wasn't accounting for in my app. In my case, it shouldn't have been NULL in the first place, so after giving the record a value in my database the problem disappeared.
I agree the error message is not very helpful.
I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.
On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.
The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.
I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.
My question is this:
How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
Is there something I am missing here or that I am not considering?
Thank you.
Edit:
As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.
This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.
A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.
Sorry for the confusion.
Edit - Solution Found
It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.
Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.
You're loading the slider after you instantiate it.
Reverse the order of these two blocks:
<script type="text/javascript">
$(function() {
jQuery('#two').ContentSlider({
width : '440px',
height : '240px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>
Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.
It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.
EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that:
1) The second framework is probably not the one you want, or
2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).
I tried to implement pathJS into my project, which is already using zurb.Foundation in combination with jQuery.
My JS is quite clean so far, so there shouldn't be any problems at all.
I just created a fiddle to ease up testing http://jsfiddle.net/Vyuz5/
The Chrome Dev Tools point out this error: Uncaught TypeError: Cannot call method 'apply' of undefined
When I load the file via localhost, I just get the alert 'map' (immediately, without clicking anything).
As the documentation is quite minimal, I don't have any idea where I have these problems..
Alright.. fixed it.
I just had to remove the handler after the call:
Path.map("#/link1").to(function(){
doNothing("it did it!");
$('#loading').html('bazinga');
}).enter(doNothing('map_link1'));
to
Path.map("#/link1").to(function(){
doNothing("it did it!");
$('#loading').html('bazinga');
});
That's it.. whyever :)
Revision 1