What is the best parctice for debugging production javascript? - javascript

I have a Javascript SPA app, based on React, that it is about to go live.
In the app itself I log all Javascript exceptions and save them on the server for further debugging.
As my app will be minified I was wondering how I am to debug the stack traces I will get when a bug is hit.
I came across stacktracejs which looks promising, but the documentation looks a bit thin. So I was wondering if there is something better out there.
Just to clarify, coming from C world myself, I am essentially asking what is the equivalent to "GDB", where I can load the core a binary on it and start debugging.

You could use a library like source-map (If you can run nodejs on your server).
There you would load your source-map for the given file:
var smc = new SourceMapConsumer(rawSourceMap);
Then you would need to parse your stack trace extracting all line and column numbers. Those information you then can use to retrieve the original position.
console.log(smc.originalPositionFor({
line: 1,
column: 2
}));

Related

NodeJS Javascript piece code running on Windows but not on Linux

I am particularly new to NodeJS and Javascript and have created a small web Application. I have my code running on Windows machine seamlessly. However, When I tried running it on a Linux VM it blocked at a point with no error or Exceptions thrown.
I discovered there was a line which actually caused a blockage in Linux, commented it out and the code continued from there on limiting the Application's functionality which greatly depends on that line with the other independent parts being functional.
....
var localEntry = entry.split('\\')
if(!localEntry)
localEntry = entry.split('/')
localEntry = localEntry[localEntry.length -1]
this.scripts[extn][localEntry].day1Vars = searchedVars[entry].day1Vars
}
I was extremely puzzled to find the exact same code running seamlessly on a Windows machine and blocking on a Linux vm due to a single line of code and am wondering how that could be ? The line which is responsible for such behavior is :
this.scripts[extn][localEntry].day1Vars = searchedVars[entry].day1Vars
My expectation is code on Node.js is platform independent and the thought of a line of code causing such difference is revolting.
I am using Windows 10 and RHEL 6.9 with 8GB of ram in both.
Could someone guide me if I am missing something or what has gone wrong?
Any help is greatly appreciated.
As requested by folks here, Sample values(on Windows) :
entry : "d:\NodeProjects\BApp\uploads\bp\bp\scripts\nodejs\set-nodejs-root.sh"
localEntry : "set-nodejs-root.sh"
Its better to check what is the environment.
For example you should split in:
ubuntu .split("/")
windows .split("\\")
Looks like you are working with paths, the best recommendation here is to use the path module to handle those routes for you:
https://nodejs.org/api/path.html
Here is a good explanation on how to handle routes for both systems:
https://nodejs.org/api/path.html#path_windows_vs_posix
I would use something like
https://nodejs.org/api/path.html#path_path_parse_path
To parse the paths correctly or if you need to construct paths you can use:
https://nodejs.org/api/path.html#path_path_join_paths
Check all different options there, I am 99% sure that you will find the proper method for your use case
When you specify a path under windows you have to use "\"
Linux uses "/" for path

Debugging Angular front-ends

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.

Web Workers for Parsing Raw Input in Chrome Packaged Calculator App

I am currently working on a calculator that will run as a packaged (desktop) chrome app. I am using the math.js library to parse math input. This is my old code:
evaluate.js:
var parser = math.parser();
function evaluate(input){
$("#output").text(parser.eval(input));
}
However, if the input is something unreasonable like 6234523412368492857483928!, the app just freezes, because it is trying to evaluate the input. I know that math.js is still in beta so eventually there might be a fix (overflow errors), but I couldn't find any other library that parses raw input the way math.js does.
To fix this, I am trying to fix this using web workers to run it asynchronously. Here is the code that I have right now:
main.js
var evaluator = new Worker('evaluate.js');
evaluator.addEventListener('message', function(e){
$("#output").text(e.data);
}, false);
function evaluate(input){
evaluator.postMessage(input);
}
evaluate.js
var parser = math.parser();
function mathEval(input){
return parser.eval(input);
}
self.addEventListener('message', function(e){
self.postMessage(mathEval(e.data));
});
However, this doesn't work when I run it. Also, I noticed that when I use web workers, it throws the error Uncaught ReferenceError: math is not defined - evaluate.js:1, but it didn't throw this error with the old code.
Questions: Why doesn't this code work to evaluate the input? Is it possible to use multiple workers to speed it up? If I wanted to implement some sort of overflow error for when the worker takes more than 2 seconds, what would be the best way to go about doing it? Finally, is there a better way to do this?
Web Workers are run in totally separate context. They don't have access to the objects from parent web page. If you want to use math.js you have to import it into the worker using importScript.
I recommend to read Using Web Workers guide, part "Importing Scripts And Libraries" which describes how to do it, and how it works in detail.

libphonenumber standalone (without masses of google dependencies)? Alternate lib?

I am looking at using http://code.google.com/p/libphonenumber/ for a well-established project. Today the project does not use Google's libraries for JavaScript, favoring jQuery, jQueryUI, requirejs, and so on.
libphonenumber looks awesome ... except that the javascript version (svn co http://libphonenumber.googlecode.com/svn/trunk/javascript/ libphonenumber-js) is laced with goog.require calls. If one runs the demo (libphonenumber-js/i18n/phonenumbers/demo.html if you checked out as suggested) it pulls in tons of google libraries from closure-library.googlecode.com :
GET base.js
GET deps.js
GET error.js
GET string.js
GET asserts.js
GET array.js
GET useragent.js
GET browserfeature.js
GET tagname.js
GET classes.js
GET math.js
GET coordinate.js
GET size.js
GET object.js
GET dom.js
GET json.js
GET util.js
GET descriptor.js
GET fielddescriptor.js
GET message.js
GET serializer.js
GET objectserializer.js
GET stringbuffer.js
GET lazydeserializer.js
GET pbliteserializer.js
I believe if I compile this using the closure compiler ("If you give the use_closure_library parameter a value of true, the compiler looks for goog.require() statements in the source code and supplies the Closure Library code requested by any such statements.", https://developers.google.com/closure/compiler/docs/api-ref) I can cut down the raw number of requests, but this still seems like a rather excessive amount of content for a phone number parser, even a full-featured one.
My question has two possible answers:
A way to use libphonenumber in JavaScript without having to pull in all the Google JavaScript base libraries
An alternate standalone (as in doesn't have dozens of dependencies) first-class phone number processing library with both JavaScript and Java implementations
Any and all suggestions most appreciated.
I've got a custom build (currently 220KB) that I use for my International Telephone Input plugin, with plenty of helper functions exposed. Read the source for details.
You can also use my lib.
https://github.com/Gilshallem/phoneparser
Its only got one method but you can do a lot with it
parsePhone("12025550104");
result: { countryCode:1, areaCode:202, number:5550104, countryISOCode:"US" }
Here are two implementations of Google libphonenumber in JavaScript that have zero dependencies and are implemented in a single file. I've used Nathan Hammond's version without issue but it is not on NPM. Rui Marinho's version is on NPM.
https://github.com/nathanhammond/libphonenumber
https://github.com/ruimarinho/google-libphonenumber
I just spent 2 days figuring this out. For now, anyway, you can download a minified version of libphonenumber-js from here
drop it in place, with the usual
<script type="text/javascript" language="javascript" src="/static/js/libphonenumber-js.min.js"></script>
and get busy coding!
<script>
$(".phone-format").keyup(function () {
var val_old = $(this).val();
var newString = new libphonenumber.AsYouType('US').input(val_old);
$(this).focus().val('').val(newString);
});
</script>

How would I solve a coding puzzle with Javascript?

There is a website called Gild.com that has different coding puzzles/challenges for users to do. They can be completed in wide array of languages including Javascript. I am interested in solving these puzzles in Javascript, but I am unsure of the following:
How am I supposed to access the input file which is supposed to be passed as an argument?
How am I supposed to output the result?
My understanding of Javascript is that it is run from within an HTML page and that output really is only in the form of placing values in the HTML, modifying the DOM, etc. For that reason it is not clear to me how Javascript can be used for solving these types of problems. Can someone who has used Gild before or has some insights into my question suggest how to proceed?
An example of a problem would be: the given input file contains a positive integer, find the sum of all prime numbers smaller than that integer and output it.
EDIT: Some of the solutions below involve using external resources, but on Gild, I am supposed to put my solution in their editor and then submit it that way, like the following picture shows:
In other words, I don't think my solution can have access to Node.js or other external resources.
Edit: Here are some interesting articles that I have found that I think are the answer to my question:
http://www.phpied.com/installing-rhino-on-mac/
http://www.phpied.com/javascript-shell-scripting/
I haven't spent much time on Gild, but I do a lot of similar types of problems on Project Euler. I think the best way to go is probably Node.js.
If you're not familiar, Node is basically server-side JavaScript that runs in Google's V8 engine. Installing it on your own Mac/Windows machine takes about 2 minutes. It's also really fast (considering it's JavaScript).
And you'd use it like this:
var fs = require('fs'); // the filesystem module
var contents = fs.readFileSync('theFile.txt', 'utf-8');
// Do stuff with the file contents...
Everything after those first two lines can be done with the same JS you'd write in the browser, right down to calling console.log() to spit out the answer.
So, if you wrote your script in a file on your desktop called getprimes.js, you'd open up your terminal and enter node ~/Desktop/getprimes.js (assuming you're on a Mac)
If you're:
on a Mac,
planning to do a lot of these puzzles, and
willing to pay $10, then
I highly recommend CodeRunner. It encapsulates runtimes for a variety of languages — from C to JavaScript — and lets you quickly build and run any sort of one-off code. Just hack together your code, ⌘R, and the results are printed right there in the same window.
I haven't used any file-based JavaScript in CodeRunner, but I imagine kennis's suggestions would apply. To output your results:
console.log(...)
Easy as pie!

Categories