React Native自定义Systrace在Perfetto中无显示问题咨询

问题描述 #

根据React Native官方文档，框架支持Systrace功能，但在项目中添加追踪代码后，用Perfetto录制的结果里看不到新增的event_label事件。实现代码如下：

import React from 'react';
import {
  Button,
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  Systrace,
} from 'react-native';

const App = () => {
  const enableProfiling = () => {
    Systrace.setEnabled(true); // 开启性能分析
    Systrace.beginEvent('event_label');
    Systrace.counterEvent('event_label', 10);
  };

  const stopProfiling = () => {
    Systrace.endEvent();
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={[styles.header, styles.paragraph]}>
        React Native Systrace API
      </Text>
      <View style={styles.buttonRow}>
        <Button
          title="捕获非计时JS事件到EasyProfiler"
          onPress={() => enableProfiling()}
        />
        <Button
          title="停止捕获"
          onPress={() => stopProfiling()}
          color="#FF0000"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 44,
    padding: 8,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 25,
    textAlign: 'center',
  },
  buttonRow: {
    flexBasis: 150,
    marginVertical: 16,
    justifyContent: 'space-evenly',
  },
});

export default App;

点击按钮触发逻辑后，Perfetto中无法看到对应的追踪事件，需要补充哪些React Native侧的配置才能正常显示？

解决配置步骤 #

1. 启用JS层Systrace支持 #

在项目根目录的metro.config.js（无则新建）中添加enableSystrace配置：

module.exports = {
  transformer: {
    enableSystrace: true,
    // 保留原有其他配置
  },
};

修改完成后重启Metro服务，确保配置生效。

2. 开启原生层Systrace标记 #

• Android端：
  在android/app/src/main/java/com/[你的包名]/MainApplication.java的onCreate方法中添加：

  import com.facebook.react.modules.systeminfo.AndroidInfoHelpers;
  
  @Override
  public void onCreate() {
    super.onCreate();
    AndroidInfoHelpers.setIsDebuggable(true);
    // 其他原有初始化代码
  }
  

  或在gradle.properties中补充：

  isDebuggable=true
  

• iOS端：
  在Xcode中打开项目，进入Build Settings确保DEBUG宏已定义；同时在AppDelegate.m的didFinishLaunchingWithOptions方法中添加：

  #import <React/RCTBridge.h>
  
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    [bridge setIsDebuggingEnabled:YES];
    // 其他原有代码
    return YES;
  }
  

3. 配置Perfetto录制数据源 #

使用Perfetto录制时，必须勾选以下关键数据源：

• android_runtime
• java_method
• react_native（若存在该选项）
• 基础系统数据源（如sched、freq、power等）

4. 确保Debug模式运行 #

Systrace仅在Debug模式下生效，需通过react-native run-android/react-native run-ios启动应用，而非Release打包版本。

5. 调整事件触发逻辑 #

当前代码中事件持续时间过短，可能无法被捕获。可添加延时确保事件有足够时长：

const enableProfiling = () => {
  Systrace.setEnabled(true);
  Systrace.beginEvent('event_label');
  Systrace.counterEvent('event_label', 10);
  // 添加1秒延时，确保事件能被录制到
  setTimeout(() => {
    Systrace.endEvent();
  }, 1000);
};

内容的提问来源于stack exchange，提问作者Nazgul