Promise polyfill and async/await transpliation make it hard to debug

Description:

During debugging, stack traces of code that contains Promises doesn’t supply data about code executed before promise resolution.

That is because currently have two mechanisms in place:

1. Promises are polyfilled using promise
2. async/await is transpiled using regenerator.

We can get a pretty stack trace if we manage to turn off the Promise polyfill and regenerator transpliations.

1. Promise polyfill can be removed on both iOS (Supported from iOS 10 which is React Native’s new minimum & Android (JSCore & Hermes on Android support native Promises). Should be tested thoroughly to make sure the native implementations work as expected and are stable.

2. Regenerator (async await) can’t be removed yet (as Hermes doesn’t support it and iOS minimum is iOS 12), but maybe we can supply an easy option to turn it off (using some flag in metro?)

React Native version:

0.61

Steps To Reproduce

1. Create a react-native project
2. Write code with async/await or Promises
3. Debug
4. Put a breakpoint after promise resolution (inside .then() callback or after await
5. Look at the stack trace

Expected Results

See the full stack trace including code that ran before the Promise was initiaited, as is supported in Chrome DevTools.

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

How the stack trace looks currently (bad): How the stack trace looks with native Promise & async/await (good):

Code taken from open source project react-native-demo

[EdenGottlieb]

(using native Promise works fine)

@EdenGottlieb could you please share how did you manage to disable React Native’s Promise polyfill?

Sure. This was a long time ago, so I can’t recall it perfectly, and it may not work on recent versions, so take this with a pinch of salt. It worked in a “hello world” app but didn’t do so well in a full fledged app.

For using native Promise: node_modules/react-native/Libraries/Core/InitializeCore.js: Comment out this line: require('./polyfillPromise');

For native async-await (this one caused me most of the problems):

1. node_modules/react-native/Libraries/Core/InitializeCore.js: Comment out this line: require('./setUpRegeneratorRuntime');
2. node_modules/metro-react-native-babel-preset/src/configs/main.js: From the defaultPlugins array, remove the entry with @babel/plugin-transform-regenerator (should look something like [require("@babel/plugin-transform-regenerator")])

Good luck!

[SimpleCreations]

(using native Promise works fine)

@EdenGottlieb could you please share how did you manage to disable React Native’s Promise polyfill?