feat: Add initWith method + reactnativeprofiler

Author: jennmueng

.gitignore

@@ -66,3 +66,7 @@ wheelhouse
 
 # Android
 .idea/
+
+# Yalc
+.yalc
+yalc.lock

sample/src/App.tsx

@@ -25,8 +25,7 @@ const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumenta
     routeChangeTimeoutMs: 500, // How long it will wait for the route change to complete. Default is 1000ms
   },
 );
-
-Sentry.init({
+const options = {
   // Replace the example DSN below with your own DSN:
   dsn: SENTRY_INTERNAL_DSN,
   debug: true,
@@ -63,46 +62,38 @@ Sentry.init({
   // otherwise they will not work.
   release: packageVersion,
   dist: `${packageVersion}.0`,
-});
+};
+
+// Sentry.init(options);
 
 const Stack = createStackNavigator();
 
 const App = () => {
   const navigation = React.useRef<NavigationContainerRef>();
 
   return (
-    <Sentry.Profiler name="App">
-      <Provider store={store}>
-        <NavigationContainer
-          ref={navigation}
-          onReady={() => {
-            reactNavigationV5Instrumentation.registerNavigationContainer(
-              navigation,
-            );
-          }}>
-          <Stack.Navigator>
-            <Stack.Screen name="Home" component={HomeScreen} />
-            <Stack.Screen name="Tracker" component={TrackerScreen} />
-            <Stack.Screen
-              name="ManualTracker"
-              component={ManualTrackerScreen}
-            />
-            <Stack.Screen
-              name="PerformanceTiming"
-              component={PerformanceTimingScreen}
-            />
-            <Stack.Screen name="Redux" component={ReduxScreen} />
-            <Stack.Screen
-              name="EndToEndTests"
-              component={EndToEndTestsScreen}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </Provider>
-    </Sentry.Profiler>
+    <Provider store={store}>
+      <NavigationContainer
+        ref={navigation}
+        onReady={() => {
+          reactNavigationV5Instrumentation.registerNavigationContainer(
+            navigation,
+          );
+        }}>
+        <Stack.Navigator>
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="Tracker" component={TrackerScreen} />
+          <Stack.Screen name="ManualTracker" component={ManualTrackerScreen} />
+          <Stack.Screen
+            name="PerformanceTiming"
+            component={PerformanceTimingScreen}
+          />
+          <Stack.Screen name="Redux" component={ReduxScreen} />
+          <Stack.Screen name="EndToEndTests" component={EndToEndTestsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </Provider>
   );
 };
 
-export default Sentry.withTouchEventBoundary(App, {
-  ignoreNames: ['Provider', 'UselessName', /^SomeRegex/],
-});
+export default Sentry.initWith(App, options);

src/js/index.ts

@@ -59,8 +59,18 @@ import { SDK_NAME, SDK_VERSION } from "./version";
 export { ReactNativeBackend } from "./backend";
 export { ReactNativeOptions } from "./options";
 export { ReactNativeClient } from "./client";
-// eslint-disable-next-line deprecation/deprecation
-export { init, setDist, setRelease, nativeCrash, flush, close } from "./sdk";
+
+export {
+  init,
+  initWith,
+  // eslint-disable-next-line deprecation/deprecation
+  setDist,
+  // eslint-disable-next-line deprecation/deprecation
+  setRelease,
+  nativeCrash,
+  flush,
+  close,
+} from "./sdk";
 export { TouchEventBoundary, withTouchEventBoundary } from "./touchevents";
 
 export {

src/js/options.ts

@@ -1,4 +1,8 @@
 import { BrowserOptions } from "@sentry/react";
+import { ErrorBoundaryProps } from "@sentry/react/dist/errorboundary";
+import { ProfilerProps } from "@sentry/react/dist/profiler";
+
+import { TouchEventBoundaryProps } from "./touchevents";
 
 /**
  * Configuration options for the Sentry ReactNative SDK.
@@ -72,3 +76,9 @@ export interface ReactNativeOptions extends BrowserOptions {
   /** Enable auto performance tracking by default. */
   enableAutoPerformanceTracking?: boolean;
 }
+
+export interface ReactNativeWrapperOptions extends ReactNativeOptions {
+  errorBoundaryProps?: ErrorBoundaryProps;
+  profilerProps?: ProfilerProps;
+  touchEventBoundaryProps?: TouchEventBoundaryProps;
+}

src/js/sdk.ts renamed to src/js/sdk.tsx

@@ -1,9 +1,14 @@
 import { initAndBind, setExtra } from "@sentry/core";
 import { Hub, makeMain } from "@sentry/hub";
 import { RewriteFrames } from "@sentry/integrations";
-import { defaultIntegrations, getCurrentHub } from "@sentry/react";
+import {
+  defaultIntegrations,
+  ErrorBoundary,
+  getCurrentHub,
+} from "@sentry/react";
 import { StackFrame } from "@sentry/types";
 import { getGlobalObject, logger } from "@sentry/utils";
+import * as React from "react";
 
 import { ReactNativeClient } from "./client";
 import {
@@ -13,9 +18,10 @@ import {
   Release,
   StallTracking,
 } from "./integrations";
-import { ReactNativeOptions } from "./options";
+import { ReactNativeOptions, ReactNativeWrapperOptions } from "./options";
 import { ReactNativeScope } from "./scope";
-import { ReactNativeTracing } from "./tracing";
+import { TouchEventBoundary } from "./touchevents";
+import { ReactNativeProfiler, ReactNativeTracing } from "./tracing";
 
 const IGNORED_DEFAULT_INTEGRATIONS = [
   "GlobalHandlers", // We will use the react-native internal handlers
@@ -31,9 +37,9 @@ const DEFAULT_OPTIONS: ReactNativeOptions = {
 };
 
 /**
- * Inits the SDK
+ * Inits the SDK and returns the final options.
  */
-export function init(passedOptions: ReactNativeOptions): void {
+function _init<O = ReactNativeOptions>(passedOptions: O): O {
   const reactNativeHub = new Hub(undefined, new ReactNativeScope());
   makeMain(reactNativeHub);
 
@@ -106,6 +112,44 @@ export function init(passedOptions: ReactNativeOptions): void {
   if (getGlobalObject<any>().HermesInternal) {
     getCurrentHub().setTag("hermes", "true");
   }
+
+  return options;
+}
+
+/**
+ * Inits the Sentry React Native SDK without any wrapping
+ */
+export function init(options: ReactNativeOptions): void {
+  _init(options);
+}
+
+/**
+ * Inits the Sentry React Native SDK with automatic instrumentation and wrapped features.
+ */
+export function initWith(
+  RootComponent: React.ComponentType,
+  passedOptions: ReactNativeWrapperOptions
+): React.FC {
+  const options = _init(passedOptions);
+
+  const profilerProps = {
+    ...options.profilerProps,
+    name: RootComponent.displayName ?? "Root",
+  };
+
+  const RootApp: React.FC = (appProps) => {
+    return (
+      <ErrorBoundary {...options.errorBoundaryProps}>
+        <TouchEventBoundary {...options.touchEventBoundaryProps}>
+          <ReactNativeProfiler {...profilerProps}>
+            <RootComponent {...appProps} />
+          </ReactNativeProfiler>
+        </TouchEventBoundary>
+      </ErrorBoundary>
+    );
+  };
+
+  return RootApp;
 }
 
 /**

src/js/tracing/index.ts

@@ -12,3 +12,4 @@ export {
   ReactNavigationRoute,
   ReactNavigationTransactionContext,
 } from "./types";
+export { ReactNativeProfiler } from "./reactnativeprofiler";

src/js/tracing/reactnativeprofiler.tsx

@@ -0,0 +1,26 @@
+import { getCurrentHub, Profiler } from "@sentry/react";
+
+import { ReactNativeTracing } from "./reactnativetracing";
+
+/**
+ * Custom profiler for the React Native app root.
+ */
+export class ReactNativeProfiler extends Profiler {
+  /**
+   * Get the app root mount time.
+   */
+  public componentDidMount(): void {
+    super.componentDidMount();
+
+    const tracingIntegration = getCurrentHub().getIntegration(
+      ReactNativeTracing
+    );
+
+    if (this._mountSpan && tracingIntegration) {
+      if (typeof this._mountSpan.endTimestamp !== "undefined") {
+        // The first root component mount is the app start finish.
+        tracingIntegration.onAppStartFinish(this._mountSpan.endTimestamp);
+      }
+    }
+  }
+}

src/js/tracing/reactnativetracing.ts

@@ -21,7 +21,7 @@ import { StallTracking } from "../integrations";
 import { RoutingInstrumentationInstance } from "../tracing/routingInstrumentation";
 import { NATIVE } from "../wrapper";
 import { NativeFramesInstrumentation } from "./nativeframes";
-import { adjustTransactionDuration, getTimeOriginMilliseconds } from "./utils";
+import { adjustTransactionDuration } from "./utils";
 
 export type BeforeNavigate = (
   context: TransactionContext
@@ -115,6 +115,7 @@ export class ReactNativeTracing implements Integration {
 
   private _getCurrentHub?: () => Hub;
   private _awaitingAppStartData?: NativeAppStartResponse;
+  private _appStartFinishTimestamp?: number;
 
   public constructor(options: Partial<ReactNativeTracingOptions> = {}) {
     this.options = {
@@ -196,6 +197,13 @@ export class ReactNativeTracing implements Integration {
     this.nativeFramesInstrumentation?.onTransactionFinish(transaction);
   }
 
+  /**
+   *
+   */
+  public onAppStartFinish(endTimestamp: number): void {
+    this._appStartFinishTimestamp = endTimestamp;
+  }
+
   /**
    * Instruments the app start measurements on the first route transaction.
    * Starts a route transaction if there isn't routing instrumentation.
@@ -235,18 +243,22 @@ export class ReactNativeTracing implements Integration {
     transaction: IdleTransaction,
     appStart: NativeAppStartResponse
   ): void {
+    if (!this._appStartFinishTimestamp) {
+      logger.warn("App start was never finished.");
+      return;
+    }
+
     const appStartTimeSeconds = appStart.appStartTime / 1000;
-    const timeOriginSeconds = getTimeOriginMilliseconds() / 1000;
 
     transaction.startChild({
       description: appStart.isColdStart ? "Cold App Start" : "Warm App Start",
       op: appStart.isColdStart ? "app.start.cold" : "app.start.warm",
       startTimestamp: appStartTimeSeconds,
-      endTimestamp: timeOriginSeconds,
+      endTimestamp: this._appStartFinishTimestamp,
     });
 
     const appStartDurationMilliseconds =
-      getTimeOriginMilliseconds() - appStart.appStartTime;
+      this._appStartFinishTimestamp * 1000 - appStart.appStartTime;
 
     transaction.setMeasurements(
       appStart.isColdStart