Vscode-react-native: An error occurred while attaching debugger to the application. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505) (error code 1410)

Created on 16 Jan 2021  ·  3Comments  ·  Source: microsoft/vscode-react-native

🐛 What is the bug? How can we reproduce it?

Vscode still thinks that debugger port is in use if it was at least on use once Vscode tried to start debugger. The error persists _even after other debugger is killed_ (and yes I'm sure that it's killed). The only way to get Vscode debugger to work is to restart Vscode.

Please put here any steps, code or any information that can help us
reproduce the error on our side so we can fix it:

  1. Have an attach configuration like this (other configurations might be encountering too, this is what I'm getting the error with):
  {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true
  }
  1. Open Vscode and React Native project. Start packager either via Vscode or externally, but _do not attach to packager_.
  2. Have another debugger listen on the debugger port, I had React Native Debugger listening on debugger port.
  3. Try to launch Vscode RN debugger. It _will_ naturally fail with the error as external debugger is attached:
An error occurred while attaching debugger to the application. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505) (error code 1410)
  1. Terminate the external debugger.
  2. Try to attach to debugger.
  3. The debugger port is now free to attach but Vscode still displays the same error.

Expected behavior

Vscode should attach to debugger.

Debug output


Debug Console

Attaching to the application
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon...


React Native output channel

[Info] Starting Packager


               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               

                 Welcome to React Native!
                Learn once, write anywhere


[Info] Packager started.

[Info] Packager is already running.


Developer Tools console

rror: Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505)
    at Function.getInternalError (/Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1)
    at /Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1
    at t.ExecutionsLimiter.execute (/Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1)
    at A.<anonymous> (/Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1)
    at A.emit (events.js:223)
    at A.emitClose (/Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1)
    at Socket.U (/Users/Can/.vscode/extensions/msjsdiag.vscode-react-native-1.2.0/dist/rn-extension.js:1)
    at Socket.emit (events.js:223)
    at TCP.<anonymous> (net.js:664)
$onExtensionRuntimeError @ mainThreadExtensionService.ts:57
_doInvokeHandler @ rpcProtocol.ts:396
_invokeHandler @ rpcProtocol.ts:330
_receiveRequest @ rpcProtocol.ts:269
_receiveOneMessage @ rpcProtocol.ts:208
(anonymous) @ rpcProtocol.ts:90
fire @ event.ts:525
fire @ ipc.net.ts:449
_receiveMessage @ ipc.net.ts:785
(anonymous) @ ipc.net.ts:642
fire @ event.ts:525
acceptChunk @ ipc.net.ts:191
(anonymous) @ ipc.net.ts:191
t @ ipc.net.ts:925
emit @ events.js:223
addChunk @ _stream_readable.js:309
readableAddChunk @ _stream_readable.js:290
Readable.push @ _stream_readable.js:224
onStreamRead @ internal/stream_base_commons.js:181

Environment

Please tell us about your system and your project:

  • npx react-native doctor or npx expo doctor if your project is using Expo:
Common
 ✓ Node.js
 ✓ yarn
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✓ JDK
 ✓ Android Studio - Required for building and installing your app on Android
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 28.0.3
 ✓ ANDROID_HOME

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI

Errors:   1
Warnings: 0
  • envinfo:
  System:
    OS: macOS 11.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 30.08 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.9.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
    Gradle: 5.6.1 - /usr/local/bin/gradle
    Homebrew: 2.7.1 - /usr/local/bin/brew
    Maven: 3.6.2 - /usr/local/bin/mvn
    pip2: 19.1.1 - /usr/local/bin/pip2
    pip3: 20.3.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    CMake: 3.19.2 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 14.3. - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1200.0.32.28 - /usr/bin/clang
    FFmpeg: 4.1 - /usr/local/bin/ffmpeg
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Parallels: 16.1.1 - /usr/local/bin/prlctl
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6858069
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: Build 3211
    VSCode: 1.52.1 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.11.4 - /usr/local/bin/go
    Java: 10.0.2 - /usr/bin/javac
    Perl: 5.28.2 - /usr/bin/perl
    PHP: 7.3.24 - /usr/bin/php
    Python: 3.9.1 - /usr/local/opt/python/libexec/bin/python
    Python3: 3.9.1 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.28.0 - /Users/Can/Library/Android/sdk/platform-tools/sqlite3
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 74.0
    Safari: 14.0.2
  • React Native Tools extension version: 1.2.0
bug fix-in-master resolved
Source
picture canpoyrazoglu

Most helpful comment

Hi @canpoyrazoglu, thanks for reporting.
We found out the reason of such behavior. This PR is intended to fix problem with attachment. Could you please try VSIX with the fix and let us know how it works for you? To try it please do the following:

  • Download and unzip compiled extension VSIX : vscode-react-native-1.3.0.vsix.zip
  • Uninstall extension
  • Close VS Code
  • Open VS Code
  • Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

I a bit modified your guide about how to reproduce the issue. You can use it to check if the problem has been fixed:

  1. Have an attach configuration like this:
  {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true
  }
  1. Open Vscode and React Native project. Start packager either via Vscode or externally, but _do not attach to packager_.
  2. Have another debugger listen on the debugger port, e.g. React Native Debugger.
  3. Try to launch Vscode RN debugger. It _will_ naturally fail with the error as external debugger is attached:
An error occurred while attaching debugger to the application. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505) (error code 1410)
  1. Terminate the external debugger.
  2. Try to attach to debugger by running Attach to packager debugging scenario.
  3. Reload the application by opening Dev menu and clicking Reload button (on a device/emulator).
  4. The debugger should attach to the application
picture RedMickey on 20 Jan 2021
👍2 ❤1 🎉1

All 3 comments

Hi @canpoyrazoglu, thanks for reporting.
We found out the reason of such behavior. This PR is intended to fix problem with attachment. Could you please try VSIX with the fix and let us know how it works for you? To try it please do the following:

  • Download and unzip compiled extension VSIX : vscode-react-native-1.3.0.vsix.zip
  • Uninstall extension
  • Close VS Code
  • Open VS Code
  • Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

I a bit modified your guide about how to reproduce the issue. You can use it to check if the problem has been fixed:

  1. Have an attach configuration like this:
  {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true
  }
  1. Open Vscode and React Native project. Start packager either via Vscode or externally, but _do not attach to packager_.
  2. Have another debugger listen on the debugger port, e.g. React Native Debugger.
  3. Try to launch Vscode RN debugger. It _will_ naturally fail with the error as external debugger is attached:
An error occurred while attaching debugger to the application. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505) (error code 1410)
  1. Terminate the external debugger.
  2. Try to attach to debugger by running Attach to packager debugging scenario.
  3. Reload the application by opening Dev menu and clicking Reload button (on a device/emulator).
  4. The debugger should attach to the application
RedMickey picture RedMickey on 20 Jan 2021
👍2 ❤1 🎉1

@canpoyrazoglu Do you have a chance to look at this?

RedMickey picture RedMickey on 26 Jan 2021

@RedMickey Yes. I can verify that using the VSIX you've attached solves the issue. After installing the VSIX I've tried launching RN debugger through Vscode various sessions when external React Native Debugger was attached, and it gave the error when external was running (expectedly), but after closing it I tried Vscode debugger and it attached/started to debug correctly.

canpoyrazoglu picture canpoyrazoglu on 28 Jan 2021
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jacky9425 picture Jacky9425  ·  4Comments
molant picture molant  ·  3Comments
Gabemb picture Gabemb  ·  4Comments
kevinnguy picture kevinnguy  ·  3Comments
SounD120 picture SounD120  ·  4Comments