RUM Configuration¶

let rumConfig: FTRUMConfig = {
  androidAppId: Config.ANDROID_APP_ID,
  iOSAppId: Config.IOS_APP_ID,
  enableAutoTrackUserAction: true,
  enableAutoTrackError: true,
  enableNativeUserAction: true,
  enableNativeUserView: false,
  enableNativeUserResource: true,
  errorMonitorType: ErrorMonitorType.all,
  deviceMonitorType: DeviceMetricsMonitorType.all,
  detectFrequency: DetectFrequency.rare,
};

await FTReactNativeRUM.setConfig(rumConfig);

/**
 * view load duration.
 */
onCreateView(viewName: string, loadTime: number): Promise<void>;

/**
 * view start.
 */
startView(viewName: string, property?: object): Promise<void>;

/**
 * view end.
 */
stopView(property?: object): Promise<void>;

import { FTReactNativeRUM } from '@cloudcare/react-native-mobile';

FTReactNativeRUM.onCreateView('viewName', duration);

FTReactNativeRUM.startView('viewName', { 'custom.foo': 'something' });

FTReactNativeRUM.stopView({ 'custom.foo': 'something' });

import { FTRumReactNativeNavigationTracking } from './FTRumReactNativeNavigationTracking';

function startReactNativeNavigation() {
  FTRumReactNativeNavigationTracking.startTracking();
  registerScreens();
  Navigation.events().registerAppLaunchedListener(async () => {
    await Navigation.setRoot({
      root: {
        stack: {
          children: [{ component: { name: 'Home' } }],
        },
      },
    });
  });
}

import { FTRumReactNavigationTracking } from './FTRumReactNavigationTracking';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

<Stack.Navigator
  screenListeners={FTRumReactNavigationTracking.StackListener}
  initialRouteName="Home"
>
  <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
  <Stack.Screen name="Mine" component={Mine} options={{ title: 'Mine' }} />
</Stack.Navigator>;

import { FTRumReactNavigationTracking } from './FTRumReactNavigationTracking';
import type { NavigationContainerRef } from '@react-navigation/native';

const navigationRef: React.RefObject<
  NavigationContainerRef<ReactNavigation.RootParamList>
> = React.createRef();

<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    FTRumReactNavigationTracking.startTrackingViews(navigationRef.current);
  }}
>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
    <Stack.Screen name="Mine" component={Mine} options={{ title: 'Mine' }} />
  </Stack.Navigator>
</NavigationContainer>;

import { useEffect } from 'react';
import { useSegments, usePathname, Slot } from 'expo-router';
import { FTReactNativeRUM } from '@cloudcare/react-native-mobile';

export default function Layout() {
  const pathname = usePathname();
  const segments = useSegments();
  const viewKey = segments.join('/');

  useEffect(() => {
    FTReactNativeRUM.startView(viewKey);
  }, [viewKey, pathname]);

  return <Slot />;
}

/**
 * Start RUM Action.
 */
startAction(actionName: string, actionType: string, property?: object): Promise<void>;

/**
 * Add Action event.
 */
addAction(actionName: string, actionType: string, property?: object): Promise<void>;

import { FTReactNativeRUM } from '@cloudcare/react-native-mobile';

FTReactNativeRUM.startAction('actionName', 'actionType', { 'custom.foo': 'something' });

FTReactNativeRUM.addAction('actionName', 'actionType', { 'custom.foo': 'something' });

/**
 * Exception capture and log collection.
 */
addError(stack: string, message: string, property?: object): Promise<void>;

/**
 * Exception capture and log collection for specified error type.
 */
addErrorWithType(type: string, stack: string, message: string, property?: object): Promise<void>;

import { FTReactNativeRUM } from '@cloudcare/react-native-mobile';

FTReactNativeRUM.addError('error stack', 'error message', { 'custom.foo': 'something' });

FTReactNativeRUM.addErrorWithType('custom_error', 'error stack', 'error message', {
  'custom.foo': 'something',
});

/**
 * Start resource request.
 */
startResource(key: string, property?: object): Promise<void>;

/**
 * End resource request.
 */
stopResource(key: string, property?: object): Promise<void>;

/**
 * Send resource data metrics.
 */
addResource(key: string, resource: FTRUMResource, metrics?: FTRUMResourceMetrics): Promise<void>;

import { FTReactNativeRUM } from '@cloudcare/react-native-mobile';

async function getHttp(url: string) {
  const key = Utils.getUUID();
  FTReactNativeRUM.startResource(key);
  const fetchOptions = {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
  };
  let res: Response;
  try {
    res = await fetch(url, fetchOptions);
  } finally {
    const resource: FTRUMResource = {
      url: url,
      httpMethod: fetchOptions.method,
      requestHeader: fetchOptions.headers,
    };
    if (res) {
      resource.responseHeader = res.headers;
      resource.resourceStatus = res.status;
      resource.responseBody = await res.text();
    }
    FTReactNativeRUM.stopResource(key);
    FTReactNativeRUM.addResource(key, resource);
  }
}