feat: Screenshots

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Features
 
 - Add `maxQueueSize` option ([#2578](https://github.com/getsentry/sentry-react-native/pull/2578))
+- Screenshots ([#2373](https://github.com/getsentry/sentry-react-native/pull/2373))
 
 ### Dependencies
 

android/src/main/java/io/sentry/react/RNSentryModule.java

@@ -4,7 +4,10 @@
 import android.content.Context;
 import android.content.pm.PackageInfo;
 import android.content.pm.PackageManager;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
 import android.util.SparseIntArray;
+import android.view.View;
 
 import androidx.core.app.FrameMetricsAggregator;
 
@@ -17,8 +20,11 @@
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeArray;
+import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.module.annotations.ReactModule;
 
+import java.io.ByteArrayOutputStream;
 import java.io.File;
 import java.io.FileOutputStream;
 import java.util.Date;
@@ -127,6 +133,9 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
                 // by default we hide.
                 options.setAttachThreads(rnOptions.getBoolean("attachThreads"));
             }
+/*            if (rnOptions.hasKey("attachScreenshot")) {
+                options.setAttachScreenshot(rnOptions.getBoolean("attachScreenshot"));
+            }*/
             if (rnOptions.hasKey("sendDefaultPii")) {
                 options.setSendDefaultPii(rnOptions.getBoolean("sendDefaultPii"));
             }
@@ -290,6 +299,58 @@ public void captureEnvelope(ReadableArray rawBytes, ReadableMap options, Promise
         promise.resolve(true);
     }
 
+    @ReactMethod
+    public void captureScreenshot(Promise promise) {
+        final Activity activity = this.getReactApplicationContext().getCurrentActivity();
+        if (activity == null
+                || activity.isFinishing()
+                || activity.getWindow() == null
+                || activity.getWindow().getDecorView() == null
+                || activity.getWindow().getDecorView().getRootView() == null) {
+            promise.reject("Invalid Activity Error", "Activity isn't valid, not taking screenshot.");
+            return;
+        }
+
+        final View view = activity.getWindow().getDecorView().getRootView();
+
+        if (view.getWidth() <= 0 || view.getHeight() <= 0) {
+            promise.reject("Zero Size View Error", "View's width and height is zeroed, not taking screenshot.");
+            return;
+        }
+
+        try {
+            // ARGB_8888 -> This configuration is very flexible and offers the best quality
+            final Bitmap bitmap =
+                    Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
+
+            final Canvas canvas = new Canvas(bitmap);
+            view.draw(canvas);
+
+            final ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
+
+            // 0 meaning compress for small size, 100 meaning compress for max quality.
+            // Some formats, like PNG which is lossless, will ignore the quality setting.
+            bitmap.compress(Bitmap.CompressFormat.PNG, 0, byteArrayOutputStream);
+
+            if (byteArrayOutputStream.size() <= 0) {
+                throw new Exception("Screenshot is 0 bytes, not attaching the image.");
+            }
+
+            // screenshot png is around ~100-150 kb
+            final WritableNativeArray screenshot = new WritableNativeArray();
+            for (final byte b:byteArrayOutputStream.toByteArray()) {
+                screenshot.pushInt(b);
+            }
+            final WritableMap result = new WritableNativeMap();
+            result.putString("contentType", "image/png");
+            result.putArray("data", screenshot);
+            result.putString("filename", "screenshot.png");
+            promise.resolve(result);
+        } catch (Throwable e) {
+            promise.reject("Screenshot Failed Error", e);
+        }
+    }
+
     private static PackageInfo getPackageInfo(Context ctx) {
         try {
             return ctx.getPackageManager().getPackageInfo(ctx.getPackageName(), 0);

ios/RNSentry.m

@@ -291,6 +291,33 @@ - (void)setEventEnvironmentTag:(SentryEvent *)event
     resolve(@YES);
 }
 
+RCT_EXPORT_METHOD(captureScreenshot: (RCTPromiseResolveBlock)resolve
+                  rejecter: (RCTPromiseRejectBlock)reject)
+{
+    NSData *data;
+    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
+    UIGraphicsBeginImageContext(window.frame.size);
+
+    if ([window drawViewHierarchyInRect:window.bounds afterScreenUpdates:false]) {
+        UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
+        data = UIImagePNGRepresentation(img);
+    }
+
+    UIGraphicsEndImageContext();
+
+    NSMutableArray *screenshot = [NSMutableArray arrayWithCapacity:data.length];
+    const char *bytes = [data bytes];
+    for (int i = 0; i < [data length]; i++) {
+        [screenshot addObject:[[NSNumber alloc] initWithChar:bytes[i]]];
+    }
+
+    resolve(@{
+        @"data": screenshot,
+        @"contentType": @"image/png",
+        @"filename": @"screenshot.png",
+    });
+}
+
 RCT_EXPORT_METHOD(setUser:(NSDictionary *)userKeys
                   otherUserKeys:(NSDictionary *)userDataKeys
 )

sample/src/App.tsx

@@ -62,6 +62,8 @@ Sentry.init({
   // release: '[email protected]+1',
   // dist: `1`,
   attachStacktrace: true,
+  // Attach screenshots to events.
+  attachScreenshot: true,
 });
 
 const Stack = createStackNavigator();

src/js/client.ts

@@ -81,8 +81,9 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
   /**
    * @inheritDoc
    */
-  public eventFromException(_exception: unknown, _hint?: EventHint): PromiseLike<Event> {
-    return this._browserClient.eventFromException(_exception, _hint);
+  public async eventFromException(_exception: unknown, _hint: EventHint = {}): Promise<Event> {
+    const hint = await this._attachScreenshotToEventHint(_hint);
+    return this._browserClient.eventFromException(_exception, hint);
   }
 
   /**
@@ -204,4 +205,22 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
       envelope[items].push(clientReportItem);
     }
   }
+
+  /**
+   * If enabled attaches a screenshot to the event hint.
+   */
+  private async _attachScreenshotToEventHint(hint: EventHint): Promise<EventHint> {
+    if (!this._options.attachScreenshot) {
+      return hint;
+    }
+
+    const screenshot = await NATIVE.captureScreenshot();
+    if (screenshot) {
+      hint.attachments = [
+        screenshot,
+        ...(hint?.attachments || []),
+      ];
+    }
+    return hint;
+  }
 }

src/js/definitions.ts

@@ -24,6 +24,12 @@ export type NativeDeviceContextsResponse = {
   [key: string]: Record<string, unknown>;
 };
 
+export interface NativeScreenshot {
+  data: number[];
+  contentType: string;
+  filename: string;
+}
+
 interface SerializedObject {
   [key: string]: string;
 }
@@ -37,6 +43,7 @@ export interface SentryNativeBridgeModule {
       store: boolean,
     },
   ): PromiseLike<boolean>;
+  captureScreenshot(): PromiseLike<NativeScreenshot>;
   clearBreadcrumbs(): void;
   crash(): void;
   closeNativeSdk(): PromiseLike<void>;

src/js/options.ts

@@ -126,6 +126,13 @@ export interface BaseReactNativeOptions {
    * The max queue size for capping the number of envelopes waiting to be sent by Transport.
    */
   maxQueueSize?: number;
+
+  /**
+   * When enabled and a user experiences an error, Sentry provides the ability to take a screenshot and include it as an attachment.
+   *
+   * @default false
+   */
+  attachScreenshot?: boolean;
 }
 
 export interface ReactNativeTransportOptions extends BrowserTransportOptions {

src/js/wrapper.ts

@@ -26,6 +26,12 @@ import { utf8ToBytes } from './vendor';
 
 const RNSentry = NativeModules.RNSentry as SentryNativeBridgeModule | undefined;
 
+export interface Screenshot {
+  data: Uint8Array;
+  contentType: string;
+  filename: string;
+}
+
 interface SentryNativeWrapper {
   enableNative: boolean;
   nativeIsReady: boolean;
@@ -49,6 +55,7 @@ interface SentryNativeWrapper {
   closeNativeSdk(): PromiseLike<void>;
 
   sendEnvelope(envelope: Envelope): Promise<void>;
+  captureScreenshot(): Promise<Screenshot | null>;
 
   fetchNativeRelease(): PromiseLike<NativeReleaseResponse>;
   fetchNativeDeviceContexts(): PromiseLike<NativeDeviceContextsResponse>;
@@ -438,6 +445,26 @@ export const NATIVE: SentryNativeWrapper = {
     return this.enableNative && this._isModuleLoaded(RNSentry);
   },
 
+  async captureScreenshot(): Promise<Screenshot | null> {
+    if (!this.enableNative) {
+      throw this._DisabledNativeError;
+    }
+    if (!this._isModuleLoaded(RNSentry)) {
+      throw this._NativeClientError;
+    }
+
+    try {
+      const raw = await RNSentry.captureScreenshot();
+      return {
+        ...raw,
+        data: new Uint8Array(raw.data),
+      }
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  },
+
   /**
    * Gets the event from envelopeItem and applies the level filter to the selected event.
    * @param data An envelope item containing the event.