[Bug] Unbound Breakpoint
leobragatti opened this issue · 27 comments
🐛 What is the bug? How can we reproduce it?
I'm just trying to debug my app, but all breakpoints show the message "Unbound breakpoint"
I've already tried all the solutions I've saw on the internet, but still I have this problems
Expected behavior
When I start the debugger, it should stop on the breakpoints
Debug output
Debug Console
[Debug] Begin to activate...
[Debug] Extension version: 1.1.1
[Debug] Projects found: 1
[Debug] Add project: /home/leonardo/Programming/repos/JavaScript/fieldlink.react
[Debug] React Native version: 0.63.2
[Debug] 'react-native' package with value '^0.63.2' is found in 'dependencies' section of package.json
[Info] Starting Packager
[Debug] Executing command: /home/leonardo/Programming/repos/JavaScript/fieldlink.react/node_modules/.bin/react-native start --port 8081
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
[Info] Packager started.
[Info] Prewarming bundle cache. This may take a while ...
[Info] About to get: http://localhost:8081/index.bundle?platform=android
[Tue Nov 10 2020 11:36:16.955] BUNDLE ./index.js
[Warning] The Bundle Cache was prewarmed.
[Info] Building and running application.
[Info] Enable JS Debugging
[Info] Packager is already running.
info Starting custom debugger by executing:, echo A debugger is not needed: "/files/Programming/repos/JavaScript/fieldlink.react"
[Tue Nov 10 2020 11:36:38.137] BUNDLE ./index.js
[Tue Nov 10 2020 11:36:38.585] MAP ./index.js
[Tue Nov 10 2020 11:36:41.959] LOG JavaScript logs will appear in your environment console
React Native output channel
PASTE OUTPUT OF REACT-NATIVE OUTPUT CHANNEL (View -> Toggle Output -> Select React-Native in ListBox)
Developer Tools console
TMScopeRegistry.ts:45 Overwriting grammar scope name to file mapping for scope source.yaml.
Old grammar file: file:///usr/share/code/resources/app/extensions/yaml/syntaxes/yaml.tmLanguage.json.
New grammar file: file:///home/leonardo/.vscode/extensions/redhat.vscode-yaml-0.12.0/syntaxes/yaml.tmLanguage.json
register @ TMScopeRegistry.ts:43
console.ts:137 [Extension Host] (node:249721) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
t.log @ console.ts:140
console.ts:137 [Extension Host] process Array(1)
log.ts:197 ERR loadedSources not supported: Error: loadedSources not supported
at t.RawDebugSession.loadedSources (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:3336:860)
at N.getLoadedSources (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6207:316)
at file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:7167:180
at file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:7167:240
at Array.forEach (<anonymous>)
at V.renderBody (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:7167:131)
at V.render (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:1035:770)
at V.render (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6942:800)
at M.onDidAddViewDescriptors (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6964:560)
at file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6959:377
at c.fire (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:99:67)
at b.onDidChangeContext (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6355:152)
at file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6348:480
at c.fire (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:99:67)
at file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:94:782
at t.PauseableEmitter.fire (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:99:67)
at t.PauseableEmitter.resume (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:99:628)
at _.bufferChangeEvents (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:1932:431)
at t.ViewModel.setFocus (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:3342:724)
at Y.focusStackFrame (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6232:980)
at Y.launchOrAttachToSession (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6227:964)
at async Y.doCreateSession (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6226:616)
at async Y.startDebugging (file:///usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js:6223:924)
console.ts:137 [Extension Host] (node:249721) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
t.log @ console.ts:140
Environment
Please tell us about your system and your project:
npx react-native doctorornpx expo doctorif your project is using Expo:
Common
✓ Node.js
✓ npm
Android
✓ JDK
✓ Android Studio - Required for building and installing your app on Android
✓ Android SDK - Required for building and installing your app on Android
✓ ANDROID_HOME
Errors: 0
Warnings: 0
Common
✓ Node.js
✓ npm
Android
✓ JDK
✓ Android Studio - Required for building and installing your app on Android
✓ Android SDK - Required for building and installing your app on Android
✓ ANDROID_HOME
Errors: 0
Warnings: 0
envinfo:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 4.00 GB / 15.54 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.15.0 - /usr/bin/node
npm: 6.14.8 - /usr/local/bin/npm
Managers:
Apt: 2.0.2 - /usr/bin/apt
RubyGems: 3.1.2 - /usr/bin/gem
Utilities:
Make: 4.2.1 - /usr/bin/make
GCC: 9.3.0 - /usr/bin/gcc
Git: 2.25.1 - /usr/bin/git
Mercurial: 5.3.1 - /usr/bin/hg
Virtualization:
Docker: 19.03.13 - /usr/bin/docker
SDKs:
Android SDK:
API Levels: 26, 28, 29
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0
System Images: android-26 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Nano: 4.8 - /usr/bin/nano
VSCode: 1.51.0 - /usr/bin/code
Vim: 8.1 - /usr/bin/vim
Languages:
Bash: 5.0.17 - /usr/bin/bash
Java: 14.0.1 - /usr/bin/javac
Perl: 5.30.0 - /usr/bin/perl
Python: 2.7.18 - /usr/bin/python
Python3: 3.8.5 - /usr/bin/python3
Ruby: 2.7.0 - /usr/bin/ruby
Databases:
SQLite: 3.32.2 - /files/Programming/Android/platform-tools/sqlite3
Browsers:
Firefox: 82.0.3
- React Native Tools extension version: v1.1.1
Hi @leobragatti and thanks for reaching us. Could you please add more information about your project?
- Does this project use Expo?
- Which version of React Native is used in your application?
- Can you please provide screenshots of breakpoints marked as unbound?
Also it will be great if you can provide a minimal demo application in which this issue is reproduced.
Hi @SounD120, thanks for the reply!
1.Does this project use Expo?
No
Which version of React Native is used in your application?
0.63.2
Can you please provide screenshots of breakpoints marked as unbound?
My current app now is complex, but I'll try to do a minimal app to reproduce this
@leobragatti Does this issue reproduce on React Native Tools v1.1.0? You can install it by using right click on the extension and selecting Install another version... as pointed on the screenshot below.
@SounD120 yes, the problem persists on React Native Tools v1.1.0
@leobragatti Could you please execute your debugging scenario with "trace": "verbose" argument in launch.json and attach here outputs from React Native Chrome Proxy output channel and debug console?
@SounD120 Here's the output
output.log
@leobragatti I inspected the logs and I don't even see any logs connected to the Login.js file. There are no commands that should place a breakpoint in this file, but I found an error about the require cycle that possibly might cause this. Did you put the breakpoint in the Login.js file when verbose logs are recorded?
Here is the exact error that I found:
"Require cycle: src/Screens/Common/NewAccount/index.js -> src/Screens/Common/NewAccount/NewAccount.js -> src/Screens/Common/AccountCreated/index.js -> src/Screens/Common/AccountCreated/AccountCreated.js -> src/Screens/Auth/Login/index.js -> src/Screens/Auth/Login/Login.js -> src/Screens/Common/NewAccount/index.js\n\nRequire cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle."
@SounD120 I'll check it out and let you know. Thanks for the help!
@SounD120 Just to let you know, I tried to debug using WebStorm IDE and worked fine
@leobragatti Which version of VS Code do you use?
@leobragatti Basically this looks like a sourcemap problem.
This issue is also looks similar: microsoft/vscode-js-debug#845.
React Native Tools debugger uses https://github.com/microsoft/vscode-js-debug under the hood, so if it causes the problem it should be fixed there.
Could you please share your index.map file from the .vscode/.react folder? If it might content senstive data - please send it to my work email v-yuskor@microsoft.com.
@leobragatti Can you please also share your debug scenario configuration from launch.json? Where is the .react folder in your project?
@SounD120 Here's the launch.json:
And here's how my folder structure:
@leobragatti I think I found the reason of problems with breakpoints. For some reason the path to the source file look incorrectly, for example for
Login.js -> "../../../../../../../../files/Programming/repos/JavaScript/<appname>/src/Screens/Auth/Login/Login.js"
This path is constructed relatively from <projectRoot>/.vscode/.react/index.map file.
It seems that there are unnecessary hierarchy climbs in the relative paths. I am starting to investigate what possibly might cause this.
@leobragatti Could you please try to replace .react in the name of your app to _react? I am suspecting that might be the core of the problem.
@SounD120 By that, you mean just rename the folder?
@leobragatti Yes, and after that try to debug your app.
@SounD120 still not working :(
Any more suggestions?
@leobragatti This problem will be faster to find with a repro demo, so could you please send us one? This will be very helpful, since this doesn't reproduce on basic template apps.
@SounD120 I've invited you to a repo to be able to reproduce the problem. I've noticed one thing: When I have . in the folder name, the breakpoints doesn't work. But if replace . with - on the name, it works fine
@leobragatti We have tested both versions of folder names with . and with - and they both work without problem on Windows 10, Linux and macOS. So, maybe we missed some repro steps? How does this reproduce in your case? Where you place breakpoints and when?
@SounD120 I've placed the breakpoint in the same line as you:
Hi @leobragatti. It seems that something goes wrong when the extension tries to transform your absolute paths to source file to relative for sourcemaps. In order to check this I prepared patched version of the extension which will write debug logs from this place in file.
So could you please do the following:
- Remove your currently installed React Native Tools and fully relaunch VS Code.
- Unzip and install the updated extension via VSIX(Extensions tab in VS Code -> ... -> Install from VSIX): vscode-react-native-1.1.1.zip
- Launch debugging on your app in case when breakpoints doesn't work
- Launch debugging on your app in case when breakpoints does work
- Go to
~/.vscode/extensions/msjsdiag.vscode-react-native-1.1.1/distand finddebug.logfile in there. - Attach this file to issue, or send it to my email v-yuskor@microsoft.com
Please take into account that this compiled VSIX version is for debugging purposes only, so after the test it is recommended to remove it, relaunch VS Code and install the extension from the Marketplace.
@SounD120 I've found the problem. I was using a symbolic link to the repo. When I started using the real path to the folder, the debugger worked. Really weird situation, though, because I have a lot of folders which are just symbolic links and don't have any problem with that
@leobragatti Really weird situation 😕 . I think we'll investigate the extension behavior with respect to the symbolic links and update the documentation to avoid such issues in future.
@SounD120 thanks so much for the help and attention!
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Debug Android", "cwd": "${workspaceFolder}", "type": "reactnative", "request": "launch", "platform": "android", "trace": "verbose" }, { "name": "Debug iOS", "cwd": "${workspaceFolder}", "type": "reactnative", "request": "launch", "platform": "ios" } ] }