External Source Map Tool - javascript

I have a minimized file in production, with a an error handler that logs the errors, as well as the source map that was generated when I minified the file, however I have no way to map the errors to my source file since the errors are in a log and do not occur in a chrome or firefox where minified files and sourcemaps are easily consumed. Is there an app or a tool that will convert the error reporting from the minified file using the source map I have generated to the location in the original unminified files? So to be completely clear I have
dist.min.js
which is made up of several js files concated and then minified with uglify.js. I have
dist.min.js.map
which is the mapfile generated when the uglify minified the file. What I need to do is take the error
ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1
"TypeError: Cannot call method 'indexOf' of undefined
at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564)
at q.handle (dist.min.js:3:22314)"
and figure out where that error is actually happening in my original source code. I know how to use sourcemaps with Chrome, but is there an external tool that will allow me to manually enter the line and column and bring up the location in my source code?

You can use mozilla's source-map library to reverse-map to the original positions, as follows:
var smc = new SourceMapConsumer(rawSourceMap); // <-- put map in there
console.log(smc.originalPositionFor({ // <-- plug positions here
line: 2,
column: 28
}));
Output is similar to:
{
source: 'http://example.com/www/js/two.js',
line: 2,
column: 10,
name: 'n'
}
The example is straight from Mozilla's documentation. The same library is used to generate the source-maps in uglifyjs (links to the Mozilla project when mentioning source-map generation).

Since there wasn't a GUI tool already built for this, I quickly built one based on Electron and the Mozilla Source-Map library that #tucuxi pointed out.
You can find it at its GitHub page: https://github.com/kriserickson/sourcemap-translator.

Uglify.js has a thing named source map for such functionality. Please use following flag with command:
--source-map yoursource.min.js.map
Whole command looks like:
uglifyjs yoursource.js -o yoursource.min.js --sourcemap yoursource.min.js.map
More info:
http://tarantsov.com/WorkflowThu/source-maps-with-coffeescript-and-uglify-js/

Related

Tesseract OCR is unable to find custom .traineddata file

I'm trying to use the "node-tesseract-ocr" module with electron to perform some basic image-to-text translations, but I'm having issues that I cannot seem to figure out, for the life of me. I'm using the exact same code as provided in the example (seen here: https://www.npmjs.com/package/node-tesseract-ocr), except I've changed the "lang" parameter for the configuration to the name of my custom .traineddata file. I've installed Tesseract manually alongside this, and have set the PATH variables for Tesseract ("C:\Program Files\Tesseract-OCR" and "C:\Program Files\Tesseract-OCR\tessdata"), and have placed the .traineddata file inside of the \tessdata folder.
Here's the error:
Command failed: tesseract "./screen.png" stdout -l mc --oem 1 --psm 3
Error opening data file C:\Program Files\Tesseract-OCR/tessdata/mc.traineddata
Please make sure the TESSDATA_PREFIX environment variable is set to your "tessdata" directory.
Failed loading language 'mc'
Tesseract couldn't load any languages!
Could not initialize tesseract.
I have no idea why the slashes swap midway through the path to the .traineddata file; I'm assuming this is the issue, but I have no idea how to fix this, as it seems to be an issue with Tesseract itself.
Did I install an incorrect version or something? (I installed Tesseract using "tesseract-ocr-w64-setup-v5.2.0.20220712.exe" from "https://digi.bib.uni-mannheim.de/tesseract/", as suggested by "https://medium.com/quantrium-tech/installing-and-using-tesseract-4-on-windows-10-4f7930313f82").
Everything works perfectly fine when using "eng" as the language, except the characters are not always read properly (since I'm attempting to read characters from a game, rather than handwriting/a standard English font, which is why I need the custom .traineddata file to work).
Any help is appreciated.
I used the installation from https://github.com/UB-Mannheim/tesseract/wiki and it seems to work now. Not sure why the other installation was bugged, but oh well.

Module source is undefined following Webpack 5 Loader Guide

I'm trying to follow the guide to Writing a Loader using Webpack 5.2.0. At the bottom of the page we are guided through a simple Jest test sample. The Jest test checks that the first module object source property is the source that our loader generated. I can verify that my Webpack compiler step generated a module with a name property of ./example.txt. But the source property is always 'undefined'. This is despite stats.hasErrors() returning false.
I'm new to Webpack loader development and I'm not sure what I'm missing. The module structure description indicates this property should contain my module source if it was successful.
Have others successfully completed this scenario with a recent verison of Webpack?
After some time of googling i found that for webpack#5 you need to pass additional options to have source field in output.
stats.toJson({
source: true
});
Just to add some context to this answer, in order to make the Webpack5 Writing a Loader, Testing Section work (as it was 10/31/2020), adjust the following. With Lesha's suggestion above, the output line in test/loader.test.js should read
const output = stats.toJson({source: true}).modules[0].source;
That solves the missing source attribute problem. The Jest test will still fail unless you created the example.txt without a newline on the end. Either ensure there is no line ending or change your expect clause to the following:
expect(output).toBe('export default "Hey Alice!\\n"');

No kotlin.js file output by kotlinc-js

Currently trying to get a Kotlin "Hello, World" to compile to JS via the command line. I've followed the tutorial:
https://kotlinlang.org/docs/tutorials/javascript/getting-started-command-line/command-line-library-js.html
I'm seeing the Javascript files being generated, but I'm missing the kotlin.js file that I would expect to see per:
https://kotlinlang.org/docs/tutorials/javascript/kotlin-to-javascript/kotlin-to-javascript.html
The first few lines of the generated JS files read:
if (typeof kotlin === 'undefined') {
throw new Error("Error loading module 'sample-library'. Its dependency
'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to
'sample-library'.");
}
so it's clear that the it's meant to be run with a file that instantiates kotlin. Any ideas why I'm not seeing it? I'm following the tutorial exactly as written. I'm using the latest version of the compiler from homebrew, which is 1.1.2.2
As described here, yes, you'll need to include kotlin.js before you can run your own Kotlin code. This file contains the Kotlin runtime and standard library.
If you're doing this from the command line, you can find kotlin.js in the lib folder of the compiler, inside kotlin-stdlib-js.jar (which you can just open as a regular .zip file).

How to exclusively compile a custom source for OpenLayers 3

I have created a new Source for OpenLayers 3 that works similarly to ol.source.ImageWMS but with a modified request structure since the remote source is not a WMS.
The new source work as expected when used together with ol-debug.js or if compiled together with the OpenLayers library as a custom build.
But what I want is so exclusively compile my extension and then include it in my project as an extension to OpenLayers.
For example
<script src="ol.js"></script>
<script src="imageSpecialSource.js"></script>
I have tried to exclude the some of the library symbol names / patterns under the export section in the json config file. But including the compiled js file will make OpenLayers to throw an error.
Uncaught TypeError: a.cf is not a function
So, is it possible to compile a custom extension exclusively that can then be included as a separate file?
First of all, know that there's a more up-to-date tutorial that explains how to compile OpenLayers 3 along with your own library. See here: http://openlayers.org/en/v3.14.1/doc/tutorials/closure.html
The compilation process requires a config.json file. Here's a snippet of the config file from the above tutorial:
{
"lib": [
"node_modules/openlayers/src/**/*.js",
"node_modules/openlayers/build/ol.ext/**/*.js",
"src/**/*.js"
],
"compile": {
"closure_entry_point": "app",
"externs": [
"node_modules/openlayers/externs/bingmaps.js",
"node_modules/openlayers/externs/closure-compiler.js",
"node_modules/openlayers/externs/geojson.js",
"node_modules/openlayers/externs/proj4js.js",
"node_modules/openlayers/externs/tilejson.js",
"node_modules/openlayers/externs/topojson.js"
],
...
See that in it, what's inside lib gets compiled together, that's OpenLayers and your own custom code.
Then, look at the externs section. These defined externs files that allow the code to be used within ol3 without the Closure Compiler complaining about classes and methods it would otherwise not know about.
In order to compile your code without ol3, you could remove it from the lib section and add the ol3 extern file in externs instead. In ol3, that file is located in build/ol-externs.js. If it's not there, you can generate it by running:
node tasks/generate-externs.js build/ol-externs.js
You can take a look at the OL3-Google-Maps library that does exactly that. Its dist/ol3gm.js file doesn't contain OpenLayers: https://github.com/mapgears/ol3-google-maps/
Look at the json config file, which is named ol3gm.json:
https://github.com/mapgears/ol3-google-maps/blob/master/build/ol3gm.json. You'll see that the ol-externs.js file is used in there.

How can I take a minified javascript stack trace and run it against a source map to get the proper error?

On our production server, I have minified javascript published and I'm not including a map file with it, because I don't want the user to be able to understand what's happening based on the error.
I have a logging service I've written to forward the angular exceptions (caught by $exceptionHandler) to myself via email. However, this stack trace is near unreadable:
n is not defined
at o (http://localhost:9000/build/app.min.js:1:3284)
at new NameController (http://localhost:9000/build/app.min.js:1:3412)
at e (http://localhost:9000/build/bower.min.js:44:193)
at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310)
at b.$get (http://localhost:9000/build/bower.min.js:85:313)
at d.compile (http://localhost:9000/build/bower.min.js:321:23333)
at aa (http://localhost:9000/build/bower.min.js:78:90)
at K (http://localhost:9000/build/bower.min.js:67:39)
at g (http://localhost:9000/build/bower.min.js:59:410)
at http://localhost:9000/build/bower.min.js:58:480 <ui-view class="ng-scope">
What I'm wondering is: Is there a program where I can analyze this stack trace against the actual non-minified source code via map file (or not via map file if there's another way)
What you want to do is parse the source maps. This has nothing to do with web browsers. All you need to do is translate the minified reference into the unminified resource.
If you have any experience with NodeJS there is already a package that does this for you.
https://github.com/mozilla/source-map/
To install the library
npm install -g source-map
or
yarn global add source-map
Create a file named "issue.js"
fs = require('fs');
var sourceMap = require('source-map');
var smc = new sourceMap.SourceMapConsumer(fs.readFileSync("./app.min.js.map","utf8"));
console.log(smc.originalPositionFor({line: 1, column: 3284}));
Run the file with node
node issue.js
It should output the location in the original file to the console for first line from the stack trace.
Note: I tell you install source-map globally for ease of use, but you could create a node project that does what you need and installs it locally.
I figured there was no super simple tool for converting a minified stack trace into a readable one using a source map (without having to use a web service), so I created a tool for it:
https://github.com/mifi/stacktracify
Install and use it as follows:
npm install -g stacktracify
Now copy a minified stacktrace to your clipboard - then run:
stacktracify /path/to/js.map
Adding to #Reactgular's answer, the below snippet will work with the latest version of source-map
const rawSourceMap = fs.readFileSync("./app.min.js.map","utf8");
const whatever = sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
console.log(consumer.originalPositionFor({
line: 1,
column: 3284
}));
});
And to add to the discussion on the thread a simple regex like /\/(\w*[-\.]?\w*).js:\d*:\d*/g
Below is a very simple regex to find all line numbers in a stacktrace.
//regex for patterns like utils.js, utils123.js, utils-name.js, utils.version.js
var patt = /\/(\w*[-\.]?\w*).js:\d*:\d*/g;
// returns matches like ['/app.min.js:1:3284', '/bower.min.js:44:193', ..]
var errorPositions = line.match(patt);
console.log(errorPositions);
if(!errorPositions || errorPositions.length === 0) {
console.log("No error line numbers detected in the file. Ensure your stack trace file is proper");
return;
}
errorPositions.forEach(function(error) {
findInSourceMap(error);
});
});
If you had access to the source map file externally and could get the same file structure you could work it out I guess, but I'm not aware of any tools outside the browser that will help you with that.
The added advantage of having the data in a running browser will allow checking of locals which you won't get even with a source map.
You might want to consider a tool such as rollbar to do error reporting. This will report all the locals in each frame to help debugging. It has support for sourcemaps outside the browser to address your security concerns.
Append comment directive for the JS running in the page.
//# sourceMappingURL=/path/to/your/sourcemap.map
In firefox (not sure about chrome) to tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:

Categories