Repository: microsoft/vscode-react-native

Issue #363: VS code debugging crashes with react native and realm-js
Created: 2016-12-10T07:05:29Z
Actual Behavior

debugging crashes on react native 0.39, vscode 1.7.2, realm 0.15.0

Expected Behavior

Could able to debug the app with Realm-JS

Software versions

React-Native VS Code extension version: 1.7.2
VSCode version: 1.7.2
OS platform and version: mac os 10.12.1
NodeJS version: 7.2.1
React Native version: 0.39

Outputs (Include if relevant)
[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.
Error: socket hang up
at doRequest (/Users/admin/Documents/Development/react-native/lang-app/languageApp/node_modules/sync-request/index.js:37:11)
at makeRequest (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:73531:14)
at sendRequest (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:73561:14)
at Object.createSession (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:73452:1020)
at /Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:73080:31
at loadModuleImplementation (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:188:1)
at guardedLoadModule (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:140:8)
at _require (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:124:1)
at /Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:72899:18
at loadModuleImplementation (/Users/admin/Documents/Development/react-native/lang-app/languageApp/.vscode/.react/index.ios.bundle:188:1)
Realm failed to connect to the embedded debug server inside the app. If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.

Duplicate issue #955: Unable to debug a React Native app that uses RealmJS
Created: 2019-03-26T15:34:36Z
Actual Behavior
I'm unable to debug inside of VS Code using the "Attach to Packager" configuration when I have a React Native project that includes RealmJS. As soon as the debugger attaches I run into errors.
Expected Behavior
Should be able to debug React Native app inside of Visual Studio Code.
Software versions

React-Native VS Code extension version: 0.9.0
VSCode version: 1.32.3
OS platform and version: macOS Mojave 10.14.3
NodeJS version: 8.15.1
React Native version: 0.59.2
Expo SDK version (include if relevant): N/A

Outputs (Include if relevant)

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

OS: darwin x64
Adapter node: v10.2.0 x64
vscode-chrome-debug-core: 6.7.40
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 10569
Require cycle: node_modules/realm/lib/browser/collections.js -> node_modules/realm/lib/browser/util.js -> node_modules/realm/lib/browser/collections.js
require.js:114
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Error: socket hang up
ExceptionsManager.js:82
Realm failed to connect to the embedded debug server inside the app. If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.
ExceptionsManager.js:74
Unable to find module for EventDispatcher
ExceptionsManager.js:82
Running application DebugRealm ({
RCTLog.js:47
    initialProps =     {
    };
    rootTag = 61;
})
Module AppRegistry is not a registered callable module (calling runApplication)
ExceptionsManager.js:74
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Realm failed to connect to the embedded debug server inside the app. If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.
ExceptionsManager.js:82
Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host


launch.json

{
    "configurations": [
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }

    ]
}

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Realm from 'realm';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { realm: null };
  }

  componentWillMount() {
    Realm.open({
      schema: [{name: 'Dog', properties: {name: 'string'}}]
    }).then(realm => {
      realm.write(() => {
        realm.create('Dog', {name: 'Rex'});
      });
      this.setState({ realm });
    });
  }

  render() {
    const info = this.state.realm
    ? 'Number of dogs in this Realm: ' + this.state.realm.objects('Dog').length
    : 'Loading...';

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{info}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
Before I Attach the debugger from VS Code

After I attach the debugger from VS Code


Steps to reproduce
Terminal

react-native init ProjectName
cd ProjectName
yarn add realm
react-native link realm
react-native run-ios

iOS simulator (once app has loaded)

cmd + d > Debug JS Remotely

Chrome

Close debug window

VS Code

Run Debug "Attach to packager"

iOS simulator

Reload app so that the debugger attaches in VS Code

Closing comment (2019-03-26T18:48:15Z): This seems very similar to #363 which was a issue a couple of years ago. Pretty much identical error messages.