Vscode-react-native: Unable to open and see source files in VSCode when clicking red box stack trace

[jeanregisser]

Actual Behavior

1. Create a React Native app
2. Open the project in VSCode
3. Add a typo somewhere which result in a red box in the app with the stack trace
4. Click the stack trace error
5. Nothing happens
   

   Expected Behavior

It should open the corresponding file in VSCode at the appropriate line

Software versions

• React-Native VS Code extension version: 0.1.5
• VSCode version: 1.4.0
• OS platform and version: OSX

• React Native version: 0.31.0

  Outputs

• Output of the Debug Console (View -> Toggle Debug Console):

** BUILD SUCCEEDED **
Installing build/Build/Products/Debug-iphonesimulator/StarQL.app
Launching org.reactjs.native.example.StarQL
org.reactjs.native.example.StarQL: 51435
[vscode-react-native] Finished executing: react-native run-ios --simulator iPhone 5s --project-path ios
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugging session started successfully.
StyleShee is not defined
Module AppRegistry is not a registered callable module.
Unhandled JS Exception: StyleShee is not defined
Unhandled JS Exception: Module AppRegistry is not a registered callable module.

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

######### Starting Packager ##########
######### Executing command: react-native start --port 8081 ##########
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/jean/src/StarQL 

[6:28:24 PM] <START> Building Dependency Graph
[6:28:24 PM] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[6:28:25 PM] <END>   Crawling File System (396ms)
[6:28:25 PM] <START> Building in-memory fs for JavaScript
[6:28:25 PM] <END>   Building in-memory fs for JavaScript (103ms)
[6:28:25 PM] <START> Building in-memory fs for Assets
[6:28:25 PM] <END>   Building in-memory fs for Assets (72ms)
[6:28:25 PM] <START> Building Haste Map
[6:28:25 PM] <START> Building (deprecated) Asset Map
[6:28:25 PM] <END>   Building (deprecated) Asset Map (23ms)
[6:28:25 PM] <END>   Building Haste Map (72ms)
[6:28:25 PM] <END>   Building Dependency Graph (664ms)
######### Packager started. ##########
[6:28:26 PM] <START> request:/index.ios.bundle
[6:28:26 PM] <START> find dependencies
[6:28:27 PM] <END>   find dependencies (397ms)
######### The Bundle Cache was prewarmed. ##########
[6:28:27 PM] <END>   request:/index.ios.bundle (469ms)
[6:28:37 PM] <START> request:/index.ios.bundle?platform=ios&dev=true&minify=false
[6:28:37 PM] <START> find dependencies
[6:28:37 PM] <END>   find dependencies (500ms)
Starting custom debugger by executing: echo A debugger is not needed:  "/Users/jean/src/StarQL"
[6:28:38 PM] <START> request:/index.ios.bundle?platform=ios&dev=true&minify=false
[6:28:38 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true&minify=false (611ms)
[6:28:38 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true&minify=false (72ms)
[6:28:38 PM] <START> request:/index.ios.bundle?platform=ios&dev=true&minify=false
[6:28:38 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true&minify=false (13ms)
[6:28:38 PM] <START> request:/index.ios.map?platform=ios&dev=true&minify=false
[6:28:38 PM] <END>   request:/index.ios.map?platform=ios&dev=true&minify=false (98ms)
[6:28:38 PM] <START> symbolicate
[6:28:38 PM] <END>   symbolicate (0ms)
[6:28:38 PM] <START> symbolicate
[6:28:38 PM] <END>   symbolicate (1ms)
[6:28:38 PM] <START> symbolicate
[6:28:38 PM] <END>   symbolicate (0ms)
[6:28:38 PM] <START> symbolicate
[6:28:38 PM] <END>   symbolicate (1ms)
Opening /Users/jean/src/StarQL/.vscode/.react/index.ios.bundle with /Users/jean/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/scripts/atom
Error: spawn EACCES
    at exports._errnoException (util.js:856:11)
    at ChildProcess.spawn (internal/child_process.js:298:11)
    at Object.exports.spawn (child_process.js:367:9)
    at launchEditor (/Users/jean/src/StarQL/node_modules/react-native/local-cli/server/util/launchEditor.js:167:35)
    at Object.handle (/Users/jean/src/StarQL/node_modules/react-native/local-cli/server/middleware/openStackFrameInEditorMiddleware.js:17:7)
    at next (/Users/jean/src/StarQL/node_modules/connect/lib/proto.js:174:15)
    at Object.handle (/Users/jean/src/StarQL/node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js:89:7)
    at next (/Users/jean/src/StarQL/node_modules/connect/lib/proto.js:174:15)
    at Object.handle (/Users/jean/src/StarQL/node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js:89:7)
    at next (/Users/jean/src/StarQL/node_modules/connect/lib/proto.js:174:15)

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

None

Additional notes

Looking at /Users/jean/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/scripts/atom I can see on the filesystem that's it is not executable.
If I manually add the execute permission, I get a bit further but end up with the following output

Opening /Users/jean/src/StarQL/.vscode/.react/index.ios.bundle with /Users/jean/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/scripts/atom

/Users/jean/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/node_modules/q/q.js:155
                throw e;
                ^
Error: Error while executing command 'Unable to communicate with VSCode. Please make sure it is open in the appropriate workspace.'
Your editor exited with an error!

 Keep these instructions in mind: 
  When you see Red Box with stack trace, you can click any 
  stack frame to jump to the source file. The packager will launch your 
  editor of choice. It will first look at REACT_EDITOR environment 
  variable, then at EDITOR. To set it up, you can add something like 
  export REACT_EDITOR=atom to your ~/.bashrc or ~/.zshrc depending on 
  which shell you use.

Also one other problem that might explain this is that the symbolication part fails in the red box stack trace. It shows only index.ios.bundle instead of the source files.
If I manually launch the same project from Xcode, the symbolication in the red box stack trace succeeds and I see the actual source files.

[MSLaguana]

Thanks for reporting this! That permissions issue is a bit of a pain, I'll have to see if we can change our build system to make sure the extension packages the script with execute permissions.

Regarding the second error you get there: Do you already have your project open in vscode? The failure indicates that we are trying to set up some interprocess communication and that is failing for some reason.

[jeanregisser]

Yes VSCode was already open. I used it to start a debug session of the RN app.

[jeanregisser]

I also found the cause of the symbolication failing: https://github.com/facebook/react-native/issues/9605
It wasn't caused by this extension.

[MSLaguana]

Thanks for letting us know! I think I've also worked out a fix for the permissions issue, it may be as simple as changing an environment var that we set.

[MSLaguana]

I believe that I've found the reason that navigating to the stack trace failed. I'll work on a fix, but in the short term you can fix it yourself by going to ~/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/out/extension/openFileAtLocation.js and changing var fullpath = process.argv[2] to var fullpath=proess.argv[3]. We were using the wrong argument there (it's actually the path of the project root) and then stripping a layer off, meaning it would never find the project.

[jeanregisser]

Tried that but It didn't work directly.

I noticed the args passed to the editor are not always the same.
Printing the actual args just after https://github.com/facebook/react-native/blob/35e7a266db1927d6b3efd5e8b43394518ec86f59/local-cli/server/util/launchEditor.js#L156 I can see that if I click on a stack trace item, sometimes it has the workspace as 1st argument and actual file as 2nd argument.
But for some other items on the trace (where it can't find the workspace, see https://github.com/facebook/react-native/blob/35e7a266db1927d6b3efd5e8b43394518ec86f59/local-cli/server/util/launchEditor.js#L125), it's just the filename as 1st argument.

So I also had to tweak https://github.com/Microsoft/vscode-react-native/blob/32c742e72a2ef65827562d72e370382f95f61849/scripts/atom#L19 to account for this, as it was only passing 1 arg.

Side note: somehow today I can't have symbolication fully working on a brand new react-native init MyProject from within vscode. It looks like it happens only when vscode is set as the remote debugger. I'll open a separate issue.

[jeanregisser]

Specifically, when vscode is the remote debugger, if I click on any of the index.ios.bundle items, launchEditor.js finds the workspace and passes 2 args when launching the editor (workspace and actual file with line number).
However for vm.js, appWorkder.js, q.js which are outside of the project root, it just passes 1 arg (for instance /Users/jean/.vscode/extensions/vsmobile.vscode-react-native-0.1.5/out/debugger/appWorker.js:76).

See

[MSLaguana]

Thanks for the detailed investigation, I'll fix the scripts to check for the number of arguments passed and behave appropriatelety.

[antoinerousseau]

Also, make sure you have installed the command:
https://code.visualstudio.com/docs/setup/mac

[hhimanshu]

Also, make sure you have installed the command:
https://code.visualstudio.com/docs/setup/mac

This was the key along with adding REACT_EDITOR=code, instead of REACT_EDITOR=atom which shows up on the console.