Source-maps missing in dev builds

Current Behavior

I’m testing out building an app with Kotlin, and compiling sources to JS. Everything seems to be working really well with haul, except for stack-traces. I can debug kotlin sources, and everything. I just see this “can’t symbolocate error” every time I see a crash:

GET /index.android.bundle 200 11019287 - 12.494 ms
POST /symbolicate 404 151 - 0.214 ms
POST /symbolicate 404 151 - 0.141 ms

If I watch the logs, I see the following:

01-20 22:31:23.555  1925 15179 E ReactNativeJS: TypeError: Object.freeze can only be called on Objects.
01-20 22:31:23.555  1925 15179 E ReactNativeJS: 
01-20 22:31:23.555  1925 15179 E ReactNativeJS: This error is located at:
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in HelloWorld (at renderApplication.js:35)
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:102)
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:122)
01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
01-20 22:31:23.567  1925 15179 E ReactNativeJS: TypeError: Object.freeze can only be called on Objects.
01-20 22:31:23.567  1925 15179 E ReactNativeJS: 
01-20 22:31:23.567  1925 15179 E ReactNativeJS: This error is located at:
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in HelloWorld (at renderApplication.js:35)
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:102)
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:122)
01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
01-20 22:31:23.575  1925 15179 W ReactNativeJS: Unable to symbolicate stack trace: JSON Parse error: Unrecognized token '<'
01-20 22:31:23.577  1925 15179 W ReactNativeJS: Unable to symbolicate stack trace: JSON Parse error: Unrecognized token '<'

Expected Behavior

My stack-traces would be able to be symbolicated just fine.

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }, defaults) => ({
  entry: `./index.js`,
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
});

Your Environment

software	version
Haul	1.0.0-beta.12
react-native	0.52
node	9.4.0
npm or yarn	yarn 1.3.2

[simonbuchan]

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.

[ScottPierce]

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.