"console.dir" statements in Release builds cause code execution to stop

[paperbackdragon]

Problem Description

If you have a console.dir statement in your code, such as to pretty-print an object for debugging purposes, and you create a Release build with that code in it, any code after that statement won't run. In particular I reproduced this with the onKeyDown handler in a View, and the onPress handler in a Pressable component.

I reproduced this in a standalone basic app, using the npx react-native init and npx react-native-windows-init commands on the RNW homepage. At the bottom of my post is the full TS for the example app I tested with.

Steps To Reproduce

1. Make a basic RNW app with some code that executes in Pressable's onPress handler, such as:

const TestView: () => JSX.Element = () => {
  const [text, setText] = React.useState('Button text');

  return (
    <Pressable
      focusable
      accessible
      accessibilityLabel={'test label'}
      accessibilityRole="button"
      onPress={() => {
        setText('Before test');
        console.dir('test');
        setText('After test');
      }}>
      <Text accessibilityLiveRegion={'assertive'}>{text}</Text>
    </Pressable>
  );
};

2. Build the app in "Release" mode
3. Click on the Pressable you made
4. Notice that the text on the page changed to Before test, and not After test. None of the code after console.dir will have executed.

Expected Results

All the code in the onPress handler should have executed, even if in a Release build console.dir doesn't do anything. In this case, the second setText call should have happened.

CLI version

9.1.1

Environment

PS D:\git\BasicTestApp2> npx react-native info
info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.25203
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 108.33 GB / 127.71 GB
  Binaries:
    Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.17134.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.32802.440 (Visual Studio Enterprise 2019), 17.3.32804.467 (Visual Studio Enterprise 2022)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.0 => 0.70.0
    react-native-windows: 0.70.0 => 0.70.0
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Release

Snack, code example, screenshot, or link to a repository

import React from 'react';
import {
  Pressable,
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {Colors, Header} from 'react-native/Libraries/NewAppScreen';

const TestView: () => JSX.Element = () => {
  const [text, setText] = React.useState('Button text');

  return (
    <Pressable
      focusable
      accessible
      accessibilityLabel={'test label'}
      accessibilityRole="button"
      onPress={() => {
        setText('Before test');
        console.dir('test');
        setText('After test');
      }}>
      <Text accessibilityLiveRegion={'assertive'}>{text}</Text>
    </Pressable>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <TestView />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

[asklar]

is there an error shown in the debugger? I imagine this could be because the dir function might not be implemented in console when in Release.

[paperbackdragon]

There's an exception in the output, the message isn't very helpful though:

Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FD960.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FD460.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FCD50.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FD460.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6F6210.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FAC00.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FB410.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FBBC0.
Exception thrown at 0x00007FFFDF6A50EC in BasicTestApp2.exe: Microsoft C++ exception: Js::JavascriptException at memory location 0x000000E04E6FCD50.

It's understandable that .dir wouldn't be implemented in Release mode, but I figured it should be a no-op instead of stopping code execution.

[chrisglein]

It's understandable that .dir wouldn't be implemented in Release mode, but I figured it should be a no-op instead of stopping code execution.

Agreed. There's a polyfill of console for RN that's not specific to RNW. Does this work the same on other platforms? I'd expect so, but let us know if not. As is, this is behaving the same as core this is behaving by design.

[paperbackdragon]

Ah, not sure if it does the same thing on other platforms, I'm currently not well-set-up to test on other platforms. I guess I'll re-open this if we get to our Mac implementation and find it's not an issue there.