How can I get line numbers from require.js errors? - javascript

This has been bothering me for a while but I haven't been able to find a solution. When I have an error in one of my scripts, such as a syntax error, Chrome's console does not give me a very useful error message.
For example, in a simple script called example.js I am calling a function called whatever() which does not exist:
define(function(require){
'use strict';
whatever();
});
My console error in Chrome states:
ReferenceError: whatever is not defined(…) require.js:901
I expect the ReferenceError but line 901 of require.js is just some code responsible for throwing errors. Furthermore, the stack trace doesn't show anything useful; it also only references lines in require.js. I noticed that Firefox's inspector does show the actual location of the problem in the stack trace, which is helpful but I prefer to develop in Chrome.
Is there a way to make console errors point to the line number and file where the problem actually is? I would rather see:
ReferenceError: whatever is not defined(…) example.js:4
I've seen this question and others like it that sound similar but I haven't found any that apply to this exact situation, or code that works with requirejs to fix this issue. Maybe I can modify requirejs.onError somehow?

Did you try to append
//# sourceURL=example.js
at the end of your evaluated script? Debuggers will understand that code as originating from example.js file rather then from the script it was evaluated in.
You sure that Require.JS does not support it out of the box? I posted on GitHub my own "Javascript DNA" asynchronous loader/dependency resolver that does it automatically and it was very easy so I guess require.js will have something similar already...

Related

Stack traces getting swallowed when developing VS Code Extensions

When my extension encounters an error, I'll often get a notification in the host environment saying that it encountered an error, but nothing gets printed to the debug console in the workspace of my extension. If I know the bug must be occurring in a given function, I can wrap all that function's code in a try-catch and then simply console.log the error in the catch statement. But that's a frustrating way to debug.
I'm pretty certain this is resulting from uncaught errors in promises, but I don't want to have to manually try catching ever one.
Any ideas on how to make sure I always get a stack trace?

Debugging JavaScript in client

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.

Error in Rails with JS code

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.

Debugging Ember JS -- Identifying line in code that causes an error

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.

Attempting to debug JavaScript and jQuery - where to go with this...?

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 :)

Categories