Git Product home page Git Product logo

stacktrace-gps's People

Contributors

amjith avatar andersk avatar arcanis avatar auchenberg avatar dependabot[bot] avatar eriwen avatar goldibex avatar kevinmusker avatar mattzeunert avatar niftylettuce avatar oliversalzburg avatar papandreou avatar pgaubatz avatar ramondantas-cp avatar scamden avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stacktrace-gps's Issues

Bug in stacktrace-gps: Method Name Matching Fails in TypeScript with Typed Return Values

In TypeScript, when using stacktrace-gps, the _findFunctionName method's regular expression fails to match method names if a return type is specified.

Expected Behavior

The method name should be correctly identified in the stack trace, regardless of the presence of a typed return value in TypeScript.

Current Behavior

method name is not correctly identified in the stack trace, , maybe I can get the name of the last method without the return type when lineNum less 20.

Steps to Reproduce (for bugs)

  1. Define a TypeScript method with a specific return type, e.g., methodName(): ReturnType
  2. Generate a stack trace using stacktrace-gps
  3. Observe that the method name is not correctly identified in the stack trace

Context

I can't get the method name anymore, maybe I can get the name of the last method without the return type. My temporary solution is to drop the return type and use Typescript's automatic inference feature. But I would prefer to add a regular expression for this case directly in the _findFunctionName syntaxes

Your Environment

  • Package version: stacktrace-gps@^3.0.4 [email protected]
  • Browser name and version: chrome 120.0.6099.71

Possible Solution

add a regular expression for this case directly in the _findFunctionName syntaxes

Error making cors request while in offline scenario.

I just have a very basic index.html file (demo) and I'm running it locally and I'm getting a cors request. I think we should just do a try catch and return return Promise.reject(e); or Promise.reject(e.message). Thoughts?

image

dist folder not included when installing with bower

Expected Behavior

When doing bower install stacktrace-gps the dist folder should be included, since the bower.json main property points to the js-file in the dist-folder

Current Behavior

when doing bower install stacktrace-gps there is no dist-folder. There is no folder structure, everything is in the root folder

Context

When using wiredep this package's main file is not automatically injected in my index.html. I'm using stacktrace-js that have this package as a dependency, and the other packages it has as dependency is correctly injected but not this one.

Your Environment

  • stacktrace.js version: 2.3.* and 2.4.*
  • Operating System and version (desktop or mobile): windows 10
  • Bower version: 1.7.9

Possible Solution

Set main to not be dist/{file}.js but just ./{file}.js. I'm not sure why dist folder is not included, could be the ignore of **/.* ? If it is, maybe rethink that part so that dist-folder is included.

Source map URL should be resolved relative to resource (bis ;)

Hi,

Previous issue : #10

Something is still missing: the *.map files are correctly resolved to be relative to the minified file, but the *.src files are not resolved relative to their sourcemap files (they are resolved relative to the current directory, and end up 404ing).

Include Source-Maps dependency

Would it be possible to include the source maps dependency in the dist folder. I've had issues building it: mozilla/source-map#179 and it's not even included in their build (I can't just pull it in). This would be a huge help..

Also, I was wondering what all that library supports, it looks like it does everything but at the expense of being 25kb minified (which is pretty big to be sending down over the wire).

"sourceMappingURL not found" when trying to pinpoint a stackframe from js bundled by ASP.NET

Hi,
i have a js bundle minified by ASP.NET Web Optimization and source maps generated by AspNetBundling. Mapped stack trace (after exception thrown) is working fine in Chrome but when i try to pinpoint a stackframe it gives me "sourceMappingURL not found" error.

Code for getting a stack:

var callback = function (stackframes) {
                var gps = new StackTraceGPS();

                _.each(stackframes, function (stackframe) {
                    console.info("Unpinned:");
                    console.log(stackframe);

                    gps.pinpoint(stackframe)
                        .then(function (pinned) {
                            console.log(pinned);
                        })
                        .catch(function (err) {
                            console.error(err);
                        });
                });
            };

            var errback = function (err) {
                console.log(err.message);
            };

            StackTrace.get().then(callback).catch(errback);

Single stackframe looks like this:

t {
fileName: "http://suzi/bundles/suzi?v=hf2njH4HOG6YMOecHaDuOrRx2tvdViVb8O5gT54rOzg1",
lineNumber: 1, 
columnNumber: 211552, 
source: "    at http://suzi/bundles/suzi?v=hf2njH4HOG6YMOecHaDuOrRx2tvdViVb8O5gT54rOzg1:1:211552"}

Bundle is accessible and has proper sourceMappingURL attached:
capture

Also XHR returns with status 200:
capture3

I end up with:
capture2

_findFunctionName regex bug.

Expected Behavior

The "fn_name() {" regex
โ€Œ/\b(?!(?:if|for|switch|while|with|catch)\b)(?:(?:static)\s+)?(\S+)\s*(.?)\s{/
should match code like
"fn_name() { stuff"

Current Behavior

The regex matches this code
if (a) { foo(); } else if (b) { bar(); }
Falsely indicating that foo wraps bar.

Steps to Reproduce (for bugs)

Should be easy to reproduce with a new unit test.

Context

Producing un-minifed stack-traces

Your Environment

  • stacktrace.js version: v2.0.0
  • stacktrace-gps.js version: v3.0

Possible Solution

I'm not familiar with this notation. Suggest removing this regex from the list.

Browserify build now failing in browser

Seems that a dependency (source-map) is breaking this library

Steps to Reproduce (for bugs)

  1. Install stacktrace-gps through npm
  2. Import the file stacktrace-gps inside a javascript es6 file
  3. Run browserify and bundle the needed libraries
  4. Load the bundle in the browser
  5. Console shows an error ReferenceError: identity is not defined pointing to https://github.com/mozilla/source-map/blob/7c4905497b5f0a62fd6a3d3f786ba8eac0db4615/lib/util.js#L258

Your Environment

  • stacktrace.js version: 1.1.1
  • Browser Name and version: Firefox 45.0.2
  • Operating System and version (desktop or mobile): Windows 10 x64
  • Link to your project: private

Exceptions from parsing malformed source maps are not caught by promise

If _parseJson (and internal JSON.parse) throws an error, it will not be passed to reject, so outer getMappedLocation (and StackTrace.fromError from stacktrace-js) will never resolve/reject.

https://github.com/stacktracejs/stacktrace-gps/blob/v3.0.4/stacktrace-gps.js#L240-L251

var sourceMapConsumerPromise = new Promise(function(resolve, reject) {
    return this._get(sourceMappingURL).then(function(sourceMapSource) {
        if (typeof sourceMapSource === 'string') {
            // throws from here vvv
            sourceMapSource = _parseJson(sourceMapSource.replace(/^\)\]\}'/, ''));
        }
        if (typeof sourceMapSource.sourceRoot === 'undefined') {
            sourceMapSource.sourceRoot = defaultSourceRoot;
        }

        resolve(new SourceMap.SourceMapConsumer(sourceMapSource));
    }, reject); //<- not caught in here
}.bind(this));

Expected Behavior

Invalid source map errors can be caught by StackTrace.fromError(...).catch an others.

Current Behavior

Error becomes unhandled rejection and can not be caught.

Steps to Reproduce

Try to getMappedLocation for source map with some invalid JSON content (for example <html).

Context

I'm trying to catch every possible error with addEventListener('error' and addEventListener('unhandledrejection', enhance stack trace and send it to server. Currently, server is configured to respond with index.html for non-exiting paths. If .map file is missing for some reason, stacktrace-js receives some HTML instead of JSON, fails and no error is sent at all.

What is worse, this unhandled rejection is caught by 'unhandledrejection' handler and passed it to StackTrace.fromError again, which results in an infinite loop.

Your Environment

  • stacktrace.js version: 2.0.2
  • Browser Name and version: Chromium 80.0.3987.116
  • Operating System and version: Arch Linux (desktop)
  • Link to your project: it is private

Possible Solution

- return this._get(sourceMappingURL).then(..., reject);
+ return this._get(sourceMappingURL).then(...).catch(reject);

Source map URL should be resolved relative to resource

Hi,

Suppose my location.href is http://localhost/foo/ and I'm loading /bundle.js which references a source map bundle.js.map using just this relative path (e.g. just the filename).

stacktrace-gps currently resolves the sourcemap URL relative to the current page (implicitly, from what I can see) and will therefore try to load http://localhost/foo/bundle.js.map. However, the URL should be resolved relative to the resource, i.e. to http://localhost/bundle.js.map.

define cannot be used indirect

In angular9, I am getting the following error after installing StackTrace-Gps as a separate package to get unminifed location.

Uncaught Error: define cannot be used indirect
at push../node_modules/webpack/buildin/amd-define.js.module.exports (amd-define.js:2)
at Object. (source-map-generator.js:8)
at Object../node_modules/source-map/lib/source-map/source-map-generator.js (source-map-generator.js:399)
at webpack_require (bootstrap:79)
at Object../node_modules/source-map/lib/source-map.js (source-map.js:6)
at webpack_require (bootstrap:79)
at stacktrace-gps.js:7
at Object../node_modules/stacktrace-gps/stacktrace-gps.js (stacktrace-gps.js:13)
at webpack_require (bootstrap:79)
at stacktrace.js:7

code :
var gps = new StackTraceGPS();
// Pinpoint actual function name and source-mapped location
gps.findFunctionName(stackframes[0]).then((gpsStackFrame) => {
console.log(gpsStackFrame);
});

Here is how I am importing
import * as StackTrace from "stacktrace-js";
import * as StackTraceGPS from "stacktrace-gps";

Cannot find sourceMappingURL, if the file has sourceURL instruction at the end.

The current pattern used to locate sourceMappingURL is:
///[#@] ?sourceMappingURL=([^\s'"]+)\s*$/

It assumes that the line with sourceMappingURL is the last line in the file.
However, some libraries (like RequireJS most likely) append additional information labeled sourceURL at the end of the file so in my case it looks like below (the top of the file has been truncated):


[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');
//# sourceMappingURL=angular.min.js.map

//# sourceURL=http://localhost:63342/AppRoot/public/libs/js/angular.min.js


In this case the current RegEx pattern does not work.

My temporary fix is to remove $ from the RegEx expression. It is not ideal but it works for me at this point. I hope that this issue will be addressed somehow in a future version.

stacktrace-js bower dependencies missing

stacktrace-js depends on stack-generator, stacktrace-gps and error-stack-parser, but they are not encoded in the dependencies, so bower does not download them when you add a dependency on stacktrace-js.

Is there a reason why the dependencies are left out?

pinpoint gets Http error as it tries retrieve with webpack :////

I use StackTraceGPS. pinpoint to get the un-uglified stack but got error when stacktracegps starts to find my vendor code (REACT) from webpack.
image

Error:
Error: HTTP status: 0 retrieving webpack:///~/react/lib/ReactCompositeComponent.js at XMLHttpRequest.r.onreadystatechange

Webpack config: devtool: 'source-map', entry: './src/index', target: 'web', output: { path: __dirname + '/dist', // Note: Physical files are only output by the production build tasknpm run build`.
publicPath: '/myapp/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: { comments: false },
sourceMap: true
}),
new BundleAnalyzerPlugin({analyzerMode: 'static', generateStatsFile: true, openAnalyzer: false}),
extractSass
],

`

provide a way to synchronously parse an error

I have been using the 0.6 versions of stacktrace-js, but I was getting a warning from chrome about synchronous requests from the main thread being deprecated, so I am investigating updating to the new version.

The case I have is I want to augment a logging module to prefix the file:line:column to each log message, but because of the asynchronous nature of the interface that stacktrace-js exposes, it doesn't seem possible to do it.

I have hacked at the fromError method to remove the asynchronous interface and just return the stack frame array, and it seems to work, but I am no longer calling into the GPS module. I guess it's the GPS module that needs to download the source map.

It would be good to also provide an synchronous interface, e.g.:

70 /**
71 * Given an error object, parse it synchronously without source mapping.
72 * @param error Error object
73 * @param opts Object for options
74 * @return Array[StackFrame]
75 */
76 getStackFrames: function StackTrack$$getStackFrames(error, opts) {
77 opts = _merge(_options, opts);
78
79 var stackframes = ErrorStackParser.parse(error);
80
81 if (typeof opts.filter === 'function') {
82 stackframes = stackframes.filter(opts.filter);
83 }
84
85 return stackframes;
86 },

Sorry, I meant to file this issue against stacktrace-js, not stacktrace-gps.

NodeJS Client Standalone

Is it possible to use stacktrace-gps as a standalone client to enhance stackframe in json format? How can i provide minified js app and relative source map to this standalone client(no browser)?

var fs = require('fs');
var StackTraceGPS = require('stacktrace-gps');
var obj = JSON.parse(fs.readFileSync('prova.json', 'utf8'));
console.log(obj);

var gps = new StackTraceGPS();

for (var i in obj){
    var stackframe = obj[i];
    var result = gps.getMappedLocation(stackframe);
    console.log(result);
}

Offline Mode

Prevent network requests and use sensible defaults where possible.

StackTraceGPS.pinpoint returns Error "Found a source and line, but no column"

I concatenate and minimize my JavaScript files with UglifyJS. I want to use StackTraceGPS to get the original file names and line numbers.

Expected Behavior

If I use the attached v2a.min.js and v2a.min.js.map (which includes the StackTraceJS distribution) and I want to get the information for that StackFrame:

gps.pinpoint({fileName:"http://localhost:8280/testmarvin/js/v2a.min.js", lineNumber:2, columnNumber:10174}).then(res => console.log(res), err=> console.error(err));

I expect to get the correct filename and line number

Current Behavior

The pinpoint method returns the Error message "Found a source and line, but no column". I did not find any information to that error, I don't even find it in your source files... So what is wrong?

Steps to Reproduce (for bugs)

Use the attached minified JavaScript and SourceMap and call
var gps = new StackTraceGPS();
gps.pinpoint({fileName:"http://localhost:8280/testmarvin/js/v2a.min.js", lineNumber:2, columnNumber:10174}).then(res => console.log(res), err=> console.error(err));

Context

This bug prevents me from using StackTraceGPS at all, because it does not give me any useful information. And it would be exactly what I need, because the stacktraces of the minified JavaScript files say nothing

Your Environment

  • stacktrace.js version: 1.3.0
  • Browser Name and version: Firefox 52
  • Operating System and version (desktop or mobile): Mac OS X 10.10.5
  • Link to your project: It is not OpenSource, sorry

Possible Solution


Archiv.zip

Bluebird Promise Warnings

Hi,

When I try this (via stacktrace.js) with webpack + bluebird promise I see the following warning:
"Warning: a promise was created in a handler but was not returned from it"

The warning seems to think its coming from:
https://github.com/stacktracejs/stacktrace-gps/blob/master/stacktrace-gps.js#L172
StackTraceGPS: this._get = function _get(location) {

See: https://github.com/petkaantonov/bluebird/blob/master/docs/docs/warning-explanations.md#warning-a-promise-was-created-in-a-handler-but-none-were-returned-from-it

If this code is correct, can be it explicit so make bluebird not warn?

Re-use mapConsumer when resolving multiple call stacks

Every time pinpoint is called a new SourceMap.SourceMapConsumer object is created. Loading the source map into the consumer object is slow, so for multiple pinpoint calls the mapConsumer should be re-used.

Possible Solution

This change could be made without any changes to the API. However, caching the mapConsumer uses a lot of memory, so maybe this behavior should be opt-in only.

Maybe a cacheMapConsumers boolean could be passed into the StacktraceGPS constructor?

I can submit a PR if we can agree on an API.

sourceMappingURL regex matching earlier string instead of last line in webpack bundle

I have many //# sourceMappingURL throughout my webpack bundle, but the important one is the last one.

https://github.com/stacktracejs/stacktrace-gps/blob/master/stacktrace-gps.js#L129:

 var m = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/m.exec(source);

It looks like the issue is the /m multi-line matcher. Removing this will correctly use the last match in the file. Otherwise it will use the first one.

You can try it in http://www.regexr.com

\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$
//# sourceMappingURL=index.js.map

//# sourceMappingURL=main.bundle.js.map

Version 3.0.0.

sometimes the filename is <anonymous>

chrome sometimes evaluates JS in a VM and js that is evaled or crammed into a script tag manually will have filename anonymous. this results in an invalid network request for the source. would be best to just check for filename === '' and not do the fetches

Relax version for source-map

Expected Behavior

The latest minor or point release of source-map can be used

Current Behavior

A specific version is installed

Steps to Reproduce (for bugs)

Install stacktrace-gps

Context

This often results in multiple versions of source-map being installed since many packages require a version later than the currently pinned version

Your Environment

  • Package version: 3.1.2
  • Browser name and version: Safari 16.1
  • OS version (desktop or mobile): macOS 13.0
  • Link to your project: N/A

Possible Solution

Use ^ or ~ for the version specifier

Usage example combining error-stack-parser and stacktrace-gps

Say I have the return value of ErrorStackParser.parse() and the related source map file, how do I combine those into a gps.pinpoint(frames[1]) call without just getting a bunch of errors?

I assume I'd need to use offline: true in combination with sourceCache: something, but how? It looks like it's trying to fetch the original, minified source file as well. Is this actually even needed, if I have the stack frames and the source map?

Finally, [ReferenceError: XMLHttpRequest is not defined] tells me this may not have been designed to run on node. Would it be possible if sourceCache made HTTP requests unnecessary?

Support cache merging

I'm glad to see you're exposing the source cache, but its not enough to allow source caches to inter-operate. This has been really giving me issues in chrome lately, which seems to have some weird issue where it waits for a long time (like 20seconds) before it fulfills the second request for the same file (really odd - kind of the opposite of how caching is supposed to work).

But in any case, something is needed to allow other libraries to know if a request has been begun already, so they know to wait for that request to finish and use its result. The way I would do this is set values in the cache to the promise rather than the returned string. That way, the cache is filled immediately upon request, and other viewers of the cache can simply wait on that promise instead of making their own duplicate request.

I'd be willing to help make that change if you'd like.

Have an option to turn off function name inference get() request

The problem: often times file names in the source map are artificial, e.g. webpack://[name]/packages/client/src/layout/ModalPageLayout.tsx. If the source map contains only line/column numbers and not the source code per se, then stacktrace-gps runs a separate XHR request to fetch such artificial files and of course fails. (Even if filenames are not artificial, it's unlikely that anyone will have source code files in production at all.)

A solution could be to have an option to turn off function name resolution if this resolution implies a network request. It sounds similar to offline:true, but it's actually not: with offline:true, even the *.map file won't be fetched, whilst for this particular issue, we need to fetch *.map and not to fetch individual source files.

I have a work-around for this though, but it's ugly:

const stackFrames = await StackTrace.fromError(error, {
  // StackTract d.ts file is stale, it doesn't include ajax() hook
  // supported by stacktrace-gps library, but we can use it actually.
  ajax: async (location: string, opts: any) =>
    location.startsWith("webpack://")
      ? ""
      : fetch(location, opts).then(async (res) =>
          res.status === 200 ? res.text() : ""
        ),
} as any);

Missing source files causes entire source map to be ignored

Expected Behavior

The source map should be used to locate the original source files and locations

Current Behavior

If original source files cannot be obtained, an error is thrown which causes the entire source map to be ignored.

Steps to Reproduce (for bugs)

Have a setup where there is a source map, but the original source files are not available (only the bundled JS)

Context

Trying to map errors before reporting them to Rollbar in an Electron app

Your Environment

  • stacktrace-gps version: 3.0.4
  • Browser Name and version: Chrome 92
  • Operating System and version (desktop or mobile): Ubuntu
  • Link to your project: unpublished

Possible Solution

https://github.com/stacktracejs/stacktrace-gps/compare/master...shadow-light:custom?expand=1

Default AJAX function does not work for file:/// protocol

Expected Behavior

When using stacktrace-gps, sourcemaps should be fetched correctly, even from the filesystem.

Current Behavior

AJAX of sourcemaps only works for HTTP.

Steps to Reproduce (for bugs)

  • Serve a website from the filesystem using file:///
  • Try to sourcemap a stacktrace

Context

My real-world situation is trying to use stacktrace-gps in a Cordova app. But I can imagine people might want to use the filesystem in other situations, too.

Your Environment

  • stacktrace.js version: 1.3.1
  • Browser Name and version: Chrome 53 on desktop, UIWebView on iOS
  • Operating System and version (desktop or mobile): Tested on Mac OSX, Ubuntu 14.04, and iOS 8

Possible Solution

The issue is that stacktrace-gps depends on HTTP status codes. I fixed this issue for myself with a change to this line, simply assuming a success if the protocol was file:/// and there was responseText. That's probably not the best solution, but it should be a start.

Cannot find function names for ES6 static functions

Expected Behavior

With a method that throws an error like:

static generate() {
    throw new Error('Boom');
}

the function name generate should be returned from _findFunctionName

Current Behavior

Currently undefined is returned from _findFunctionName and a stack frame with an already populated function name from error.stack is replaced as
{anonymous}()@webpack:///src/main/lib/foo.js:15:10

Your Environment

  • stacktrace.js version: 1.1.2
  • Browser Name and version: Chrome 50.0.2661.94 (64-bit)
  • Operating System and version (desktop or mobile): Yosemite

bug: Function declaration regex too lenient

Currently, the function declaration regex is too lenient and prone to matching invalid function names.

An example:

true ? warning(ReactCurrentOwner.current == null, '_renderNewRootComponent(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : void 0;

yields

' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName

Proposed PR in #47.

Resolving source map references for CDN assets

Given an app hosted on example.com referencing a javascript file script.js hosted on cdn.example.com. The html file on example.com loads cdn.example.com/script.js. An error is thrown, and stacktrace-gps is used to map the stacktrace with the sourcemap.

script.js contains a source mapping url reference which is root relative.

//# sourceMappingURL=/script.js.map

Expected Behavior

The source map is loaded from cdn.example.com/script.js.map.

Current Behavior

The source map is attempted to be loaded from example.com/script.js.map.

Steps to Reproduce (for bugs)

I managed to provoke a similar bug in the test suite.

        it('should resolve a root relative url to a source map on the same hostname as the referencing asset', function(done) {
            var source = 'var foo=function(){};function bar(){}var baz=eval("XXX");\n//# sourceMappingURL=/test.js.map';
            jasmine.Ajax.stubRequest('http://localhost:9999/some/folder/test.js').andReturn({responseText: source});
            jasmine.Ajax.stubRequest('http://localhost:9999/test.js.map').andReturn({status: 404});
            var stackframe = new StackFrame({args: [], fileName: 'http://localhost:9999/some/folder/test.js', lineNumber: 23, columnNumber: 0});
            new StackTraceGPS().getMappedLocation(stackframe).then(done.fail, done);
        });

The test is adapted from #getMappedLocation rejects if source map file 404s. It would pass if the URL to the source map was resolved correctly, but it will timeout as the code base is now.

This is not involving a CDN, but shows another example of how a root relative url should be resolved.

Context

I used stacktrace-js when implementing crash reporting functionality for a large webapp I'm working on. I was trying to implement the mapping of errors client side, and this bug meant that none of the errors I ship back to my monitoring endpoint is mapped.

Your Environment

  • stacktrace.js version: 2.0.0
  • stacktrace-gps version: 3.0.2
  • Browser Name and version: Happens accross all tested browsers.
  • Operating System and version (desktop or mobile): Happens across all tested operating systems.
  • Link to your project: Unfortunately I am unable to share the code of the repository with you.

Possible Solution

This section of getMappedLocation should be extended to properly resolve root relative urls:

var sourceMappingURL = _findSourceMappingURL(source);
var isDataUrl = sourceMappingURL.substr(0, 5) === 'data:';
var defaultSourceRoot = fileName.substring(0, fileName.lastIndexOf('/') + 1);
if (sourceMappingURL[0] !== '/' && !isDataUrl && !(/^https?:\/\/|^\/\//i).test(sourceMappingURL)) {
sourceMappingURL = defaultSourceRoot + sourceMappingURL;
}

I can think of a few approaches:

  1. Use a proper url parsing library.
  2. Use an A-tag to parse the url: https://evanhahn.com/parse-urls-with-a-tags/

Option 1 is probably not the most attractive option for client-side use of stacktrace-gps, and option 2 is problematic when dealing with node.js where the document apis are not available.

A hybrid approach would work well, but I'm not sure how we would go about doing that, as it really quickly gets in to specifics about build tools and process.

I would love to provide a PR instead of an issue, but I don't think that there's an obviously right solution here, so I'd like to consult you first.

Create React App - fails to map stack trace

Attempting to log and debug live errors on a site generated by create-react-app.
The gps object created with new StackTraceGPS() looks to be fine (sourceCache and sourceMapConsumerCache promises are fulfilled).
When using pinpoint it just returns original line and column with an added name of w:

source: main.c8f4e493.chunk.js line: 1 column 255531
source: /static/js/main.c8f4e493.chunk.js line: 1 column 255531 name: w
source: main.c8f4e493.chunk.js line: 1 column 6959
source: /static/js/main.c8f4e493.chunk.js line: 1 column 6959 name: w
source: main.c8f4e493.chunk.js line: 1 column 318036
source: /static/js/main.c8f4e493.chunk.js line: 1 column 318036 name: w

Any suggestions?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.