support screen render

.gitignore

@@ -69,3 +69,6 @@ android/keystores/debug.keystore
 
 # .idea run configurations
 /.run/*
+.yarn/
+examples/default/.yarn/
+examples/default/ios/.xcode.env.local

android/native.gradle

@@ -1,5 +1,5 @@
 project.ext.instabug = [
-    version: '15.0.1'
+    version: '15.0.2.7020723-SNAPSHOT'
 ]
 
 dependencies {

android/src/main/java/com/instabug/reactlibrary/RNInstabugReactnativeModule.java

@@ -26,7 +26,6 @@
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.instabug.apm.InternalAPM;
-import com.instabug.apm.configuration.cp.APMFeature;
 import com.instabug.library.Feature;
 import com.instabug.library.Instabug;
 import com.instabug.library.InstabugColorTheme;
@@ -35,24 +34,21 @@
 import com.instabug.library.LogLevel;
 import com.instabug.library.ReproConfigurations;
 import com.instabug.library.core.InstabugCore;
+import com.instabug.library.featuresflags.model.IBGFeatureFlag;
 import com.instabug.library.internal.crossplatform.CoreFeature;
 import com.instabug.library.internal.crossplatform.CoreFeaturesState;
 import com.instabug.library.internal.crossplatform.FeaturesStateListener;
 import com.instabug.library.internal.crossplatform.InternalCore;
-import com.instabug.library.featuresflags.model.IBGFeatureFlag;
-import com.instabug.library.internal.crossplatform.InternalCore;
 import com.instabug.library.internal.crossplatform.OnFeaturesUpdatedListener;
 import com.instabug.library.internal.module.InstabugLocale;
 import com.instabug.library.invocation.InstabugInvocationEvent;
 import com.instabug.library.logging.InstabugLog;
 import com.instabug.library.model.NetworkLog;
 import com.instabug.library.model.Report;
 import com.instabug.library.ui.onboarding.WelcomeMessage;
-import com.instabug.library.util.InstabugSDKLogger;
 import com.instabug.reactlibrary.utils.ArrayUtil;
 import com.instabug.reactlibrary.utils.EventEmitterModule;
 import com.instabug.reactlibrary.utils.MainThreadHandler;
-
 import com.instabug.reactlibrary.utils.RNTouchedViewExtractor;
 
 import org.json.JSONException;
@@ -115,6 +111,7 @@ public void removeListeners(Integer count) {
 
     /**
      * Enables or disables Instabug functionality.
+     *
      * @param isEnabled A boolean to enable/disable Instabug.
      */
     @ReactMethod
@@ -1175,7 +1172,7 @@ public void invoke(@NonNull CoreFeaturesState featuresState) {
                             params.putBoolean("isW3ExternalTraceIDEnabled", featuresState.isW3CExternalTraceIdEnabled());
                             params.putBoolean("isW3ExternalGeneratedHeaderEnabled", featuresState.isAttachingGeneratedHeaderEnabled());
                             params.putBoolean("isW3CaughtHeaderEnabled", featuresState.isAttachingCapturedHeaderEnabled());
-                            params.putInt("networkBodyLimit",featuresState.getNetworkLogCharLimit());
+                            params.putInt("networkBodyLimit", featuresState.getNetworkLogCharLimit());
 
                             sendEvent(Constants.IBG_ON_FEATURE_FLAGS_UPDATE_RECEIVED_CALLBACK, params);
                         }
@@ -1259,7 +1256,7 @@ public void run() {
      * Map between the exported JS constant and the arg key in {@link ArgsRegistry}.
      * The constant name and the arg key should match to be able to resolve the
      * constant with its actual value from the {@link ArgsRegistry} maps.
-     *
+     * <p>
      * This is a workaround, because RN cannot resolve enums in the constants map.
      */
     @Override
@@ -1290,23 +1287,25 @@ public void invoke() {
             }
         });
     }
+
     /**
-    * Enables or disables capturing network body.
-    * @param isEnabled A boolean to enable/disable capturing network body.
-    */
-   @ReactMethod
-   public void setNetworkLogBodyEnabled(final boolean isEnabled) {
-       MainThreadHandler.runOnMainThread(new Runnable() {
-           @Override
-           public void run() {
-               try {
-                   Instabug.setNetworkLogBodyEnabled(isEnabled);
-               } catch (Exception e) {
-                   e.printStackTrace();
-               }
-           }
-       });
-   }
+     * Enables or disables capturing network body.
+     *
+     * @param isEnabled A boolean to enable/disable capturing network body.
+     */
+    @ReactMethod
+    public void setNetworkLogBodyEnabled(final boolean isEnabled) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    Instabug.setNetworkLogBodyEnabled(isEnabled);
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
 
     /**
      * Sets the auto mask screenshots types.

android/src/test/java/com/instabug/reactlibrary/RNInstabugAPMModuleTest.java

@@ -205,5 +205,13 @@ public void testSetFlowAttribute() {
         APM.endUITrace();
     }
 
+    @Test
+    public void given$setScreenRenderEnabled_whenQuery_thenShouldCallNativeApiWithEnabled() {
+        apmModule.setScreenRenderEnabled(true);
+        // then
+        verify(APM.class, times(1));
+        APM.setScreenRenderingEnabled(true);
+    }
+
 
 }

examples/default/ios/InstabugTests/InstabugAPMTests.m

@@ -177,6 +177,22 @@ - (void) testEndUITrace {
   OCMVerify([mock endUITrace]);
 }
 
+- (void) testSetScreenRenderEnabled {
+    id mock = OCMClassMock([IBGAPM class]);
+    BOOL isEnabled = YES;
 
+    [self.instabugBridge setScreenRenderEnabled:isEnabled];
+
+    OCMVerify([mock setScreenRenderingEnabled:YES]);
+}
+
+- (void) testSetScreenRenderDisabled {
+    id mock = OCMClassMock([IBGAPM class]);
+    BOOL isEnabled = NO;
+
+    [self.instabugBridge setScreenRenderEnabled:isEnabled];
+
+    OCMVerify([mock setScreenRenderingEnabled:NO]);
+}
 
 @end

examples/default/ios/Podfile

@@ -15,7 +15,7 @@ target 'InstabugExample' do
   config = use_native_modules!
   rn_maps_path = '../node_modules/react-native-maps'
   pod 'react-native-google-maps', :path => rn_maps_path
-
+  pod 'Instabug', :podspec => 'https://ios-releases.instabug.com/custom/faeture-screen_rendering-release/15.1.16/Instabug.podspec'
   # Flags change depending on the env values.
   flags = get_default_flags()
 

examples/default/ios/Podfile.lock

@@ -31,7 +31,7 @@ PODS:
   - hermes-engine (0.75.4):
     - hermes-engine/Pre-built (= 0.75.4)
   - hermes-engine/Pre-built (0.75.4)
-  - Instabug (15.1.1)
+  - Instabug (15.1.16)
   - instabug-reactnative-ndk (0.1.0):
     - DoubleConversion
     - glog
@@ -1626,7 +1626,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - RNInstabug (15.0.1):
-    - Instabug (= 15.1.1)
+    - Instabug (= 15.1.16)
     - React-Core
   - RNReanimated (3.16.1):
     - DoubleConversion
@@ -1770,6 +1770,7 @@ DEPENDENCIES:
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - Instabug (from `https://ios-releases.instabug.com/custom/faeture-screen_rendering-release/15.1.16/Instabug.podspec`)
   - instabug-reactnative-ndk (from `../node_modules/instabug-reactnative-ndk`)
   - OCMock
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
@@ -1850,7 +1851,6 @@ SPEC REPOS:
   trunk:
     - Google-Maps-iOS-Utils
     - GoogleMaps
-    - Instabug
     - OCMock
     - SocketRocket
 
@@ -1868,6 +1868,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2024-08-15-RNv0.75.1-4b3bf912cc0f705b51b71ce1a5b8bd79b93a451b
+  Instabug:
+    :podspec: https://ios-releases.instabug.com/custom/faeture-screen_rendering-release/15.1.16/Instabug.podspec
   instabug-reactnative-ndk:
     :path: "../node_modules/instabug-reactnative-ndk"
   RCT-Folly:
@@ -2022,7 +2024,7 @@ SPEC CHECKSUMS:
   Google-Maps-iOS-Utils: f77eab4c4326d7e6a277f8e23a0232402731913a
   GoogleMaps: 032f676450ba0779bd8ce16840690915f84e57ac
   hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
-  Instabug: 3e7af445c14d7823fcdecba223f09b5f7c0c6ce1
+  Instabug: 9fcae5627558e1832a0f49c81bb26c20aaf8af7f
   instabug-reactnative-ndk: d765ac289d56e8896398d02760d9abf2562fc641
   OCMock: 589f2c84dacb1f5aaf6e4cec1f292551fe748e74
   RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
@@ -2090,14 +2092,14 @@ SPEC CHECKSUMS:
   ReactCommon: 6a952e50c2a4b694731d7682aaa6c79bc156e4ad
   RNCClipboard: 2821ac938ef46f736a8de0c8814845dde2dcbdfb
   RNGestureHandler: 511250b190a284388f9dd0d2e56c1df76f14cfb8
-  RNInstabug: f17d4e6c679fbc921f2692c223a1c21395589cc5
+  RNInstabug: 62ac32fd0a0ecb7720aa115fec391e74b8bd5a27
   RNReanimated: f42a5044d121d68e91680caacb0293f4274228eb
   RNScreens: c7ceced6a8384cb9be5e7a5e88e9e714401fd958
   RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   RNVectorIcons: 6382277afab3c54658e9d555ee0faa7a37827136
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 055f92ad73f8c8600a93f0e25ac0b2344c3b07e6
 
-PODFILE CHECKSUM: 837b933596e1616ff02cc206bb17dee4f611fdbc
+PODFILE CHECKSUM: 06ff71958843b5a526fbd11ecc1aad124421d74f
 
 COCOAPODS: 1.14.0

examples/default/src/App.tsx

@@ -69,7 +69,7 @@ export const App: React.FC = () => {
         networkData.url = `${networkData.url}/JS/Obfuscated`;
         return networkData;
       });
-      // NetworkLogger.setRequestFilterExpression('false');
+      // APM.setScreenRenderEnabled(true);
     });
   });
 

examples/default/src/navigation/HomeStack.tsx

@@ -22,7 +22,8 @@ import {
 import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { APMScreen } from '../screens/apm/APMScreen';
-import { TracesScreen } from '../screens/apm/TracesScreen';
+import { ExecutionTraceScreen } from '../screens/apm/ExecutionTraceScreen';
+import { CustomUITraceScreen } from '../screens/apm/CustomUITraceScreen';
 import { NetworkScreen } from '../screens/apm/NetworkScreen';
 import { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
@@ -31,6 +32,7 @@ import { HttpScreen } from '../screens/apm/HttpScreen';
 import { WebViewsScreen } from '../screens/apm/webViews/WebViewsScreen';
 import { FullWebViewsScreen } from '../screens/apm/webViews/FullWebViewsScreen';
 import { PartialWebViewsScreen } from '../screens/apm/webViews/PartialWebViewsScreen';
+import ScreenRender from '../screens/apm/ScreenRender';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -43,7 +45,7 @@ export type HomeStackParamList = {
   BasicComponents: undefined;
   ScrollView: undefined;
   FlatList: undefined;
-  ComplexViews: undefined;
+  ComplexViews: { initialDepth?: number; initialBreadth?: number } | undefined;
   SectionList: undefined;
   Gestures: undefined;
   GoogleMapsScreen: undefined;
@@ -57,10 +59,12 @@ export type HomeStackParamList = {
   APM: undefined;
   NetworkTraces: undefined;
   ExecutionTraces: undefined;
+  CustomUITraces: undefined;
   AppFlows: undefined;
   WebViews: undefined;
   FullWebViews: undefined;
   PartialWebViews: undefined;
+  ScreenRender: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -140,7 +144,8 @@ export const HomeStackNavigator: React.FC = () => {
       <HomeStack.Screen name="Gestures" component={GesturesScreen} />
       <HomeStack.Screen name="APM" component={APMScreen} />
       <HomeStack.Screen name="NetworkTraces" component={NetworkScreen} />
-      <HomeStack.Screen name="ExecutionTraces" component={TracesScreen} />
+      <HomeStack.Screen name="ExecutionTraces" component={ExecutionTraceScreen} />
+      <HomeStack.Screen name="CustomUITraces" component={CustomUITraceScreen} />
       <HomeStack.Screen name="AppFlows" component={FlowsScreen} />
       <HomeStack.Screen
         name="LegacyMode"
@@ -163,6 +168,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={PartialWebViewsScreen}
         options={{ title: 'PartialWebViews' }}
       />
+      <HomeStack.Screen
+        name="ScreenRender"
+        component={ScreenRender}
+        options={{ title: 'ScreenRender' }}
+      />
     </HomeStack.Navigator>
   );
 };

examples/default/src/screens/apm/APMScreen.tsx

@@ -34,10 +34,12 @@ export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM
       {CustomGap.smallV}
       <ListTile title="End App launch" onPress={() => APM.endAppLaunch()} />
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
-      <ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
+      <ListTile title="Execution Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
+      <ListTile title="Custom UI Traces" onPress={() => navigation.navigate('CustomUITraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />
       <ListTile title="WebViews" onPress={() => navigation.navigate('WebViews')} />
       <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />
+      <ListTile title="Screen Rendering" onPress={() => navigation.navigate('ScreenRender')} />
     </Screen>
   );
 };

examples/default/src/screens/apm/CustomUITraceScreen.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { APM } from 'instabug-reactnative';
+import { ScrollView } from 'react-native';
+import { Section } from '../../components/Section';
+import { Screen } from '../../components/Screen';
+import { VStack } from 'native-base';
+import { InputField } from '../../components/InputField';
+import { CustomButton } from '../../components/CustomButton';
+import BackgroundTimer from 'react-native-background-timer';
+
+export const CustomUITraceScreen: React.FC = () => {
+  const [traceName, setTraceName] = useState<string>('');
+
+  function startUITrace() {
+    if (!traceName.trim()) {
+      console.log('Please enter a trace name before starting.');
+      return;
+    }
+    APM.startUITrace(traceName);
+
+    console.log(`UI trace "${traceName}" started.`);
+  }
+
+  function startDelayedUITrace() {
+    if (!traceName.trim()) {
+      console.log('Please enter a trace name before starting.');
+      return;
+    }
+    return BackgroundTimer.setTimeout(() => {
+      APM.startUITrace(traceName);
+      console.log(`Delayed UI trace "${traceName}" started.`);
+    }, 5000);
+  }
+
+  function endUITrace() {
+    APM.endUITrace();
+    console.log('UI trace ended.');
+  }
+
+  return (
+    <ScrollView>
+      <Screen>
+        <Section title="Custom UI Traces">
+          <VStack space={2}>
+            <InputField
+              placeholder="UI Trace Name"
+              onChangeText={(text) => setTraceName(text)}
+              value={traceName}
+            />
+            <CustomButton title="Start UI Trace" onPress={startUITrace} />
+            <CustomButton title="Start 5s Delayed UI Trace" onPress={startDelayedUITrace} />
+            <CustomButton title="End UI Trace" onPress={endUITrace} />
+          </VStack>
+        </Section>
+      </Screen>
+    </ScrollView>
+  );
+};

examples/default/src/screens/apm/TracesScreen.tsx → examples/default/src/screens/apm/ExecutionTraceScreen.tsx

@@ -8,7 +8,7 @@ import { InputField } from '../../components/InputField';
 import { CustomButton } from '../../components/CustomButton';
 import BackgroundTimer from 'react-native-background-timer';
 
-export const TracesScreen: React.FC = () => {
+export const ExecutionTraceScreen: React.FC = () => {
   const [traceName, setTraceName] = useState<string>('');
   const [traceAttributeKey, setTraceAttributeKey] = useState<string>('');
   const [traceAttributeValue, setTraceAttributeValue] = useState<string>('');