open in editor #34

[silasjmatson]

Implement Open In Editor functionality:

• Update standalone-server to be resilient to client disconnects
• Add StackFrameRow component to display stack frames
• Send "editor.open" command when stack frame is clicked

manual testing

In your test app, place a throw new Error("some error") somewhere you can manually trigger it
In your test app reactotron config, make sure you have the following:

  reactotron.useReactNative({
    networking: {
      ignoreUrls: /symbolicate/,
    },
    editor: false, // Disable the built-in editor plugin
    errors: {
      veto: (frame) => {
        // NOTE: Despite what the docs say, the implementation uses filter()
        // so return TRUE to KEEP the frame, FALSE to REMOVE it
        // Keep frames that are NOT from React Native internals
        return !(
          frame.fileName.includes("node_modules/react-native/") ||
          frame.fileName.includes("node_modules/@react-native/") ||
          frame.fileName.includes("node_modules/expo-router/") ||
          frame.fileName.includes("node_modules/@expo/") ||
          frame.fileName.includes("node_modules/metro/")
        )
      },
    },
  })

reactotron.use(openInEditor({ url: "http://localhost:8082/" })) // MAKE SURE THIS IS THE CORRECT PORT for the metro packager running the mobile app

Ensure you have EXPO_EDITOR or EDITOR set to a gui editor that can be called from the terminal.

closes #34

[stevenconner]

Having an issue where when i try to throw an error, i'm getting "Unable to parse stack trace from error object" in the log.
How i did it:

updated my reactotron config file to be this:

import { reactotronRedux } from "reactotron-redux";

const reactotron = Reactotron.configure({
  name: "AskSeekKnock",
  port: 9292,
  onConnect: () => {
    Reactotron.log(
      `Reactotron app ${Reactotron.options.name} connected to standalone server.`,
    );
  },
})
  .useReactNative({
    networking: {
      ignoreUrls: /symbolicate/,
    },
    editor: false, // Disable the built-in editor plugin
    errors: {
      veto: (frame) => {
        // NOTE: Despite what the docs say, the implementation uses filter()
        // so return TRUE to KEEP the frame, FALSE to REMOVE it
        // Keep frames that are NOT from React Native internals
        return !(
          frame.fileName.includes("node_modules/react-native/") ||
          frame.fileName.includes("node_modules/@react-native/") ||
          frame.fileName.includes("node_modules/expo-router/") ||
          frame.fileName.includes("node_modules/@expo/") ||
          frame.fileName.includes("node_modules/metro/")
        );
      },
    },
  })
  .use(reactotronRedux())
  .connect();

reactotron.use(openInEditor({ url: "http://localhost:8082" })); // MAKE SURE THIS IS THE CORRECT PORT for the metro packager running the mobile app

console.tron = Reactotron;

export default reactotron;

added throw new Error("some error") to a useEffect that runs only on mount in a modal component in my app
also tried doing throw new Error("some error") on a button press in that same modal component

[joshuayoes]

@stevenconner I think that is actually a bug in reactotron-react-native right now: infinitered/reactotron#1573

[stevenconner]

good point, not sure how we can test this without having those stack frames to click on though 😅

[joshuayoes]

I have an idea of how to fix it here, but unfortunately I think this is blocked until we resolve the issue: infinitered/reactotron#1573 (comment)

[joshuayoes]

I'll take a stab at it today and hopefully get this unblocked.

[joshuayoes]

I think I got a fix here: infinitered/reactotron#1588

@silasjmatson if you want to give this a try before this PR gets merged, you can use the test steps from this PR in your test app for reactotron-macos