Merge 1d8a0db into 7ec9441

Author: antonis

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

@@ -20,8 +20,8 @@ import {
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
-import { isValidEmail } from './utils';
+import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
+import { base64ToUint8Array, isValidEmail } from './utils';
 
 /**
  * @beta
@@ -100,12 +100,38 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     }
   };
 
-  public onScreenshotButtonPress: () => void = () => {
+  public onScreenshotButtonPress: () => void = async () => {
     if (!this.state.filename && !this.state.attachment) {
-      const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
-      onAddScreenshot((filename: string, attachement: Uint8Array) => {
-        this.setState({ filename, attachment: attachement });
-      });
+      const imagePickerConfiguration: ImagePickerConfiguration = this.props;
+      if (imagePickerConfiguration.imagePicker && imagePickerConfiguration.imagePicker.launchImageLibraryAsync) {
+        // expo-image-picker library is available
+        const result = await imagePickerConfiguration.imagePicker.launchImageLibraryAsync({
+          mediaTypes: ['images'], base64: true
+        });
+        if (!result.canceled) {
+          const filename = result.assets[0].fileName;
+          const attachement = base64ToUint8Array(result.assets[0].base64);
+          this.setState({ filename, attachment: attachement });
+        }
+      } else if (imagePickerConfiguration.imagePicker && imagePickerConfiguration.imagePicker.launchImageLibrary) {
+        // react-native-image-picker library is available
+        const result = await imagePickerConfiguration.imagePicker.launchImageLibrary({
+          mediaType: 'photo', includeBase64: true
+        });
+        if (!result.didCancel && !result.errorCode) {
+          const filename = result.assets[0].fileName;
+          const attachement = base64ToUint8Array(result.assets[0].base64);
+          this.setState({ filename, attachment: attachement });
+        }
+      } else {
+        logger.warn('No image picker library found. Please provide an image picker library to use this feature.');
+
+        // Defaulting to the onAddScreenshot callback
+        const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
+        onAddScreenshot((filename: string, attachement: Uint8Array) => {
+          this.setState({ filename, attachment: attachement });
+        });
+      }
     } else {
       this.setState({ filename: undefined, attachment: undefined });
     }
@@ -118,6 +144,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const { name, email, description } = this.state;
     const { onFormClose } = this.props;
     const config: FeedbackGeneralConfiguration = this.props;
+    const imagePickerConfiguration: ImagePickerConfiguration = this.props;
     const text: FeedbackTextConfiguration = this.props;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
@@ -191,7 +218,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                 onChangeText={(value) => this.setState({ description: value })}
                 multiline
               />
-              {config.enableScreenshot && (
+              {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
                 <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
                   <Text style={styles.screenshotText}>
                   {!this.state.filename && !this.state.attachment

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

@@ -4,7 +4,11 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 /**
  * The props for the feedback form
  */
-export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
+export interface FeedbackFormProps
+  extends FeedbackGeneralConfiguration,
+    FeedbackTextConfiguration,
+    FeedbackCallbacks,
+    ImagePickerConfiguration {
   styles?: FeedbackFormStyles;
 }
 
@@ -187,6 +191,45 @@ export interface FeedbackCallbacks {
   onFormSubmitted?: () => void;
 }
 
+/**
+ * Image Picker configuration interfact matching `expo-image-picker` and `react-native-image-picker`
+ */
+export interface ImagePickerConfiguration {
+  imagePicker?: ImagePicker;
+}
+
+interface ExpoImagePickerResponse {
+  canceled?: boolean;
+  assets?: ImagePickerAsset[];
+}
+
+interface ReactNativeImagePickerResponse {
+  didCancel?: boolean;
+  errorCode?: string;
+  assets?: ImagePickerAsset[];
+}
+
+interface ImagePickerAsset {
+  fileName?: string;
+  base64?: string;
+}
+
+interface ExpoImageLibraryOptions {
+  mediaTypes?: any[];
+  base64?: boolean;
+}
+
+interface ReactNativeImageLibraryOptions {
+  mediaType: any;
+  includeBase64?: boolean;
+}
+
+interface ImagePicker {
+  launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ExpoImagePickerResponse>;
+
+  launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ReactNativeImagePickerResponse>;
+}
+
 /**
  * The styles for the feedback form
  */

packages/core/src/js/feedback/utils.ts

@@ -14,3 +14,33 @@ export const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(email);
 };
+
+/* eslint-disable no-bitwise */
+export const base64ToUint8Array = (base64?: string): Uint8Array | undefined => {
+  if (!base64) return undefined;
+
+  const cleanedBase64 = base64.replace(/^data:.*;base64,/, ''); // Remove any prefix before the base64 string
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  const bytes: number[] = [];
+
+  let buffer = 0;
+  let bits = 0;
+
+  for (const char of cleanedBase64) {
+    if (char === '=') break;
+
+    const value = chars.indexOf(char); // Validate each character
+    if (value === -1) return undefined;
+
+    buffer = (buffer << 6) | value; // Shift 6 bits to the left and add the value
+    bits += 6;
+
+    if (bits >= 8) {
+      // Add a byte when we have 8 or more bits
+      bits -= 8;
+      bytes.push((buffer >> bits) & 0xff);
+    }
+  }
+
+  return new Uint8Array(bytes);
+};

samples/expo/app/(tabs)/index.tsx

@@ -57,6 +57,12 @@ export default function TabOneScreen() {
           Sentry.nativeCrash();
         }}
       />
+      <Button
+        title="Show feedback form"
+        onPress={() => {
+          Sentry.showFeedbackForm();
+        }}
+      />
       <Button
         title="Set Scope Properties"
         onPress={() => {

samples/expo/app/_layout.tsx

@@ -11,6 +11,7 @@ import { ErrorEvent } from '@sentry/core';
 import { isExpoGo } from '../utils/isExpoGo';
 import { LogBox } from 'react-native';
 import { isWeb } from '../utils/isWeb';
+import * as ImagePicker from 'expo-image-picker';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -57,6 +58,9 @@ Sentry.init({
       }),
       navigationIntegration,
       Sentry.reactNativeTracingIntegration(),
+      Sentry.feedbackIntegration({
+        imagePicker: ImagePicker,
+      }),
     );
     if (isWeb()) {
       integrations.push(Sentry.browserReplayIntegration());

samples/expo/package.json

@@ -20,6 +20,7 @@
     "@types/react": "~18.3.12",
     "expo": "^52.0.0",
     "expo-constants": "~17.0.3",
+    "expo-image-picker": "~16.0.5",
     "expo-linking": "~7.0.2",
     "expo-router": "~4.0.5",
     "expo-status-bar": "~2.0.0",

samples/react-native/package.json

@@ -31,7 +31,6 @@
     "react-native": "0.77.0",
     "react-native-gesture-handler": "^2.22.1",
     "react-native-image-picker": "^7.2.2",
-    "react-native-quick-base64": "^2.1.2",
     "react-native-reanimated": "3.16.7",
     "react-native-safe-area-context": "5.2.0",
     "react-native-screens": "4.6.0",

samples/react-native/src/App.tsx

@@ -37,8 +37,7 @@ import { ErrorEvent } from '@sentry/core';
 import HeavyNavigationScreen from './Screens/HeavyNavigationScreen';
 import WebviewScreen from './Screens/WebviewScreen';
 import { isTurboModuleEnabled } from '@sentry/react-native/dist/js/utils/environment';
-import { toByteArray } from 'react-native-quick-base64';
-import { launchImageLibrary } from 'react-native-image-picker';
+import * as ImagePicker from 'react-native-image-picker';
 
 if (typeof setImmediate === 'undefined') {
   require('setimmediate');
@@ -107,6 +106,7 @@ Sentry.init({
           : true,
       }),
       Sentry.feedbackIntegration({
+        imagePicker: ImagePicker,
         styles:{
           submitButton: {
             backgroundColor: '#6a1b9a',
@@ -153,23 +153,6 @@ const Stack = isMobileOs
   : createStackNavigator();
 const Tab = createBottomTabNavigator();
 
-const handleChooseImage = (attachFile: (filename: string, data: Uint8Array) => void): void => {
-  launchImageLibrary({ mediaType: 'photo', includeBase64: true }, (response) => {
-    if (response.didCancel) {
-      console.log('User cancelled image picker');
-    } else if (response.errorCode) {
-      console.log('ImagePicker Error: ', response.errorMessage);
-    } else if (response.assets && response.assets.length > 0) {
-      const filename = response.assets[0].fileName;
-      const base64String = response.assets[0].base64;
-      const screenShotUint8Array = toByteArray(base64String);
-      if (filename && screenShotUint8Array) {
-        attachFile(filename, screenShotUint8Array);
-      }
-    }
-  });
-};
-
 const ErrorsTabNavigator = Sentry.withProfiler(
   () => {
     return (
@@ -189,7 +172,6 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                 <FeedbackForm
                   {...props}
                   enableScreenshot={true}
-                  onAddScreenshot={handleChooseImage}
                   onFormClose={props.navigation.goBack}
                   onFormSubmitted={props.navigation.goBack}
                   styles={{

yarn.lock

@@ -14686,6 +14686,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-image-loader@npm:~5.0.0":
+  version: 5.0.0
+  resolution: "expo-image-loader@npm:5.0.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 7741b4b926124a1f85e51b0b8c8c9adc37fccf0654eaa0e715cb55cffc716bdc149c0421120f9bec69a69643d3328ec8562899b4aa37a0fdcecfb6fe3cf6f985
+  languageName: node
+  linkType: hard
+
+"expo-image-picker@npm:~16.0.5":
+  version: 16.0.5
+  resolution: "expo-image-picker@npm:16.0.5"
+  dependencies:
+    expo-image-loader: ~5.0.0
+  peerDependencies:
+    expo: "*"
+  checksum: 8391455480d07a2fa785a0246b8eb892d393e64173f4663d77ee26bc497a0f52d9e1690b0fa04094d03ada8cc78aa5477505d870bdcbdb05d5c48c791ddac168
+  languageName: node
+  linkType: hard
+
 "expo-keep-awake@npm:~14.0.1":
   version: 14.0.1
   resolution: "expo-keep-awake@npm:14.0.1"
@@ -22988,18 +23008,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-quick-base64@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "react-native-quick-base64@npm:2.1.2"
-  dependencies:
-    base64-js: ^1.5.1
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 46f3b26f48b26978686b0c043336220d681e6a02af5abcf3eb4ab7b9216251d1eb2fac5c559e984d963e93f54bd9f323651daac09762196815558abbd551729b
-  languageName: node
-  linkType: hard
-
 "react-native-reanimated@npm:3.16.7":
   version: 3.16.7
   resolution: "react-native-reanimated@npm:3.16.7"
@@ -24599,6 +24607,7 @@ __metadata:
     "@types/react": ~18.3.12
     expo: ^52.0.0
     expo-constants: ~17.0.3
+    expo-image-picker: ~16.0.5
     expo-linking: ~7.0.2
     expo-router: ~4.0.5
     expo-status-bar: ~2.0.0
@@ -24695,7 +24704,6 @@ __metadata:
     react-native: 0.77.0
     react-native-gesture-handler: ^2.22.1
     react-native-image-picker: ^7.2.2
-    react-native-quick-base64: ^2.1.2
     react-native-reanimated: 3.16.7
     react-native-safe-area-context: 5.2.0
     react-native-screens: 4.6.0