Investigate Firefox Sourcemap issues

[zpao]

It was reported to me on IRC today and confirmed on master / FF nightly myself. Also facebook/react-devtools#40

[EricTill]

I should add that when there are no errors in the jsx file the page still renders correctly, but the behavior persists (cannot load source file). Errors are reported from lines that do not exist in html file which makes bugs hard to track down.

Confirmed on Windows 7 and Firefox 29.

I can add more details once I get back to work on Monday - just let me know what information you need.

Thanks,
-Eric

[syranide]

What exactly is the issue? If it's just source lines being "off/out of bounds" then it's possible that it's the old JSX issue where source lines reported by esprima are mysteriously offset. AFAIK it was never explicitly solved, but no one was able to reproduce it anymore, perhaps it struck again?

Other than that, JSX is just sugar on-top of esprima (and source-map I assume), and I think even the above issue is/was, so I don't think JSX is necessarily the root cause here.

[EricTill]

Hi @syranide, thanks for responding.

At the most general level, the problem I am trying to solve is this: I want to be able to use the JSXTransformer script and be able to see a useful version of my compiled JS script which (pre-compilation) had JSX in it. I want to do this so that when I make an error in my JSX-containing JS script I can get a useful error message and hopefully see where the problem is in my original script (or get some clue as to where the problem might be).

As it stands now, when I have an error in my script, the console just complains about lines which do not exist in my HTML file (which is only a few lines). So it'll say there's an error in line 65 of example.html even though example.html is only 15 lines.

Compounding the problem is that, even when there were no errors and the JSX compiled perfectly to JS and the JS file ran just fine, I still cannot see any sources other than the JSX compiler, the reactjs source and my jquery source. I can't see either a uncompiled or compiled version of my JSX-containing JS file. Instead, what I see is this:

Error loading source:
Could not load the source for http://www.myworkdomain/path/to/test.js.
Error: "test.js" is not in the SourceMap.
Stack: SourceMapConsumer_sourceContentFor@resource://gre/modules/devtools/SourceMap.jsm:391
SourceActor.prototype._getSourceText@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2452
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:118
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:43
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:153
SourceActor.prototype.onSource@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2471
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1023
LDT_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:258
makeInfallible/<@resource://gre/modules/devtools/DevToolsUtils.jsm -> resource://gre/modules/devtools/DevToolsUtils.js:80
Line: 391, column: 6

Hopefully that explains everything, but let me know if you're still confused. I can provide more info when/if you need it.

Thanks

[sophiebits]

@syranide When I tested last week I couldn't get the source map to do anything at all in Firefox.

[zpao]

Figured it out. I can't decide if it's a Firefox issue or something we're doing wrong, but

react/vendor/browser-transforms.js

Line 128 in 7715063

map.sources = [source];

is the problem. It seems when we pass URLs (eg "http://localhost/examples/example.js") here, Firefox chokes. If we pass a filename (eg "example.js") the sourcemap is usable. So short term, I'm just going to pull off the actual filename and use that. Inline scripts don't appear to have been a problem (supporting my URL theory).

cc @fitzgen from the Firefox devtools team, might be worth looking into on your end as well (can't remember if I filed that bug).

[syranide]

@zpao Can we keep the full path but drop the domain-part perhaps?

[zpao]

@syranide Good idea, I changed to doing that :)

[fitzgen]

@zpao, would love a minimal test case. Can you repro with just mozilla/source-map, or only while using devtools?