Systrace

إن Systrace هي أداة تعريف الأداء وتعتمد على العلامات (marker-based profiling tool) المعيارية لمنصة Android (وتُثبّت مع حزمة أدوات منصّة Android). تُحاط كتل الشفرة البرمجيّة المشخَّصة بوسوم البداية والنهاية فتظهر على شكل مخططٍ ملوَّنٍ. وتحوي كلا المنصتين Android SDK وReact Native الوسوم المعيارية التي يمكن إظهارها.

مثال

تسمح Systrace بوسم أحداث JavaScript (JS) بوسمٍ وبقيمةٍ صحيحةٍ. هذا المثال لالتقاط أحداث JS غير المرتبطة بالزمن (non-Timed) ضمن EasyProfiler.

مثال لمكون دالة (Function Component Example)

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

const App = () =>  {

  const enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label')
    Systrace.counterEvent('event_label', 10);
  }

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

  return (
    <View style={styles.container}>
      <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
      <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
      <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
    </View>
  );
}

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,
    textAlign: "center"
  }
});

export default App;

مثال لمكون صنف (Class Component Example )

import React, { Component } from "react";
import { Button, Text, View, StyleSheet, Systrace } from "react-native";

class App extends Component {

  enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label')
    Systrace.counterEvent('event_label', 10);
  }

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

  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
        <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
        <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
      </View>
    );
  }
}

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,
    textAlign: "center"
  }
});

export default App;

التوابع

`installReactHook()`

static installReactHook(useFiber)

`setEnabled()`

static setEnabled(enabled)

`isEnabled()`

static isEnabled()

`beginEvent()`

static beginEvent(profileName?, args?)

يُستخدم لبدء التشخيص.

`endEvent()`

static endEvent()

يُستخدم لإنهاء التشخيص، ويطلب بعد بدء التابع beginEvent() بالتشخيص ضمن إطار مكدس الاستدعاءات.

`beginAsyncEvent()`

static beginAsyncEvent(profileName?)

يُستخدم التابع beginAsyncEvent() لبدء التشخيص ثم يقوم التابعendAsyncEvent() بإنهائه، ويمكن أن يحصل الإنهاء ضمن عمليّةٍ (thread) أخرى أو خارج إطار مكدس الاستدعاءات، مثل انتظار إعادة قيمة المتغير cookie المستخدم كدخل في استدعاء تابع الإنهاء endAsyncEvent().

`endAsyncEvent()`

static endAsyncEvent(profileName?, cookie?)

`counterEvent()`

static counterEvent(profileName?, value?)

يُستخدم لتسجيل قيمة المتغيّر profileName ضمن الخط الزمني Systrace.

مصادر

صفحة Systrace في توثيق React Native الرسميّ