Plan: New Hermes/RNV8 debugger support

[jhen0409]

Related: #573

I'm started experimenting with support for Hermes debugger (it also works on RNV8) on RNDebugger. The main purpose is we can keep the same debug experience with this tool.

Until recently I started using JSI and planning to support new architecture in my projects. Flipper is awesome tool to help me debug more deeper issues, but it have some performance issue in my use cases, I wish we had something more lightweight & out-of-the-box tool like RNDebugger.

I'll start the related work at August, these are some key support items:

• DevTools

  • Use devtools-frontend on Electron webview (You can see the code of how React Native launch the chrome devtools)

• Enable open in editor in console (docs/enable-open-in-editor-in-console.md)

  • react-native-v8 devtools support the file link so we can still use this feature, but Hermes seems not

• Console REPL

  • Hermes behaves differently between iOS and Android when using the console REPL, I can use it on Android but have some weird problems. It is works well with react-native-v8.

• Network tab

  • Expo has great built-in network inspect support on the devtools, we can see if it is can support pure RN projects

• React / Redux (remotedev) / Apollo Client DevTools support

  • Due it not working on WebWorker, we can't do anything script injection, so it will require additional package setup.

• Storage

  • Redux DevTools has a common interface so we can support any libs not limited to state management. I might implement an one for react-native-mmkv by listeners.

The initial version of new debugger implementation will be included in v0.15. Before this, I'll upgrade dependencies & fix some small issues for "old" remote debugger in v0.14.

I'm currently only spending 10~20% of my workday doing it, so any help or advice would be appreciated.

[AJTJ]

Thanks for working on this.

This apparently works with a bare React Native app: https://github.com/gusgard/react-native-devsettings but I have not been able to get it working with Expo in managed workflow. Which is a pretty large portion of people building with react-native.

[jhen0409]

In my test of Expo 49, you can still use the DevSettings by set "jsEngine": "jsc" in app.json, but I saw some other problems, maybe it could be about Chromium version or React DevTools. It nothing happened on hermes, I would suggest you to report the issue with Expo if you really want it to support trigger remote debugging for hermes again.

Also, I hope we should focus on the new debugger support, the new architecture will also usher in stability, it is time to get rid of old remote debugging.

[simonmaquilon]

It's not neccessary to change the jsEngine, instead enabling Debug mode in the Emulator/Simulator/Device/Expo makes that RND works fine... until your next release.

[jduhking]

I’m sorry if this seems like a dumb question but where is Emulator/Simulator/Device/Expo?

[frozencap]

any progress?

[zsomborgellerfi]

Bump🙌

[jhen0409]

There isn't a lot of time available at the moment, and I'm currently focusing less on using the debugger at work (mostly developing for native modules). I hope I'll be motivated to set aside some extra time for that when I switch back to some UI works.

Currently I only do some basic setup on it, you can take a look in the new-debugger branch.

[RobertoJoseph]

I have a question and I don't know If it is related to that or not but after I configured my project with eas build and eas update. the option for Remote Js debugger disappeared and only the Open Debugger option is in the developer menu. Even after clicking on Open debugger, It is not open React native debugger but It opens chrome dev tools one, and I could not debug the redux and all the other stuff. @jhen0409

[eithe]

@RobertoJoseph Probably not the best place for support questions this thread.

[john-mokaied]

[dennzimm]

Just read a little further up the page ...
#774 (reply in thread)

[MarkPan726]

Maybe this is useful:
import { NativeModules } from 'react-native'

if (DEV) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

[Anhunghezo]

I have same issue, react native debugger loop on Android

[JimTeva]

thanks @ruibinch for mentioning this and @gusgard for doing the package!!

[bonnmh]

it's not working for me :(

[VisheshG8]

Thank you so much it helps alot , I spend 1 whole day to find the solution

[DenisDov]

This line is the reason for the crash that occurs immediately after the release app opens. In debug mode it's fine.

[AndriyFedorovich]

Hi jhen0409, I hope you're doing well! How is it going?

[dzengi-com]

@jhen0409 Hi. Maybe there is some news? Thank you

[istvan-panczel]

Ahoy,

For anyone who got frustrated with Hermes and the JS debugger in a React-Native app (I use Expo), here is a quick alternative solution for logging out Redux States (I use Redux Toolkit) while we are waiting for actual dev-friendly tools, I use lodash in my project:

const additionalMiddlewaresInDevMode = __DEV__ ? [stateChangeLogger] : [];

const store = configureStore({
  reducer: persistedReducer,
  devTools: false,
  middleware: [saga, ...additionalMiddlewaresInDevMode],
});

import { isEqual } from 'lodash';
import { AnyAction, Dispatch, Middleware, MiddlewareAPI } from 'redux';

/**
 * Logs the differences between two states
 * This function recursively compares two objects and logs the differences between them.
 *
 * @param prevState - The previous state
 * @param nextState - The next state
 */
function logStateDifferences(prevState: any, nextState: any) {
  const differences: { [key: string]: any } = {};

  // Recursively compare objects for differences
  const compareObjects = (prev: any, next: any, path: string) => {
    Object.keys(next).forEach((key) => {
      const currentPath = path ? `${path}.${key}` : key;

      // Check if the key exists in the previous state
      if (!(key in prev)) {
        differences[currentPath] = {
          a_prev: undefined,
          b_next: next[key],
        };
      }
      // Check if the values are different
      else if (!isEqual(prev[key], next[key])) {
        // If the values are objects, recursively compare them
        if (typeof prev[key] === 'object' && typeof next[key] === 'object') {
          compareObjects(prev[key], next[key], currentPath);
        } else {
          differences[currentPath] = {
            a_prev: prev[key],
            b_next: next[key],
          };
        }
      }
    });
  };

  compareObjects(prevState, nextState, '');

  if (Object.keys(differences).length > 0) {
    console.table(differences);
  } else {
    console.log('%cNo State Differences', 'color: cyan');
  }
}

/**
 * Logs the state before and after the dispatch
 * Use this middleware to log the state before and after the dispatch until we get an actually
 * working Redux Devtools for React-native with Hermes as the JS engine.
 *
 * It groups the logs by the action type and logs the state before and after the dispatch.
 * If the states are identical, it logs that they are identical.
 *
 * @param api - The redux middleware API
 */
const stateChangeLogger: Middleware = (api: MiddlewareAPI) => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
  const previousState = api.getState();
  const result = next(action);
  const afterState = api.getState();

  console.groupCollapsed(`%cAction Dispatched: ${action.type}`, 'color: yellow');
  console.log('%cState Before Dispatch:', 'color: orange', previousState);
  console.log('%cAction:', 'color: yellow', action);
  console.log('%cState After Dispatch:', 'color: orange', afterState);

  if (isEqual(previousState, afterState)) {
    console.log('%cStates are identical', 'color: cyan');
  } else {
    console.groupCollapsed('%cState Differences:', 'color: cyan');
    logStateDifferences(previousState, afterState);
    console.groupEnd();
  }

  console.groupEnd();
  return result; // Return the result of the action dispatch
};

export default stateChangeLogger;

An xample of how does it look like on console:

[Andrewgraemebrooks]

That you so much for this, this is a great solution to use while waiting for some dev-tools. For anyone else who isn't using TypeScript in their project, here is a Javascript version without the Typescript type annotations:

import { isEqual } from 'lodash';

/**
 * Logs the differences between two states
 * This function recursively compares two objects and logs the differences between them.
 *
 * @param {any} prevState - The previous state
 * @param {any} nextState - The next state
 */
function logStateDifferences(prevState, nextState) {
    const differences = {};

    // Recursively compare objects for differences
    const compareObjects = (prev, next, path) => {
        Object.keys(next).forEach((key) => {
            const currentPath = path ? `${path}.${key}` : key;

            // Check if the key exists in the previous state
            if (typeof prev === 'object' && prev !== null && !(key in prev)) {
                differences[currentPath] = {
                    a_prev: undefined,
                    b_next: next[key],
                };
            }
            // Check if the values are different
            else if (!isEqual(prev[key], next[key])) {
                // If the values are objects, recursively compare them
                if (
                    prev[key] !== null &&
                    typeof prev[key] === 'object' &&
                    next[key] !== null &&
                    typeof next[key] === 'object'
                ) {
                    compareObjects(prev[key], next[key], currentPath);
                } else {
                    differences[currentPath] = {
                        a_prev: prev[key],
                        b_next: next[key],
                    };
                }
            }
        });
    };

    compareObjects(prevState, nextState, '');

    if (Object.keys(differences).length > 0) {
        console.table(differences);
    } else {
        console.log('%cNo State Differences', 'color: cyan');
    }
}

/**
 * Logs the state before and after the dispatch
 * Use this middleware to log the state before and after the dispatch until we get an actually
 * working Redux Devtools for React-native with Hermes as the JS engine.
 *
 * It groups the logs by the action type and logs the state before and after the dispatch.
 * If the states are identical, it logs that they are identical.
 *
 * @param api - The redux middleware API
 */
const stateChangeLogger = (api) => (next) => (action) => {
    const previousState = api.getState();
    const result = next(action);
    const afterState = api.getState();

    console.groupCollapsed(`%cAction Dispatched: ${action.type}`, 'color: yellow');
    console.log('%cState Before Dispatch:', 'color: orange', previousState);
    console.log('%cAction:', 'color: yellow', action);
    console.log('%cState After Dispatch:', 'color: orange', afterState);

    if (isEqual(previousState, afterState)) {
        console.log('%cStates are identical', 'color: cyan');
    } else {
        console.groupCollapsed('%cState Differences:', 'color: cyan');
        logStateDifferences(previousState, afterState);
        console.groupEnd();
    }

    console.groupEnd();
    return result; // Return the result of the action dispatch
};

export default stateChangeLogger;

[saxenanickk]

@jhen0409 Any progress on this?

[liquidvisual]

For anyone on Expo trying to get Redux DevTools to work, there's a temporary solution using a plugin. See here

[losh11]

Is anyone interested in making a front end for @istvan-panczel's hook? Instead of console.logging the diff-ed redux state, it's sent to an observing front end app that makes it look all pretty like react-native-debugger?
TBH the loss of being able to see the current redux state + state changes has been a massive pain when debugging.

[istvan-panczel]

I recently had a similar idea!

In addition to using the state logger, I implemented HTTP interceptors to log every request and response, including headers, data, and timestamps. I also added loggers at the DB layer and subscribed to screen changes so that each time a screen is loaded, its name and route parameters are logged.

With these enhancements, I feel confident in my ability to debug any issue in my current contract project. By navigating the app and interacting with it, I can easily see detailed logs. Each type of log has distinct colors and formatting, is expandable, and can be inspected thoroughly. These logging points also facilitated the integration of Sentry into the project.

I'm considering developing a separate application to run locally, which would replace console logging with simple HTTP requests to this app. The idea is to have a small database to store all logs and a user-friendly UI to visualize the state, changes, and activities at the DB and network layers. Although I haven't extensively used the "time-travel" features of the Redux debugger, implementing a feature to apply a specific state to the store of your app at any action point (before or after) seems quite feasible.

[aliffazfar]

Can checkout this 774#discussioncomment-10095554 if you miss the redux time-travel debugging on Hermes

[sigaits]

Since I updated to Expo 50, I have had this problem: if I reload the app while the dev-tools is running, the app crashes on the simulator (as in quits and I have to relaunch it). It only started happening since Expo 50 but it's been a while since I updated and still having the same problem. Is anyone else having this issue?

[DePavlenko]

it might be connected to react-native-reanimated v3.0 and higher
software-mansion/react-native-reanimated#4783

[misbell]

I guess this project is dead in the water, if it can't support Hermes, and there are not updates about it. Too bad, I used it all the time.

[Ahmed-M-Osman1]

Any update guys?

[aliffazfar]

For those who miss Redux DevTools for time-travel debugging and live editing, I’ve managed to make it work for React Native with the Hermes engine.

Checkout my repo: https://github.com/aliffazfar/redux-devtools

The only thing we miss is the network inspector in Chrome, like in the old days. However, we can move on with Reactotron, which works really great for debugging the network, AsyncStorage, and logs.

I have tested and can confirm that RocketSim also work great with React Native to inspect the network. Check this out: https://x.com/AliffAzfar/status/1814121783303569838

[rzfzr]

Does it work with expo?

[losh11]

hey @aliffazfar I'd like to try your fork of redux-devtools. Are you planning to maintain it? If so, can you enable github issues on the repo? Also do you have documentation for RTK (redux toolkit) as the redux documentation strongly reccomends using RTK over the older way.

[eithe]

If you guys haven't seen it you should take a look at https://www.youtube.com/watch?v=b48Lax2-jOQ&t=4350s which was presented a few weeks ago. They are hoping to add redux support for it later, but it will be available without it from 0.76.

[aliffazfar]

hey @aliffazfar I'd like to try your fork of redux-devtools. Are you planning to maintain it? If so, can you enable github issues on the repo? Also do you have documentation for RTK (redux toolkit) as the redux documentation strongly reccomends using RTK over the older way.

You can use official documentation to debug RTK. My fork was only enabling it for those who wanted to debug with hermes engine.

[aliffazfar]

Does it work with expo?

Expo has much better debugger with hermes engines.

[c-goettert]

I just want my redux debug tools back. Bring em baack please 😭

[Matthew-Jimenez]

We should really add https://github.com/gusgard/react-native-devsettings to the readme.