feat(feedback): Screenshot button (#4714)

* Update the client implementation to use the new capture feedback js api

* Updates SDK API

* Adds new feedback button in the sample

* Adds changelog

* Removes unused mock

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Directly use captureFeedback from sentry/core

* Use import from core

* Fixes imports order lint issue

* Fixes build issue

* Adds captureFeedback tests from sentry-javascript

* Update CHANGELOG.md

* Only deprecate client captureUserFeedback

* Add simple form UI

* Adds basic form functionality

* Update imports

* Update imports

* Remove useState hook to avoid multiple react instances issues

* Move types and styles in different files

* Removes attachment button to be added back separately along with the implementation

* Add basic field validation

* Adds changelog

* Updates changelog

* Updates changelog

* Trim whitespaces from the submitted feedback

* Adds tests

* Renames FeedbackFormScreen to FeedbackForm

* Add beta label

* Extract default text to constants

* Moves constant to a separate file and aligns naming with JS

* Adds input text labels

* Close screen before sending the feedback to minimise wait time

Co-authored-by: LucasZF <[email protected]>

* Rename file for consistency

* Flatten configuration hierarchy and clean up

* Align required values with JS

* Use Sentry user email and name when set

* Simplifies email validation

* Show success alert message

* Aligns naming with JS and unmounts the form by default

* Use the minimum config without props in the changelog

* Adds development not for unimplemented function

* Show email and name conditionally

* Adds sentry branding (png logo)

* Adds sentry logo resource

* Add assets in module exports

* Revert "Add assets in module exports"

This reverts commit 5292475.

* Revert "Adds sentry logo resource"

This reverts commit d6e9229.

* Revert "Adds sentry branding (png logo)"

This reverts commit 8c56753.

* Add last event id

* Mock lastEventId

* Adds beta note in the changelog

* Autoinject feedback form

* Updates changelog

* Align colors with JS

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Use regular fonts for both buttons

* Handle keyboard properly

* Adds an option on whether the email should be validated

* Merge properties only once

* Loads current user data on form construction

* Remove unneeded extra padding

* Fix background color issue

* Adds feedback button

* Updates the changelog

* Fixes changelog typo

* Updates styles background color

Co-authored-by: Krystof Woldrich <[email protected]>

* Use defaultProps

* Correct defaultProps

* Adds test to verify when getUser is called

* Use smaller image

Co-authored-by: LucasZF <[email protected]>

* Add margin next to the icon

* Adds bottom spacing in the ErrorScreen so that the feedback button does not hide the scrollview buttons

* (2.2) feat: Add Feedback Form UI Branding logo (#4357)

* Adds sentry branding logo as a base64 encoded png

---------

Co-authored-by: LucasZF <[email protected]>

* Autoinject feedback form (#4370)

* Align changelog entry

* Update changelog

* Disable bouncing

* Add modal ui appearance

* Update snapshot tests

* Fix bottom margin

* Fix sheet height

* Remove extra modal border

* Do not expose modal styles

* Animate background color

* Avoid keyboard in modal

* Update changelog

* Fix changelog

* Updates comment

* Extract FeedbackButtonProps

* Add public function description to satisfy lint check

* Adds tests

* Fix tests

* Add hardcoded dark and light color themes

* Rename theme options

* Update snapshot tests

* Include in the feedback integration

* Fix circular dependency

* Add theme integration options

* Adds changelog

* Add comment note

* Align with JS api

* Remove unneeded line

Co-authored-by: Krystof Woldrich <[email protected]>

* Place widget button below the feedback widget shadow

* Expose showFeedbackButton/hideFeedbackButton methods

* Add dummy integration for tracking usage

* Adds button border

* Fixes tests

* Add accentBackground and accentForeground colors

* Extract integration getter in a helper function

* Adds dynamic theming support

* Add snapshot tests

* Show screenshot button UI

* Add screenshot button integration

* Add screenshot icon

* Adds Take a screenshot button in FeedbackWidget

* Updates snapshot tests

* Fix circularDepCheck

* Fix circularDepCheck

* Attache captured screenshot

* Hide the take screenshot button when there is a screenshot

* Convert uint8Array to Base64 on the native side

* Adds snapshot tests

* Disable functionality on the Web

* Add screenshot button in the sample expo app

* Adds system theme tests

* Test dynamically changed theme

* Remove showScreenshotButton and hideScreenshotButton from the exposed api

* Fix function name typo

* Adds enableTakeScreenshot option

* Adds happy flow test

* Make flow tests more granular

* Increate wait time out to fix flakiness on ci

* Reset widget state after each test

* Fix CI flakiness

* Remove flaky test

* Delay capture to allow the button to hide

* Add comment explaining the reasoning of the call

* Define defaultProps in smaller scope

* Define customStyles in smaller scope

* Also check remove screenshot button

* Fixes the name and double negation not null

---------

Co-authored-by: Krystof Woldrich <[email protected]>
Co-authored-by: LucasZF <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - Adds the `FeedbackButton` component that shows the Feedback Widget ([#4378](https://github.com/getsentry/sentry-react-native/pull/4378))
 - Add Feedback Widget theming ([#4677](https://github.com/getsentry/sentry-react-native/pull/4677))
+- Adds the `ScreenshotButton` component that takes a screenshot ([#4714](https://github.com/getsentry/sentry-react-native/issues/4714))
 
 ### Fixes
 

packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java

@@ -20,6 +20,7 @@
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.facebook.react.bridge.ReadableType;
@@ -1027,6 +1028,15 @@ public void getDataFromUri(String uri, Promise promise) {
     }
   }
 
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    byte[] bytes = new byte[array.size()];
+    for (int i = 0; i < array.size(); i++) {
+      bytes[i] = (byte) array.getInt(i);
+    }
+    String base64String = android.util.Base64.encodeToString(bytes, android.util.Base64.DEFAULT);
+    promise.resolve(base64String);
+  }
+
   public void crashedLastRun(Promise promise) {
     promise.resolve(Sentry.isCrashedLastRun());
   }

packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java

@@ -183,6 +183,11 @@ public void getDataFromUri(String uri, Promise promise) {
     this.impl.getDataFromUri(uri, promise);
   }
 
+  @Override
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    this.impl.encodeToBase64(array, promise);
+  }
+
   @Override
   public void popTimeToDisplayFor(String key, Promise promise) {
     this.impl.popTimeToDisplayFor(key, promise);

packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java

@@ -157,6 +157,11 @@ public void getDataFromUri(String uri, Promise promise) {
     this.impl.getDataFromUri(uri, promise);
   }
 
+  @ReactMethod
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    this.impl.encodeToBase64(array, promise);
+  }
+
   @ReactMethod(isBlockingSynchronousMethod = true)
   public WritableMap fetchNativeStackFramesBy(ReadableArray instructionsAddr) {
     // Not used on Android

packages/core/ios/RNSentry.mm

@@ -970,4 +970,28 @@ + (SentryUser *_Nullable)userFrom:(NSDictionary *)userKeys
     return @YES; // The return ensures that the method is synchronous
 }
 
+RCT_EXPORT_METHOD(encodeToBase64
+                  : (NSArray *)array resolver
+                  : (RCTPromiseResolveBlock)resolve rejecter
+                  : (RCTPromiseRejectBlock)reject)
+{
+    NSUInteger count = array.count;
+    uint8_t *bytes = (uint8_t *)malloc(count);
+
+    if (!bytes) {
+        reject(@"encodeToBase64", @"Memory allocation failed", nil);
+        return;
+    }
+
+    for (NSUInteger i = 0; i < count; i++) {
+        bytes[i] = (uint8_t)[array[i] unsignedCharValue];
+    }
+
+    NSData *data = [NSData dataWithBytes:bytes length:count];
+    free(bytes);
+
+    NSString *base64String = [data base64EncodedStringWithOptions:0];
+    resolve(base64String);
+}
+
 @end

packages/core/src/js/NativeRNSentry.ts

@@ -51,6 +51,7 @@ export interface Spec extends TurboModule {
   getDataFromUri(uri: string): Promise<number[]>;
   popTimeToDisplayFor(key: string): Promise<number | undefined | null>;
   setActiveSpanId(spanId: string): boolean;
+  encodeToBase64(data: number[]): Promise<string | undefined | null>;
 }
 
 export type NativeStackFrame = {

packages/core/src/js/feedback/FeedbackWidget.styles.ts

@@ -63,6 +63,20 @@ const defaultStyles = (theme: FeedbackWidgetTheme): FeedbackWidgetStyles => {
       color: theme.foreground,
       fontSize: 16,
     },
+    takeScreenshotButton: {
+      backgroundColor: theme.background,
+      padding: 15,
+      borderRadius: 5,
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: theme.border,
+      marginTop: -10,
+      marginBottom: 20,
+    },
+    takeScreenshotText: {
+      color: theme.foreground,
+      fontSize: 16,
+    },
     submitButton: {
       backgroundColor: theme.accentBackground,
       paddingVertical: 15,
@@ -132,6 +146,8 @@ export const defaultButtonStyles = (theme: FeedbackWidgetTheme): FeedbackButtonS
   };
 };
 
+export const defaultScreenshotButtonStyles = defaultButtonStyles;
+
 export const modalWrapper: ViewStyle = {
   position: 'absolute',
   top: 0,

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import type { SendFeedbackParams } from '@sentry/core';
 import { captureFeedback, getCurrentScope, lastEventId, logger } from '@sentry/core';
 import * as React from 'react';
@@ -15,13 +16,15 @@ import {
 } from 'react-native';
 
 import { isWeb, notWeb } from '../utils/environment';
-import { getDataFromUri } from '../wrapper';
+import type { Screenshot } from '../wrapper';
+import { getDataFromUri, NATIVE } from '../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackWidget.styles';
 import { getTheme } from './FeedbackWidget.theme';
 import type { FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, ImagePickerConfiguration } from './FeedbackWidget.types';
 import { lazyLoadFeedbackIntegration } from './lazy';
+import { getCapturedScreenshot } from './ScreenshotButton';
 import { base64ToUint8Array, feedbackAlertDialog, isValidEmail  } from './utils';
 
 /**
@@ -69,6 +72,20 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     lazyLoadFeedbackIntegration();
   }
 
+  /**
+   * For testing purposes only.
+   */
+  public static reset(): void {
+    FeedbackWidget._savedState = {
+      name: '',
+      email: '',
+      description: '',
+      filename: undefined,
+      attachment: undefined,
+      attachmentUri: undefined,
+    };
+  }
+
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
     const { onSubmitSuccess, onSubmitError, onFormSubmitted } = this.props;
@@ -123,7 +140,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
   };
 
   public onScreenshotButtonPress: () => void = async () => {
-    if (!this.state.filename && !this.state.attachment) {
+    if (!this._hasScreenshot()) {
       const imagePickerConfiguration: ImagePickerConfiguration = this.props;
       if (imagePickerConfiguration.imagePicker) {
         const launchImageLibrary = imagePickerConfiguration.imagePicker.launchImageLibraryAsync
@@ -238,6 +255,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
       return null;
     }
 
+    const screenshot = getCapturedScreenshot();
+    if (screenshot) {
+      this._setCapturedScreenshot(screenshot);
+    }
+
     return (
       <TouchableWithoutFeedback onPress={notWeb() ? Keyboard.dismiss: undefined}>
         <View style={styles.container}>
@@ -294,7 +316,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
             onChangeText={(value) => this.setState({ description: value })}
             multiline
           />
-          {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
+          {(config.enableScreenshot || imagePickerConfiguration.imagePicker || this._hasScreenshot()) && (
             <View style={styles.screenshotContainer}>
               {this.state.attachmentUri && (
                 <Image
@@ -304,13 +326,24 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
               )}
               <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
                 <Text style={styles.screenshotText}>
-                  {!this.state.filename && !this.state.attachment
+                  {!this._hasScreenshot()
                     ? text.addScreenshotButtonLabel
                     : text.removeScreenshotButtonLabel}
                 </Text>
               </TouchableOpacity>
             </View>
           )}
+          {notWeb() && config.enableTakeScreenshot && !this.state.attachmentUri && (
+            <TouchableOpacity style={styles.takeScreenshotButton} onPress={() => {
+              // eslint-disable-next-line @typescript-eslint/no-var-requires
+              const { hideFeedbackButton, showScreenshotButton } = require('./FeedbackWidgetManager');
+              hideFeedbackButton();
+              onCancel();
+              showScreenshotButton();
+            }}>
+              <Text style={styles.takeScreenshotText}>{text.captureScreenshotButtonLabel}</Text>
+            </TouchableOpacity>
+          )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
             <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
           </TouchableOpacity>
@@ -323,6 +356,24 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     );
   }
 
+  private _setCapturedScreenshot = (screenshot: Screenshot): void => {
+    if (screenshot.data != null) {
+      logger.debug('Setting captured screenshot:', screenshot.filename);
+      NATIVE.encodeToBase64(screenshot.data).then((base64String) => {
+        if (base64String != null) {
+          const dataUri = `data:${screenshot.contentType};base64,${base64String}`;
+          this.setState({ filename: screenshot.filename, attachment: screenshot.data, attachmentUri: dataUri });
+        } else {
+          logger.error('Failed to read image data from:', screenshot.filename);
+        }
+      }).catch((error) => {
+        logger.error('Failed to read image data from:', screenshot.filename, 'error: ', error);
+      });
+    } else {
+      logger.error('Failed to read image data from:', screenshot.filename);
+    }
+  }
+
   private _saveFormState = (): void => {
     FeedbackWidget._savedState = { ...this.state };
   };
@@ -337,4 +388,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
       attachmentUri: undefined,
     };
   };
+
+  private _hasScreenshot = (): boolean => {
+    return this.state.filename !== undefined && this.state.attachment !== undefined && this.state.attachmentUri !== undefined;
+  }
 }

packages/core/src/js/feedback/FeedbackWidget.types.ts

@@ -54,6 +54,12 @@ export interface FeedbackGeneralConfiguration {
    */
   enableScreenshot?: boolean;
 
+  /**
+   * This flag determines whether the "Take Screenshot" button is displayed
+   * @default false
+   */
+  enableTakeScreenshot?: boolean;
+
   /**
    * Fill in email/name input fields with Sentry user context if it exists.
    * The value of the email/name keys represent the properties of your user context.
@@ -124,15 +130,20 @@ export interface FeedbackTextConfiguration {
   isRequiredLabel?: string;
 
   /**
-   * The label for the button that adds a screenshot and renders the image editor
+   * The label for the button that adds a screenshot
    */
   addScreenshotButtonLabel?: string;
 
   /**
-   * The label for the button that removes a screenshot and hides the image editor
+   * The label for the button that removes a screenshot
    */
   removeScreenshotButtonLabel?: string;
 
+  /**
+   * The label for the button that shows the capture screenshot button
+   */
+  captureScreenshotButtonLabel?: string;
+
   /**
    * The title of the error dialog
    */
@@ -169,6 +180,21 @@ export interface FeedbackButtonTextConfiguration {
   triggerAriaLabel?: string;
 }
 
+/**
+ * The ScreenshotButton text labels that can be customized
+ */
+export interface ScreenshotButtonTextConfiguration {
+  /**
+   * The label for the Screenshot button
+   */
+  triggerLabel?: string;
+
+  /**
+   * The aria label for the Screenshot button
+   */
+  triggerAriaLabel?: string;
+}
+
 /**
  * The public callbacks available for the feedback integration
  */
@@ -258,6 +284,8 @@ export interface FeedbackWidgetStyles {
   screenshotContainer?: ViewStyle;
   screenshotThumbnail?: ImageStyle;
   screenshotText?: TextStyle;
+  takeScreenshotButton?: ViewStyle;
+  takeScreenshotText?: TextStyle;
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
 }
@@ -278,6 +306,22 @@ export interface FeedbackButtonStyles {
   triggerIcon?: ImageStyle;
 }
 
+/**
+ * The props for the screenshot button
+ */
+export interface ScreenshotButtonProps extends ScreenshotButtonTextConfiguration {
+  styles?: ScreenshotButtonStyles;
+}
+
+/**
+ * The styles for the screenshot button
+ */
+export interface ScreenshotButtonStyles {
+  triggerButton?: ViewStyle;
+  triggerText?: TextStyle;
+  triggerIcon?: ImageStyle;
+}
+
 /**
  * The state of the feedback form
  */