react-native-firebase-perf-tracer
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Performance Measure

This is a small API based on Firebase Perform library.

Install

npm install --save react-native-firebase-perf-tracer
// or
yarn add react-native-firebase-perf-tracer

Dependencies

  • react-native 0.61 or above
  • @react-native-firebase/perf 6.3.4 or above
// Install dependencies
npm install --save  @react-native-firebase/perf
// or
yarn add @react-native-firebase/perf

How to use it?

The most complete/automatic implementation can be easily get by the use of the it's Higher-Order Component. Here is a sample on how to use the Higher-Order Component on your components:

// raw-compoent.tsx
import React from 'react';
import { View, Text } from 'react-native';
import { PerformanceMeasureHOCTypeProps } from '../infra/performance/types.d';
 
interface Props extends PerformanceMeasureHOCTypeProps {
  yourProp: String;
}
 
class RawComponentClass extends React.Component<Props{}> {
  constructor(props: Props) {
    super(props);
    // Now you have access to props defined in PerformanceMeasureHOCTypeProp
  }
}
 
export const RawComponent = withPerformanceMeasure(
  RawComponentClass,
  'RawComponentClass'
);

Now you have access to the pops created by the HOC described as:

interface PerformanceMeasureHOCTypeProps {
    performance: PerformanceMeasureHookType;
    profileTracerReady: () => void;
    profileTracerFail: () => void;
    profileTracerSession: PerformanceMeasureSession | undefined;
}

Breaking it down

performance: A performance instance of a PerformanceMeasureHookType already set to the provided identifier.

profileTracerReady: A simple callback to finish profileTracerSession

profileTracerFail: It finishes the profileTracerSession and set the fail attribute to true.

profileTracerSession: An already running session named profiler, which implements React.Profiler to get mount_time among and updates count, it is set to Firebase Perf Dashboard as [SNAKE_CASE_OF_PROVIDED_IDENTIFIER]::profiler it can be user to set your own attributes and metrics (Limited to 35)

Performance Measure Hook

Use it in your functional components like this:

import { PerformanceMeasureHOCTypeProps, usePerformanceMeasure } from '../infra/performance';
...
export const RawComponentFunction = React.FC<Props>() => {
    const performance = usePerformanceMeasure('RawComponent');
  ...
};

You should provide a identifier to be used in Firebase Perf Dashboard. The performance object implents PerformanceMeasureHookType.

interface PerformanceMeasureHookType {
    startTraceSession(name: string): Promise<PerformanceMeasureSession>;
    completeTraceSession(name: string): void;
    failTraceSession(name: string): void;
    traceMethod: TraceMethodType;
}

Breaking it down:

startTraceSession: Creates a new trace session appending the session name as provided [IDENTIFIER]::[SESSION_NAME] and returns an instance of PerformanceMeasureSession. It is described here.

completeTraceSession: A simple method to finish a tracer session.

failTraceSession: It finishes the tracer session and set the fail attribute to true.

traceMethod: For convenience, you can use this to wrap your methods so they can be tracked automatically.

Here is example of functional component we will be using:

// raw-compoent.tsx
import React from 'react';
import { View, Text } from 'react-native';
 
interface Props {
  yourProp: String;
}
 
export const RawComponentFunction = React.FC<Props>() => {
  const [isReady, setComponentReady] = React.useState<boolean>(false);
  const [error, setError] = React.useState<string>();
 
  const doSomethingReallyExpensive = async () => {
    const response = await getFromNetwork();
    await doSomethingThatTakesAWhile()
    await doSomethingThatTakesAWhileAgainWhyNot();
  }
 
  const doAnotherExpensiveThing = async () => {
    return await callSomeMethodHere();
  };
 
  const loadContent = async () => {
    setError();
    try {
      await doSomethingReallyExpensive();
      await doAnotherExpensiveThing();
    } catch (error) {
      setError(error.message);
    } finally {
      setComponentReady(true);
    }
  }
 
  const renderLoading = () => <View style={styles.loadingOverlay} />;
 
  const renderContent = () => {
    if (error) {
      return <Error message={error} retry={start} />
    }
 
    return (
      <View style={styles.container}>
        ...
      </View>
    );
  };
 
  React.useEffect(() => {
        loadContent();
    }, []);
 
  return isReady ? renderContent() : renderLoading();
};

Here is after the implementation diff:

// raw-compoent.tsx
import React from 'react';
import { View, Text } from 'react-native';
+ import { PerformanceMeasureHOCTypeProps, withPerformanceMeasure } from '../infra/performance';
 
- interface Props extends PerformanceMeasureHOCTypeProps {
+ interface Props extends PerformanceMeasureHOCTypeProps {
  yourProp: String;
}
 
- export const RawComponentFunction: React.FC<Props> = () => {
+ export const RawComponentFunction: React.FC<Props> = withPerformanceMeasure(({
+  performance,
+  profileTracerReady,
+ profileTracerFail,
+  profileTracerSession,
+ }) => {
    const [isReady, setComponentReady] = React.useState<boolean>(false);
    const [error, setError] = React.useState<string>();
 
    const doSomethingReallyExpensive = async () => {
+ const myTraceSession = await performance.startTraceSession('do_something_really_expensive');
-   const response = await getFromNetwork();
+   const response = await myTraceSession.traceCodeSection(async () => {
+ return await getFromNetwork();
+   }, 'get_from_network');
+ 
-   await doSomethingThatTakesAWhile()
-   await doSomethingThatTakesAWhileAgainWhyNot();
+   await myTraceSession.traceCodeSection(async () => {
+    await doSomethingThatTakesAWhile()
+    await doSomethingThatTakesAWhileAgainWhyNot();
+   }, 'do_something_that_takes_a_while');
+ 
+    performance.completeTraceSession('do_something_really_expensive');
    };
 
- const doAnotherExpensiveThing = async () => {
+ const doAnotherExpensiveThing = performance.traceMethod(async () => {
    return await callSomeMethodHere();
-  };
+ }, 'do_another_expensive_thing');
 
  const loadContent = async () => {
    setError(undefined);
    try {
      await doSomethingReallyExpensive();
      await doAnotherExpensiveThing();
+ profileTracerReady();
    } catch (error) {
      setError(error.message);
+ profileTracerFail();
    } finally {
      setComponentReady(true);
    }
  }
 
  const renderLoading = () => <View style={styles.loadingOverlay} />;
 
  const renderContent = () => {
    if (error) {
      return <Error message={error} retry={loadContent} />
    }
 
    return (
      <View style={styles.container}>
        ...
      </View>
    );
  };
 
  React.useEffect(() => {
        loadContent();
    }, []);
 
  return isReady ? renderContent() : renderLoading();
- }
+ }, 'raw_component_id');

Performance Measure Session

abstract class PerformanceMeasureSessionType {
    async startTraceSession(): void;
    completeTraceSession(): void;
    startLoading(loadingName: string): StopLoadingCallback;
    putAttribute(attributeName: string, value: string): void;
    incrementMetric(metricName: string, incrementBy: number): void;
}

License

Contributing

Contributions are very welcome!

From Developers

Made with ❤️ by Zenklub developer team.

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-firebase-perf-tracer

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

55.6 kB

Total Files

46

Last publish

Collaborators

  • rx.rossi
  • aminer