@sentry/react-native 5.19.2 → 5.20.0

package/ios/RNSentryRNSScreen.m

@@ -0,0 +1,26 @@
+#import <Sentry/SentryFramesTracker.h>
+#import <Sentry/SentryDependencyContainer.h>
+#import <Sentry/SentrySwizzle.h>
+
+#import "RNSentryRNSScreen.h"
+#import "RNSentryDependencyContainer.h"
+
+@implementation RNSentryRNSScreen
+
++ (void)swizzleViewDidAppear {
+  Class rnsscreenclass = NSClassFromString(@"RNSScreen");
+  if (rnsscreenclass == nil)
+  {
+    return;
+  }
+
+  SEL selector = NSSelectorFromString(@"viewDidAppear:");
+  SentrySwizzleInstanceMethod(rnsscreenclass, selector, SentrySWReturnType(void),
+      SentrySWArguments(BOOL animated), SentrySWReplacement({
+          [[[RNSentryDependencyContainer sharedInstance] framesTrackerListener] startListening];
+          SentrySWCallOriginal(animated);
+      }),
+      SentrySwizzleModeOncePerClass, (void *)selector);
+}
+
+@end

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sentry/react-native",
   "homepage": "https://github.com/getsentry/sentry-react-native",
   "repository": "https://github.com/getsentry/sentry-react-native",
-  "version": "5.19.2",
+  "version": "5.20.0",
   "description": "Official Sentry SDK for react-native",
   "typings": "dist/js/index.d.ts",
   "types": "dist/js/index.d.ts",
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@sentry/browser": "7.100.1",
-    "@sentry/cli": "2.25.2",
+    "@sentry/cli": "2.30.0",
     "@sentry/core": "7.100.1",
     "@sentry/hub": "7.100.1",
     "@sentry/integrations": "7.100.1",
@@ -77,7 +77,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",
-    "@expo/metro-config": "0.16.0",
+    "@expo/metro-config": "0.17.5",
     "@mswjs/interceptors": "^0.25.15",
     "@sentry-internal/eslint-config-sdk": "7.100.1",
     "@sentry-internal/eslint-plugin-sdk": "7.100.1",
@@ -85,17 +85,19 @@
     "@sentry/wizard": "3.16.3",
     "@types/jest": "^29.5.3",
     "@types/node": "^20.9.3",
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.2.64",
     "@types/uglify-js": "^3.17.2",
     "@types/uuid": "^9.0.4",
     "@types/xmlhttprequest": "^1.8.2",
     "babel-jest": "^29.6.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-preset-fbjs": "^3.4.0",
     "downlevel-dts": "^0.11.0",
     "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-native": "^3.8.1",
-    "expo": "50.0.0-preview.8",
-    "expo-module-scripts": "^3.1.0",
+    "expo": "^50.0.8",
+    "expo-module-scripts": "3.1.0",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-extended": "^4.0.2",
@@ -104,6 +106,7 @@
     "prettier": "^2.0.5",
     "react": "18.2.0",
     "react-native": "0.73.2",
+    "react-test-renderer": "^18.2.0",
     "replace-in-file": "^7.0.1",
     "rimraf": "^4.1.1",
     "ts-jest": "^29.1.1",

package/scripts/expo-upload-sourcemaps.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const process = require('process');
 
+const SENTRY_URL = 'SENTRY_URL';
 const SENTRY_ORG = 'SENTRY_ORG';
 const SENTRY_PROJECT = 'SENTRY_PROJECT';
 const SENTRY_AUTH_TOKEN = 'SENTRY_AUTH_TOKEN';
@@ -111,11 +112,12 @@ try {
 }
 
 let sentryOrg = getEnvVar(SENTRY_ORG);
+let sentryUrl = getEnvVar(SENTRY_URL);
 let sentryProject = getEnvVar(SENTRY_PROJECT);
 let authToken = getEnvVar(SENTRY_AUTH_TOKEN);
 const sentryCliBin = getEnvVar(SENTRY_CLI_EXECUTABLE) || require.resolve('@sentry/cli/bin/sentry-cli');
 
-if (!sentryOrg || !sentryProject) {
+if (!sentryOrg || !sentryProject || !sentryUrl) {
   console.log('🐕 Fetching from expo config...');
   const pluginConfig = getSentryPluginPropertiesFromExpoConfig();
   if (!pluginConfig) {
@@ -146,6 +148,17 @@ if (!sentryOrg || !sentryProject) {
     sentryProject = pluginConfig.project;
     console.log(`${SENTRY_PROJECT} resolved to ${sentryProject} from expo config.`);
   }
+  if (!sentryUrl) {
+    if (!pluginConfig.url) {
+      console.error(
+        `Could not resolve sentry url, set it in the environment variable ${SENTRY_URL} or in the '@sentry/react-native' plugin properties in your expo config.`,
+      );
+      process.exit(1);
+    }
+
+    sentryUrl = pluginConfig.url;
+    console.log(`${SENTRY_URL} resolved to ${sentryUrl} from expo config.`);
+  } 
 }
 
 if (!authToken) {
@@ -186,6 +199,7 @@ for (const [assetGroupName, assets] of Object.entries(groupedAssets)) {
       ...process.env,
       [SENTRY_PROJECT]: sentryProject,
       [SENTRY_ORG]: sentryOrg,
+      [SENTRY_URL]: sentryUrl
     },
     stdio: 'inherit',
   });

package/src/js/NativeRNSentry.ts

@@ -7,6 +7,8 @@ import type { UnsafeObject } from './utils/rnlibrariesinterface';
 // There has to be only one interface and it has to be named `Spec`
 // Only extra allowed definitions are types (probably codegen bug)
 export interface Spec extends TurboModule {
+  addListener: (eventType: string) => void;
+  removeListeners: (id: number) => void;
   addBreadcrumb(breadcrumb: UnsafeObject): void;
   captureEnvelope(
     bytes: string,
@@ -41,6 +43,7 @@ export interface Spec extends TurboModule {
   };
   fetchNativePackageName(): string | undefined | null;
   fetchNativeStackFramesBy(instructionsAddr: number[]): NativeStackFrames | undefined | null;
+  initNativeReactNavigationNewFrameTracking(): Promise<void>;
 }
 
 export type NativeStackFrame = {

package/ts3.8/dist/js/NativeRNSentry.d.ts

@@ -2,6 +2,8 @@ import type { Package } from '@sentry/types';
 import type { TurboModule } from 'react-native';
 import type { UnsafeObject } from './utils/rnlibrariesinterface';
 export interface Spec extends TurboModule {
+    addListener: (eventType: string) => void;
+    removeListeners: (id: number) => void;
     addBreadcrumb(breadcrumb: UnsafeObject): void;
     captureEnvelope(bytes: string, options: {
         store: boolean;
@@ -36,6 +38,7 @@ export interface Spec extends TurboModule {
     };
     fetchNativePackageName(): string | undefined | null;
     fetchNativeStackFramesBy(instructionsAddr: number[]): NativeStackFrames | undefined | null;
+    initNativeReactNavigationNewFrameTracking(): Promise<void>;
 }
 export type NativeStackFrame = {
     platform: string;

package/ts3.8/dist/js/index.d.ts

@@ -8,7 +8,7 @@ export type { ReactNativeOptions } from './options';
 export { ReactNativeClient } from './client';
 export { init, wrap, setDist, setRelease, nativeCrash, flush, close, captureUserFeedback, withScope, configureScope, } from './sdk';
 export { TouchEventBoundary, withTouchEventBoundary } from './touchevents';
-export { ReactNativeTracing, ReactNavigationV4Instrumentation, ReactNavigationV5Instrumentation, ReactNavigationInstrumentation, ReactNativeNavigationInstrumentation, RoutingInstrumentation, sentryTraceGesture, } from './tracing';
-export type { ReactNavigationTransactionContext } from './tracing';
+export { ReactNativeTracing, ReactNavigationV4Instrumentation, ReactNavigationV5Instrumentation, ReactNavigationInstrumentation, ReactNativeNavigationInstrumentation, RoutingInstrumentation, sentryTraceGesture, TimeToInitialDisplay, TimeToFullDisplay, startTimeToInitialDisplaySpan, startTimeToFullDisplaySpan, } from './tracing';
+export type { ReactNavigationTransactionContext, TimeToDisplayProps } from './tracing';
 export { Integrations, SDK_NAME, SDK_VERSION };
 //# sourceMappingURL=index.d.ts.map

package/ts3.8/dist/js/tracing/index.d.ts

@@ -8,4 +8,5 @@ export type { ReactNavigationCurrentRoute, ReactNavigationRoute, ReactNavigation
 export { ReactNativeProfiler } from './reactnativeprofiler';
 export { sentryTraceGesture } from './gesturetracing';
 export * from './ops';
+export * from './timetodisplay';
 //# sourceMappingURL=index.d.ts.map

package/ts3.8/dist/js/tracing/reactnativeprofiler.d.ts

@@ -8,5 +8,9 @@ export declare class ReactNativeProfiler extends Profiler {
      * Get the app root mount time.
      */
     componentDidMount(): void;
+    /**
+     * Notifies the Tracing integration that the app start has finished.
+     */
+    private _reportAppStart;
 }
 //# sourceMappingURL=reactnativeprofiler.d.ts.map

package/ts3.8/dist/js/tracing/reactnavigation.d.ts

@@ -12,9 +12,16 @@ interface ReactNavigationOptions {
      * before the transaction is discarded.
      * Time is in ms.
      *
-     * Default: 1000
+     * @default 1000
      */
     routeChangeTimeoutMs: number;
+    /**
+     * Time to initial display measures the time it takes from
+     * navigation dispatch to the render of the first frame of the new screen.
+     *
+     * @default false
+     */
+    enableTimeToInitialDisplay: boolean;
 }
 /**
  * Instrumentation for React-Navigation V5 and above. See docs or sample app for usage.
@@ -28,9 +35,11 @@ export declare class ReactNavigationInstrumentation extends InternalRoutingInstr
     static instrumentationName: string;
     readonly name: string;
     private _navigationContainer;
+    private _newScreenFrameEventEmitter;
     private readonly _maxRecentRouteLen;
     private _latestRoute?;
     private _latestTransaction?;
+    private _navigationProcessingSpan?;
     private _initialStateHandled;
     private _stateChangeTimeout?;
     private _recentRouteKeys;

package/ts3.8/dist/js/tracing/timetodisplay.d.ts

@@ -0,0 +1,46 @@
+import type { Span, StartSpanOptions } from '@sentry/types';
+import * as React from 'react';
+/**
+ * Flags of active spans with manual initial display.
+ */
+export declare const manualInitialDisplaySpans: WeakMap<Span, true>;
+export type TimeToDisplayProps = {
+    children?: React.ReactNode;
+    spanName?: string;
+    record?: boolean;
+};
+/**
+ * Component to measure time to initial display.
+ *
+ * The initial display is recorded when the component prop `record` is true.
+ *
+ * <TimeToInitialDisplay record />
+ */
+export declare function TimeToInitialDisplay(props: TimeToDisplayProps): React.ReactElement;
+/**
+ * Component to measure time to full display.
+ *
+ * The initial display is recorded when the component prop `record` is true.
+ *
+ * <TimeToInitialDisplay record />
+ */
+export declare function TimeToFullDisplay(props: TimeToDisplayProps): React.ReactElement;
+/**
+ * Starts a new span for the initial display.
+ *
+ * Returns current span if already exists in the currently active span.
+ */
+export declare function startTimeToInitialDisplaySpan(options?: Exclude<StartSpanOptions, 'op' | 'name'> & {
+    name?: string;
+    isAutoInstrumented?: boolean;
+}): Span | undefined;
+/**
+ * Starts a new span for the full display.
+ *
+ * Returns current span if already exists in the currently active span.
+ */
+export declare function startTimeToFullDisplaySpan(options?: Omit<StartSpanOptions, 'op' | 'name'> & {
+    name?: string;
+    timeoutMs?: number;
+}): Span | undefined;
+//# sourceMappingURL=timetodisplay.d.ts.map

package/ts3.8/dist/js/tracing/timetodisplaynative.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { HostComponent } from 'react-native';
+import type { RNSentryOnDrawReporterProps } from './timetodisplaynative.types';
+export declare const nativeComponentExists: boolean;
+/**
+ * This is a fallback component for environments where the native component is not available.
+ */
+declare class RNSentryOnDrawReporterNoop extends React.Component<RNSentryOnDrawReporterProps> {
+    render(): React.ReactNode;
+}
+declare let RNSentryOnDrawReporter: HostComponent<RNSentryOnDrawReporterProps> | typeof RNSentryOnDrawReporterNoop;
+/**
+ * Native component that reports the on draw timestamp.
+ */
+export declare const getRNSentryOnDrawReporter: () => typeof RNSentryOnDrawReporter;
+export {};
+//# sourceMappingURL=timetodisplaynative.d.ts.map

package/ts3.8/dist/js/tracing/timetodisplaynative.types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface RNSentryOnDrawNextFrameEvent {
+    newFrameTimestampInSeconds: number;
+    type: 'initialDisplay' | 'fullDisplay';
+}
+export interface RNSentryOnDrawReporterProps {
+    children?: React.ReactNode;
+    onDrawNextFrame: (event: {
+        nativeEvent: RNSentryOnDrawNextFrameEvent;
+    }) => void;
+    initialDisplay?: boolean;
+    fullDisplay?: boolean;
+}
+//# sourceMappingURL=timetodisplaynative.types.d.ts.map

package/ts3.8/dist/js/tracing/utils.d.ts

@@ -1,5 +1,5 @@
-import type { IdleTransaction, Span, Transaction } from '@sentry/core';
-import type { TransactionContext, TransactionSource } from '@sentry/types';
+import type { IdleTransaction, Span as SpanClass, Transaction } from '@sentry/core';
+import type { Span, TransactionContext, TransactionSource } from '@sentry/types';
 export declare const defaultTransactionSource: TransactionSource;
 export declare const customTransactionSource: TransactionSource;
 export declare const getBlankTransactionContext: (name: string) => TransactionContext;
@@ -19,9 +19,14 @@ export declare function getTimeOriginMilliseconds(): number;
 /**
  * Calls the callback every time a child span of the transaction is finished.
  */
-export declare function instrumentChildSpanFinish(transaction: Transaction, callback: (span: Span, endTimestamp?: number) => void): void;
+export declare function instrumentChildSpanFinish(transaction: Transaction, callback: (span: SpanClass, endTimestamp?: number) => void): void;
 /**
  * Determines if the timestamp is now or within the specified margin of error from now.
  */
 export declare function isNearToNow(timestamp: number): boolean;
+/**
+ * Sets the duration of the span as a measurement.
+ * Uses `setMeasurement` function from @sentry/core.
+ */
+export declare function setSpanDurationAsMeasurement(name: string, span: Span): void;
 //# sourceMappingURL=utils.d.ts.map

package/ts3.8/dist/js/utils/sentryeventemitter.d.ts

@@ -0,0 +1,24 @@
+import type { NativeModule } from 'react-native';
+import { NativeEventEmitter } from 'react-native';
+export declare const NewFrameEventName = "rn_sentry_new_frame";
+export type NewFrameEventName = typeof NewFrameEventName;
+export type NewFrameEvent = {
+    newFrameTimestampInSeconds: number;
+};
+export interface SentryEventEmitter {
+    /**
+     * Initializes the native event emitter
+     * This method is synchronous in JS but the native event emitter starts asynchronously
+     * https://github.com/facebook/react-native/blob/d09c02f9e2d468e4d0bde51890e312ae7003a3e6/packages/react-native/React/Modules/RCTEventEmitter.m#L95
+     */
+    initAsync: (eventType: NewFrameEventName) => void;
+    closeAllAsync: () => void;
+    addListener: (eventType: NewFrameEventName, listener: (event: NewFrameEvent) => void) => void;
+    removeListener: (eventType: NewFrameEventName, listener: (event: NewFrameEvent) => void) => void;
+    once: (eventType: NewFrameEventName, listener: (event: NewFrameEvent) => void) => void;
+}
+/**
+ * Creates emitter that allows to listen to native RNSentry events
+ */
+export declare function createSentryEventEmitter(sentryNativeModule?: NativeModule | undefined, createNativeEventEmitter?: (nativeModule: NativeModule | undefined) => NativeEventEmitter): SentryEventEmitter;
+//# sourceMappingURL=sentryeventemitter.d.ts.map

package/ts3.8/dist/js/version.d.ts

@@ -1,4 +1,4 @@
 export declare const SDK_PACKAGE_NAME = "npm:@sentry/react-native";
 export declare const SDK_NAME = "sentry.javascript.react-native";
-export declare const SDK_VERSION = "5.19.2";
+export declare const SDK_VERSION = "5.20.0";
 //# sourceMappingURL=version.d.ts.map

package/ts3.8/dist/js/wrapper.d.ts

@@ -4,6 +4,10 @@ import type { NativeAppStartResponse, NativeDeviceContextsResponse, NativeFrames
 import type { ReactNativeClientOptions } from './options';
 import type * as Hermes from './profiling/hermes';
 import type { NativeAndroidProfileEvent, NativeProfileEvent } from './profiling/nativeTypes';
+/**
+ * Returns the RNSentry module. Dynamically resolves if NativeModule or TurboModule is used.
+ */
+export declare function getRNSentryModule(): Spec | undefined;
 export interface Screenshot {
     data: Uint8Array;
     contentType: string;
@@ -58,6 +62,7 @@ interface SentryNativeWrapper {
      * Fetches native stack frames and debug images for the instructions addresses.
      */
     fetchNativeStackFramesBy(instructionsAddr: number[]): NativeStackFrames | null;
+    initNativeReactNavigationNewFrameTracking(): Promise<void>;
 }
 /**
  * Our internal interface for calling native functions