Documentation
Help CenterCommunityDevelopersAcademyStatus

Custom API instrumentation of React Native SDK

Suggest Edits

Overview

You can instrument the React Native SDK to capture and log custom data for your application such as logging screen view names, custom events, and capturing layouts. The custom instrumentation is done by calling the specific Tealeaf APIs. Follow the examples provided here to enable custom instrumentation.

Log screen view name

Add the following syntax to log loading a new screen view name or unloading a screen view name. These logs are captured as a Tealeaf type 2 message object.

logScreenViewContextLoad(logicalPageName, referrer)
logScreenViewContextUnload(logicalPageName, referrer)

Where

  • logicalPageName is the page name or title, for example, Login View Controller. The value cannot be empty.
  • referrer is the page name or title that loads the logicalPageName. The value can be empty.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var result1 = await Tealeaf.logScreenViewContextLoad("TestPage", null);
  console.log("logScreenViewContextLoad", result1);
  var result2 = await Tealeaf.logScreenViewContextUnload("TestPage", null);
  console.log("logScreenViewContextUnload", result2);
  var result3 = await Tealeaf.logScreenViewContextLoad("TestPage2", "TestPage");
  console.log("logScreenViewContextLoad", result3);
  var result4 = await Tealeaf.logScreenViewContextUnload("TestPage2", "TestPage");
  console.log("logScreenViewContextUnload", result4);
} catch (e) {
  console.error(e);
}

Log screen view page name

Add the following syntax to log an application context for load. These logs are captured as a Tealeaf type 2 message object.

logScreenViewPageName:(NSString*)logicalPageName resolver:

Where

  • logicalPageName is the page name or title, for example, Login View Controller. The value cannot be empty.
  • referrer is the page name or title that loads the logicalPageName. The value can be empty.

Set current screen name

Add the following syntax to save the current application page name.

setCurrentScreenName:(NSString*)logicalPageName resolver

Where

  • logicalPageName is the page name or title, for example, Login View Controller. The value cannot be empty.

A boolean value is returned to denote if the screenname was saved or not.

Example:

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Left, Right, Body, Text } from "native-base";
import styles from "./styles";

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

class Header1 extends Component {
 render() {
   Tealeaf.setCurrentScreenName("HomePage");
   return (
     <Container style={styles.container}>
       <Header>
         <Left />
         <Body>
           <Title>Header</Title>
         </Body>
         <Right />
       </Header>

       <Content padder>
         <Button onPress={() => this.props.navigation.goBack()}>
           <Text>Back</Text>
         </Button>
       </Content>
     </Container>
   );
 }
}
export default Header1;

Capture event listener actions & IDs

iOS & Android automatically capture click events. Check the configuration steps and update your config files accordingly. These logs are captured as a Tealeaf type 4 message object.

📘

Note:

Automatic click ID capture is only supported on iOS.

With how react-native renders dom elements to native components, users often click event bubbles up from the text inside the button or the view directly outside. Therefore, you can add an accessibilityLabel property to the surrounding elements and use it as the ID in the Tealeaf dashboard.

<View accessibilityLabel={"lets_go"} style={{ marginBottom: 80 }}>
  <Button
    accessibilityLabel={"lets_go"}
    style={{ backgroundColor: "#6FAF98", alignSelf: "center" }}
    onPress={() => this.props.navigation.openDrawer()}
  >
    <Text accessibilityLabel={"lets_go"}>Lets Go!</Text>
  </Button>
</View>

Log custom event

Add the following syntax to log a custom event. The custom event is captured as a Tealeaf type 5 message object.

logCustomEvent(eventName, values, level)

Where

  • eventName is the name of the event to be logged. This event name appears in the posted json.
  • values are the additional key-value pairs to be logged with the message.
  • level is the set log level for that event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var dict = { shopping: "done" };
  var result = await Tealeaf.logCustomEvent("ShopClick", dict, 3);
  console.log("logCustomEvent", result);
} catch (e) {
  console.error(e);
}

Log exception event

Add the following syntax to log an exception event. The message of the error/ exception to be logged appears in the posted JSON. 

(logExceptionEvent: message stack: stackInfo unhandled: (BOOL) unhandled

Where

  • stackInfo is the stack trace to be logged with the message.
  • unhandled whether exception is unhandled.
  • Boolean is the value returned whether it was able to log the exception event.

Capture layout

Add the following syntax to capture the layout of the page. The layout is captured as a Tealeaf type 10 message object.

logScreenLayout(screenViewName)

Where screenViewName is the screen view name used for the page in the replay.

📘

Note:

Add this during the componentDidMount lifecycle event which is triggered when everything is displayed on the page.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

class Home extends Component {
  componentDidMount() {
    Tealeaf.logScreenLayout("Home");
  }

Capture gestures

Gestures are captured automatically as a Tealeaf type 11 message object.

Log geolocation

Add the following syntax to capture geolocation. Geolocation is captured as a Tealeaf type 13 message object.

logLocation()
logLocationWithLatitudeLongitude(latitude, longitude, level)

Where

  • latitude is the geographic latitude of the user.
  • longitude is the geographic longitude of the user.
  • level is the monitoring level of the event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var result1 = await Tealeaf.logLocation();
  console.log("logLocation", result1);
  var result2 = await Tealeaf.logLocationWithLatitudeLongitude(37.7749, 122.4194, 2);
  console.log("logLocationWithLatitudeLongitude", result2);
} catch (e) {
  console.error(e);
}

Capture errors

All UI and event errors are captured and logged automatically.

Configure key value

Set boolean value for a key

Add the following syntax to update the Boolean value setting for a key in the EOCore or Tealeaf modules.

setBooleanConfigItemForKey(key, value, moduleName)

Where

  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the GetImageDataOnScreenLayout config.
Tealeaf.setBooleanConfigItemForKey("GetImageDataOnScreenLayout", true, moduleNameTealeaf);

Get boolean value for a key

Add the following syntax to get the boolean value from a key in a certain module.

getBooleanConfigItemForKey(key, moduleName)

Where

  • key is the key required to get the value in configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var result = await Tealeaf.getBooleanConfigItemForKey("DoPostAppComesFromBackground", true, 'EOCore');
  console.log("getBooleanConfigItemForKey", result);
} catch (e) {
  console.error(e);
}

Set string value

Add the following syntax to update the String value setting for a key in the EOCore or Tealeaf modules.

setStringItemForKey(key, value, moduleName)

Where key

  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the appkey for payload to use.
Tealeaf.setStringItemForKey("PostMessageUrl", "http://collector.com/collector/collectorPost", moduleNameTealeaf);

Get string value for a key

Add the following syntax to get the string value from a key in a certain module.

getStringItemForKey(key, moduleName)
  • key is the key required to get the value in configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var result = await Tealeaf.getStringItemForKey("MessageVersion", 'EOCore');
  console.log("getStringItemForKey", result);
} catch (e) {
  console.error(e);
}

Set Number value for a key

Add the following to update the number value setting in the EOCore or Tealeaf modules.

setNumberItemForKey(key, value, moduleName)

Where key

  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;
 
var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the appkey for payload to use.
Tealeaf.setNumberItemForKey("PostMessageUrl", "http://collector.com/collector/collectorPost", moduleNameTealeaf);

Get number value for a key

Add the following syntax to get the number value from a key in a certain module.

getNumberItemForKey(key, moduleName)

Where

  • key is the key required to get the value in the configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Tealeaf = NativeModules.RNCxa;

try {
  var result = await Tealeaf.getNumberItemForKey("PostMessageLevelCellular", 'EOCore');
  console.log("getNumberItemForKey", result);
} catch (e) {
  console.error(e);
}

Updated 5 months ago