TypeError: global.nativeTraceBeginSection is not a function (Systrace)

[moiseshilario]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: react-native-cli: 2.0.1, react-native: 0.46.1
2. node -v: v7.10.0
3. npm -v: 4.6.1
4. yarn --version (if you use Yarn): Not used in this bug

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS Sierra v 10.12

• Build tools: Xcode Version 8.3.3 (8E3004b)

I'm running react-native run-ios deploying to iOS emulator Version 10.0 (SimulatorApp-745.10), running iOS 10.3 in an iphone 6.

Steps to Reproduce

(Write your steps here:)

1. Run react-native run-ios with Systrace enabled

2. Reload your app (manually or with live/hot reload)

3. Check the logs

Expected Behavior

The app should reload normally.

Actual Behavior

The error TypeError:global.nativeTraceBeginSection gets launched into the console:

And in the UI:

After that, the whole emulator crashes and the only way to restore it is running react-native run-ios again.
One temporary workaround to get rid of this error is disabling Systrace in the DevMenu, but this is less than ideal.

Reproducible Demo

https://snack.expo.io/ryCtYZHrZ

Observation: Even though I included a snack, I'm afraid you can't fully reproduce this problem without a Mac and an iOS emulator, the reason being that the Systrace is not an Expo function.

[janicduplessis]

I just discussed this with @javache and it seems like the issue is that Systrace is currently broken with the c++ bridge because the module currently doesn't get compiled for the OSS build.

For some reason I did not get that crash but instead no JS trace were reported in the trace I recorded.

[sportsbench]

@janicduplessis any idea when a fix for this will be pushed? This is causing serious development time problems for me.

[javiercr]

Same problem on v0.47, I was hoping for this commit by @gaearon to fix systrace, but it seems for some reason it still doesn't work ¯\_(ツ)_/¯

[gaearon]

I didn’t fix anything related to C++ bridge.

[javiercr]

Ops, thanks for the clarification and sorry about the confusion! Let's hope for that C++ bridge fix!

[javache]

I'm aware of this issue. We currently don't have these methods on the C++ bridge since the C++ implementation depends on fbsystrace, which is not open-source. As a workaround, you can revert back to RCTBatchedBridge (ReactLegacy), we'll try to find a solution for this soon.

[javiercr]

@javache what would be the process to "revert to RCTBatchedBridge"? Do you mean just using and older RN release?

As explained in #15371, without systrace and without proper JS remote debugging, with the current release of RN is quite hard to debug any performance problem, so any guidance on how to do this would be more than appreciated! Thanks!

[almost]

Does anyone have any workarounds for this? Or any hints about how to revert to RCTBatchedBridge. Seems like this was a pretty vital part of the RN development process, how on earth does one fix performance issues without being able to see where they are?

[almost]

Ok, here's how to switch back to RCTBatchedBridge. First you need to make sure the bridge is being created with a delegate, I think this might be default for new projects but if you have an existing project you may need to change it. Here's the code from my AppDelegate.m:

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
                                         launchOptions:launchOptions];
  
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"yourapp" initialProperties:nil];

You then need the delegate method for getting the sourceURL and ALSO a new method called "shouldBridgeUseCxxBridge" to tell RN not to use the CxxBridge. Both of these should be added to AppDelegate:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
}

- (BOOL)shouldBridgeUseCxxBridge:(RCTBridge *)bridge {
  return NO;
}

At this point your project will crash when you start it. The files needed for the BatchedBridge aren't included in the xcode project. So you'll need to add them by right clicking on React.xcodeproj in xcode and selecting Add files to "React.xcodeproj". You need the following files:

./node_modules/react-native/React/Base/RCTBatchedBridge.mm
./node_modules/react-native/React/Executors/
./node_modules/react-native/React/Profiler/RCTJSCProfiler.h
./node_modules/react-native/React/Profiler/RCTJSCProfiler.m

You should now be able to start the project and use SysTrace again!

Of course you have to re-add those files every time you setup the code, those changes won't be saved to git. I'm sure you could add a script to do it to package.json's install section but I'm really hoping this gets fixed properly soon as I'm sure people outside Facebook also need to write React Native apps that don't suck (and I don't see how to do that without SysTrace to make them fast).