Source-maps missing in dev builds

[ScottPierce]

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

[krizzu]

Hey, thanks for bringing this up. I've noticed the same warning in my current project, we'll try to investigate it.

[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.

[ScottPierce]

I've created a sample repo to reproduce this issue. The CrashExample branch purposefully throws an exception to show off the issue: https://github.com/ScottPierce/kotlin-react-native/tree/CrashExample

[simonbuchan]

Not worth a separate issue, but RN will sometimes ask to symbolicate an empty stack (I think for console.error(), e.g. caught by an error boundary), it's a little confusing that returns a 404 too, even if it has the same behavior.

[ScottPierce]

I added log to simbolicateMiddleware.js to log the body of the response and this is what I see:

{"stack":[{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"RuntimeException_init_0","lineNumber":3845,"column":24},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"HelloWorld.render","lineNumber":1,"column":1361},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"finishClassComponent","lineNumber":1,"column":129987},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"updateClassComponent","lineNumber":1,"column":129489},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"beginWork","lineNumber":1,"column":137366},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"performUnitOfWork","lineNumber":1,"column":178002},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"workLoop","lineNumber":1,"column":179134},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"Object._invokeGuardedCallback","lineNumber":1,"column":3344},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"invokeGuardedCallback","lineNumber":1,"column":2153},{"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false","methodName":"renderRoot","lineNumber":1,"column":180554}]}

Is a url for the file acceptable in this case? This seems like it could be why the file can't be found:
"file":"http://10.0.3.2:8081/index.bundle?platform=android&dev=true&minify=false"

[simonbuchan]

Given that it doesn't look like .file is used at all except for sniffing the running platform for the --platform all case, that shouldn't be the problem.

The error comes from symbolicateMiddleware.js:56, in createSourceMapConsumer() before it even starts mapping frames. Essentially looks like the middleware couldn't find the webpack output file in the webpack file system, which seems odd. Perhaps the structure changed in some later version of webpack? Seems like webpack should have a simpler method to get the source map of a file.

Note, you can debug with node --inspect-brk node_modules/haul/bin/cli.js --platform android (for node 6, --inspect --debug-brk), which will give you a chrome inspector link you can open. Or, if you're using a Jetbrains IDE (possibly including Android Studio?) you should be able to just point a node debug run config at the cli.js (you can do it with the npm script, but it's more complicated)

[ScottPierce]

@simonbuchan Thanks, that was helpful, although I didn't get the --inspect-brk to work. Not sure why.

The problem seems to be that it's looking at the following path: <project directory>/dist, and ./dist doesn't exist in my project directory. Where is the actual webpack output directory, and why would it be looking in the wrong place?

[simonbuchan]

--inspect-brk is a shorthand for --inspect --debug-brk added in Node 8, so most likely you're using an earlier node if that errors. If the link doesn't work, it must be a chrome-like browser, firefox, IE etc don't implement the chrome-devtools:/// protocol.

It's in an in-memory FS, just like usual webpack-dev-server, see: https://webpack.js.org/api/node/#custom-file-systems so you will need a debugger or a lot of painful messing with debugging statements.

[ScottPierce]

So the problem is with symbolicateMiddleware.js line 48:

const base = delve(compiler.outputFileSystem.data, hops);

base has 2 keys. An empty string, and index.android.bundle. It then looks for index.android.bundle.map and it's not there.

When I run yarn haul bundle --platform android, the index.android.bundle.map file is generated, along with the index.android.bundle file.

How would you recommend debugging this further? Why would the file not be generated in the in-memory filesystem? Do I need to use the devtool setting maybe?

[simonbuchan]

Hmm, could be the source maps are not getting generated externally in haul start - either not at all or they are generated inline, and for some reason haul bundle build is. I suspect it's due to the --dev or --minify defaults being different, so you could try haul bundle --dev true --minify false which should be pretty much the same output as haul start

[ScottPierce]

You are right. Running haul bundle --dev true --minify false only generates the index.android.bundle file. Would this have anything to do with me using the source-map-loader?

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

What else would cause the map file not to be generated?

[simonbuchan]

Yeah, looking at it, the dev mode source maps are created by: https://github.com/callstack/haul/blob/master/src/utils/makeReactNativeConfig.js#L134-L136 which is equivalent to devtool: 'module-eval', which will not generate .map files.

Blame points at #289 which claims source maps still work with those changes, but that is devtools, while symbolicate is needed for redboxes? @jukben any ideas how to resolve both these? Use both eval and external source maps? Sounds expensive.

[ScottPierce]

Is there any way that I could override this for now and get this working?

[ScottPierce]

I undid the change from that PR locally, and stacktraces are working now; however debugging is no longer working. I can't see my sources in chrome anymore.

I had to make one minor modification to get stacktraces with proper lines and files: Here's the old setting for devtool: devtool: bundle ? 'source-map' : 'eval-source-map',, and I wasn't seeing filenames or correct line numbers with that. When I changed it to devtool: 'source-map',, the stacktrace seems fine.