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.
Related
I have done a microsoft tutorial called Web API with Javascript
I now have a UI made with Javascript and HTML which looks like this:
How do I use the UI? I keep getting a Reference Error. Is there a specific syntax I am supposed to follow when I add and edit something via APIs?
In the future, please copy and paste error messages into your question. I would normally copy and paste the error message in my answer, but I don't want to type it all out :)
The errors (red) mean that you're trying to use JavaScript that is not defined yet. The warnings (yellow) are the reason why.
The second warning says that it could not load the JavaScript. That explains the errors. The first warning might be the reason why. It's saying that the MIME type is empty, when it should be application/javascript.
But you said in the comments that the site.js file is empty when you try to access it directly. Did you save all the JavaScript in step 4 of that tutorial to site.js?
And what are you using as a web server? IIS Express?
Rails will not let me run JS code, I have these errors
1)
2)
whenever you add JS code, the errors appear.
Some idea why this happening?
Just because you're getting error highlights in your IDE, doesn't necessarily mean your code is wrong. Try running your server, navigate to your site from your browser, and check the developer console. Do you still see javascript errors?
This warning (it is not an error) is being displayed because your IDE thinks that the variable $ is not defined in your code. However, it is not able to find out that $ is a global variable defined in the jQuery library, imported a few lines before.
The IDE is just saying that the presence of that variable is not guaranteed unless you properly import the needed libraries to make it exist (jQuery in this case). Your code should work properly. In order to identify errors in your javascript code, I would recommend you to use the built in console in the web browser.
We are working on a relatively simple Angular front-end (version 1.4x), and we're constantly battling very small bugs caused by typos. For example, we get data from the server and then put it in the scope:
...
$scope.result = data.results
...
See the plural there? This code just works, putting undefined in $scope.result. We would like to get some sort of warning of notification when this happens. Static analysis tools such as JSLint can't help us there, because they have absolutely no way of knowing what the server returns.
This problem manifests itself again in HTML templates:
...
<p>The result is: <emph>{{results}}</emph></p>
...
Here, too, we get no notification whatsoever we tried accessing an undefined property.
Is there a way to get any kind of notification for this? We find ourselves spending a lot of time on these bugs.
WebStorm will handle these sorts of issue for you. For example in my code {{f.$error}} I placed an extra r on the end and WS flags this a both a misspelling and Unresolved variable $errorr. WebStorm does an execlent job of handling many different frame works to include Angular and Node.
I am trying to write a program in C++ and wxWidgets that accesses YouTube and start the video with JavaScript.
It uses the YouTube JavaScript API, documentation for which is found here.
I wrote the following piece of code to play ‘O, Canada’, specifically the one here.
wxWebView *webview = wxWebView::New(this, wxID_ANY, "http://www.youtube.com/watch?v=zwDvF0NtgdU");
webview->RunScript("function onYouTubePlayerReady(playerId) {document.getElementById('watch-player').playVideo();}");
Running the above code fails to fulfill its intended purpose, giving me the following error and a crash:
....\src\msw\wxwebview_ie.cpp(762): "assert "document" failed in wxWebViewIE::GetDocument().
I know that my code successfully LOADS the page, but running the JavaScript (the RunScript() function) seems to result in the error.
I am using wxWidgets 2.9.3 on Windows.
This should have been fixed in revision 71030 which is more recent than the 2.9.3 build that you are using. You can get the updated code either through SVN or a daily snapshot. If that still doesn't fix it please file a bug on the wxWidgets Trac.
The problem is actually because I call the JavaScript too early, before the page is loaded. If I call it a bit later, it works.
I'm having problems with getting decent JavaScript error invormation in a Production environment.
When I'm developing I can just attach a debugger and (usually) fix the problem.
When I get the same error in a production environment however at best I see is an error report that looks like this:
Error: Object doesn't support this property or method
Url: SomePage
Line: 42
Char: 13
Which doesn't help me very much - I can't see the rendered page and so I have no idea what line 42 looks like.
Is there any way for me to log the entire rendered page contents whenever an error like this occurs? (So line 42 of the output is the line where the error occured)
While I'm at it, are there any other techniques that I can use to help with getting useful error information from JavaScript (without need to break into the debugger) - failing that is there any way that I can structure my JavaScript slightly differently to help getting decent debug information?
I'm predominantly interested in IE - this is the browser that tends to cause me most problems.
I don't think you'll be able to get the exact original HTML source of the page back in all pages and all browsers.
Regarding debugging, you could use a logging library such as log4javascript (disclaimer: I wrote it) and intersperse logging calls in your code. log4javascript enables you to send logging messages back to the server via Ajax.
Unfortunately, IE has by default the most utterly useless error reporting. The script and line number reported in the error are essentially guaranteed to be absolutely wrong. You can, however, install the IE developer tool bar (for IE7 and older, it's built into IE8) from Microsoft, which can help track down the error source.