can't copy object JS Debugger (DevTools) on SDK 50

[boblitex]

Minimal reproducible example

https://github.com/boblitex/CiaoChow

What platform(s) does this occur on?

Android, iOS

Did you reproduce this issue in a development build?

Yes

Summary

PS: PLEASE IGNORE THE MINIMAL REPRODUCIBLE LINk, IT'S A RANDOM REPO, AS I DON'T NEED ONE FOR THIS ISSUE

when I open the DevTools and log Objects, there's a neat little 'copy object' on right click that makes debugging a breeze
and used to work well on older SDKs (49) but only copies the first object curly braces now and calls it a day.

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.4.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
Watchman: 2023.02.20.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /var/folders/ng/hbd0mdbd7b12jqs2pcgcry3r0000gn/T/frum_72693_1713872443406/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
Android SDK:
API Levels: 31, 32, 33, 33, 34
Build Tools: 30.0.3, 31.0.0, 33.0.1, 33.0.2, 34.0.0
System Images: android-31 | Intel x86 Atom_64, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-33 | Google Play ARM 64 v8a
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 15.3/15E204a - /usr/bin/xcodebuild
npmPackages:
expo: ~50.0.17 => 50.0.17
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.73.6 => 0.73.6
react-native-web: ~0.19.6 => 0.19.10
react-navigation: ^4.4.4 => 4.4.4
npmGlobalPackages:
eas-cli: 7.8.2
expo-cli: 6.3.10
Expo Workflow: bare

Expo Doctor Diagnostics

npx expo-doctor@latest
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check for common project setup issues
✔ Check native tooling versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[expo-bot]

Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.

The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.

A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.

Resources

• "How to create a Minimal, Reproducible Example"
• "How to narrow down the source of an error"

Common concerns

"I've only been able to reproduce it in private, proprietary code"

You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.

"I didn't have time to create one"

That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.

"You can reproduce it by yourself by creating a project and following these steps"

This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.

[brentvatne]

repro'd this with the following in sdk 50:

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button title="Click me" onPress={() => console.log({ my: 'object', example: 'value ' })} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

i also repro'd on sdk 51

[expo-bot]

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[byCedric]

This is an issue upstream in React Native, see facebook/react-native#43258. (cc @brentvatne)

[brentvatne]

thanks for the heads up @byCedric!

[brentvatne]

this is resolved in sdk 51 (currently in beta, to be released soon)