haul: Source-maps missing in dev builds

Hmm, devtool: 'eval-*' is equivalent to the current plugins: [new EvalSourceMapDevToolPlugin()]. It looks like the root of the issue is that before #289 non-bundle builds generated both eval and external source maps - eval required for remote debugging, external for symbolicate. This isn’t an ideal state either, but see below. (On the other hand, it probably shouldn’t be adding SourceMapDevToolPlugin and devtool: 'source-map when bundling, since the latter adds the former)

When remote debugging, the code is actually running in the debugger: e.g. Chrome or React Native Debugger, all the JS<->Native communication is remoted over the debugger connection(!), and chrome can look up source maps when generating an error stack itself. But when running inside RN’s embedded JavaScriptCore runtime, it doesn’t have access to source maps, so it delegates to the packager via symbolicate. So whatever is done needs to work in both. I assume you don’t get stacks when not remote debugging because of this issue: the symbolicate call is 404ing? But be aware console.errors() will redbox without a stack, and I think that’s used by some of the react-native polyfill / shims?

I’m not part of the team, but I would guess a PR should have:

• JS errors display correct stack in redbox whether remote debugging or not
• When remote debugging, console, breakpoints, etc. show correct source file and location, with original source.
• haul bundle size does not increase dramatically

So I guess start experimenting, reading up on https://webpack.js.org/plugins/source-map-dev-tool-plugin/ etc.? This stuff is tricky.

Don’t focus on this, but it would be cool if chrome workspace support worked too - for that the moduleFilenameTemplate should create files like file:///C:/path/to/file on windows, file:///path/to/file on nix…, see how create-react-app does it in dev - though in prod they make the url relative for I assume consistency across build machines.

Just saw the following error while debugging an exception I created to repro this issue:

 WARN  Unable to find source map.
POST /symbolicate 404 151 - 0.455 ms

 WARN  Unable to find source map.
POST /symbolicate 404 151 - 0.437 ms

The sourcemaps are definitely there. I’m able to see all the kotlin sources in chrome, and also set breakpoints, even on the line that throws an exception. I’ll work on creating a reproducible example project.

This might be relevant: #339 not only will remove problems with MultiCompiler mode, but it will use both eval source mas and source maps for respectively debugger and symbolicate middleware. Unfortunatelly it has some performance cost, but we will try to minimize it in follow-up PRs.

Note that if you are actually using multiple bundles, you need to do some magic to affect the file for external files, the simplest is eval(source + '\n//# sourceURL=' + url), but that only works for remote debugging. JavaScriptCore will simply not include eval-sourced frames, which is a pain. I suspect if I expose the native JSEvaluateScript in a RN plugin I could get that working, and be more efficient to boot, but this is fine for now. Also note that in my experimentation, any other devtool plugin than new SourceMapDevToolPlugin() (= devtool: 'inline-module-source-map') will either break this symbolication or not have correct source maps in remote debugger. I’m pretty sure I can fix that eventually, but it’ll take a bit of time.