feat(react-native): Add Feedback Widget step

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - fix(apple): add support for synchronized Xcode folders ([#904](https://github.com/getsentry/sentry-wizard/pull/904))
+- feat(react-native): Add Feedback Widget step ([#969](https://github.com/getsentry/sentry-wizard/pull/969))
 
 ## 4.8.0
 

e2e-tests/tests/expo.test.ts

@@ -30,11 +30,18 @@ describe('Expo', () => {
       [KEYS.DOWN, KEYS.DOWN, KEYS.ENTER],
       'Do you want to enable Session Replay to help debug issues? (See https://docs.sentry.io/platforms/react-native/session-replay/)',
     ));
-    const testEventPrompted =
+    const feedbackWidgetPrompted =
     sessionReplayPrompted &&
       (await wizardInstance.sendStdinAndWaitForOutput(
         // Enable session replay
         [KEYS.ENTER],
+        'Do you want to enable the Feedback Widget to collect feedback from your users? (See https://docs.sentry.io/platforms/react-native/user-feedback/)',
+      ));
+    const testEventPrompted =
+    feedbackWidgetPrompted &&
+      (await wizardInstance.sendStdinAndWaitForOutput(
+        // Enable feedback widget
+        [KEYS.ENTER],
         'Have you successfully sent a test event?',
       ));
     testEventPrompted &&
@@ -66,7 +73,7 @@ Sentry.init({
   // Configure Session Replay
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1,
-  integrations: [Sentry.mobileReplayIntegration()],
+  integrations: [Sentry.mobileReplayIntegration(), Sentry.feedbackIntegration()],
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: __DEV__,

e2e-tests/tests/react-native.test.ts

@@ -24,13 +24,20 @@ describe('ReactNative', () => {
         [KEYS.DOWN, KEYS.DOWN, KEYS.ENTER],
         'Do you want to enable Session Replay to help debug issues? (See https://docs.sentry.io/platforms/react-native/session-replay/)',
       ));
+    const feedbackWidgetPrompted =
+      sessionReplayPrompted &&
+      (await wizardInstance.sendStdinAndWaitForOutput(
+        // Enable session replay
+        [KEYS.ENTER],
+        'Do you want to enable the Feedback Widget to collect feedback from your users? (See https://docs.sentry.io/platforms/react-native/user-feedback/)',
+      ));
     const prettierPrompted =
-    sessionReplayPrompted &&
-    (await wizardInstance.sendStdinAndWaitForOutput(
-      // Enable session replay
-      [KEYS.ENTER],
-      'Looks like you have Prettier in your project. Do you want to run it on your files?',
-    ));
+      feedbackWidgetPrompted &&
+      (await wizardInstance.sendStdinAndWaitForOutput(
+        // Enable feedback widget
+        [KEYS.ENTER],
+        'Looks like you have Prettier in your project. Do you want to run it on your files?',
+      ));
     const testEventPrompted =
       prettierPrompted &&
       (await wizardInstance.sendStdinAndWaitForOutput(
@@ -80,7 +87,7 @@ Sentry.init({
   // Configure Session Replay
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1,
-  integrations: [Sentry.mobileReplayIntegration()],
+  integrations: [Sentry.mobileReplayIntegration(), Sentry.feedbackIntegration()],
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: __DEV__,

src/react-native/javascript.ts

@@ -16,15 +16,17 @@
 import { generateCode, ProxifiedModule, parseModule } from 'magicast';
 import * as t from '@babel/types';
 
-const sessionReplaySampleRate = 0.1;
-const sessionReplayOnErrorSampleRate = 1.0;
+export const sessionReplaySampleRate = 0.1;
+export const sessionReplayOnErrorSampleRate = 1.0;
 
 export async function addSentryInit({
   dsn,
   enableSessionReplay = false,
+  enableFeedbackWidget = false,
 }: {
   dsn: string;
   enableSessionReplay?: boolean;
+  enableFeedbackWidget?: boolean;
 }) {
   const jsPath = getMainAppFilePath();
   Sentry.setTag('app-js-file-status', jsPath ? 'found' : 'not-found');
@@ -34,7 +36,11 @@
     );
     await showCopyPasteInstructions({
       filename: 'App.js or _layout.tsx',
-      codeSnippet: getSentryInitColoredCodeSnippet(dsn, enableSessionReplay),
+      codeSnippet: getSentryInitColoredCodeSnippet(
+        dsn,
+        enableSessionReplay,
+        enableFeedbackWidget,
+      ),
       hint: 'This ensures the Sentry SDK is ready to capture errors.',
     });
     return;
@@ -55,19 +61,11 @@
     return;
   }
 
-  if (enableSessionReplay) {
-    clack.log.info(
-      `Session Replay will be enabled with default settings (replaysSessionSampleRate: ${sessionReplaySampleRate}, replaysOnErrorSampleRate: ${sessionReplayOnErrorSampleRate}).`,
-    );
-    clack.log.message(
-      'By default, all text content, images, and webviews will be masked for privacy. You can customize this in your code later.',
-    );
-  }
-
   traceStep('add-sentry-init', () => {
     const newContent = addSentryInitWithSdkImport(js, {
       dsn,
       enableSessionReplay,
+      enableFeedbackWidget,
     });
 
     clack.log.success(
@@ -88,12 +86,21 @@
   {
     dsn,
     enableSessionReplay = false,
-  }: { dsn: string; enableSessionReplay?: boolean },
+    enableFeedbackWidget = false,
+  }: {
+    dsn: string;
+    enableSessionReplay?: boolean;
+    enableFeedbackWidget?: boolean;
+  },
 ): string {
   return js.replace(
     /^([^]*)(import\s+[^;]*?;$)/m,
     (match: string) => `${match}
-${getSentryInitPlainTextSnippet(dsn, enableSessionReplay)}`,
+${getSentryInitPlainTextSnippet(
+  dsn,
+  enableSessionReplay,
+  enableFeedbackWidget,
+)}`,
   );
 }
 
@@ -107,15 +114,23 @@
 export function getSentryInitColoredCodeSnippet(
   dsn: string,
   enableSessionReplay = false,
+  enableFeedbackWidget = false,
 ) {
   return makeCodeSnippet(true, (_unchanged, plus, _minus) => {
-    return plus(getSentryInitPlainTextSnippet(dsn, enableSessionReplay));
+    return plus(
+      getSentryInitPlainTextSnippet(
+        dsn,
+        enableSessionReplay,
+        enableFeedbackWidget,
+      ),
+    );
   });
 }
 
 export function getSentryInitPlainTextSnippet(
   dsn: string,
   enableSessionReplay = false,
+  enableFeedbackWidget = false,
 ) {
   return `import * as Sentry from '@sentry/react-native';
 
@@ -127,15 +142,32 @@
   // Configure Session Replay
   replaysSessionSampleRate: ${sessionReplaySampleRate},
   replaysOnErrorSampleRate: ${sessionReplayOnErrorSampleRate},
-  integrations: [Sentry.mobileReplayIntegration()],
 `
     : ''
-}
+}${getSentryIntegrationsPlainTextSnippet(
+    enableSessionReplay,
+    enableFeedbackWidget,
+  )}
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: __DEV__,
 });`;
 }
 
+export function getSentryIntegrationsPlainTextSnippet(
+  enableSessionReplay = false,
+  enableFeedbackWidget = false,
+) {
+  if (!enableSessionReplay && !enableFeedbackWidget) {
+    return '';
+  }
+  return `  integrations: [${
+    enableSessionReplay ? 'Sentry.mobileReplayIntegration()' : ''
+  }${enableSessionReplay && enableFeedbackWidget ? ', ' : ''}${
+    enableFeedbackWidget ? 'Sentry.feedbackIntegration()' : ''
+  }],
+`;
+}
+
 function getMainAppFilePath(): string | undefined {
   const prefixGlob = '{.,./src,./app}';
   const suffixGlob = '@(j|t|cj|mj)s?(x)';

src/react-native/react-native-wizard.ts

@@ -35,7 +35,12 @@
   doesAppBuildGradleIncludeRNSentryGradlePlugin,
   writeAppBuildGradle,
 } from './gradle';
-import { addSentryInit, wrapRootComponent } from './javascript';
+import {
+  addSentryInit,
+  sessionReplayOnErrorSampleRate,
+  sessionReplaySampleRate,
+  wrapRootComponent,
+} from './javascript';
 import {
   patchMetroConfigWithSentrySerializer,
   patchMetroWithSentryConfig,
@@ -81,6 +86,11 @@
  */
 export const SESSION_REPLAY_SUPPORTED_SDK_RANGE = '>=6.5.0';
 
+/**
+ * The following SDK version supports the Feedback Widget
+ */
+export const FEEDBACK_WIDGET_SUPPORTED_SDK_RANGE = '>=6.9.0';
+
 /**
  * The following SDK version ship with bundled Expo plugin
  */
@@ -233,6 +243,15 @@
     );
 
     Sentry.setTag('enable-session-replay', enableSessionReplay);
+
+    if (enableSessionReplay) {
+      clack.log.info(
+        `Session Replay will be enabled with default settings (replaysSessionSampleRate: ${sessionReplaySampleRate}, replaysOnErrorSampleRate: ${sessionReplayOnErrorSampleRate}).`,
+      );
+      clack.log.message(
+        'By default, all text content, images, and webviews will be masked for privacy. You can customize this in your code later.',
+      );
+    }
   } else if (sdkVersion) {
     clack.log.info(
       `Session Replay is supported from Sentry React Native SDK version ${SESSION_REPLAY_SUPPORTED_SDK_RANGE}. Your version (${sdkVersion}) doesn't support it yet.`,
@@ -242,10 +261,45 @@
     );
   }
 
+  // Check if SDK version supports the Feedback Widget
+  let enableFeedbackWidget = false;
+  if (
+    sdkVersion &&
+    fulfillsVersionRange({
+      version: sdkVersion,
+      acceptableVersions: FEEDBACK_WIDGET_SUPPORTED_SDK_RANGE,
+      canBeLatest: true,
+    })
+  ) {
+    // Ask if user wants to enable the Feedback Widget
+    enableFeedbackWidget = await abortIfCancelled(
+      clack.confirm({
+        message:
+          'Do you want to enable the Feedback Widget to collect feedback from your users? (See https://docs.sentry.io/platforms/react-native/user-feedback/)',
+      }),
+    );
+
+    Sentry.setTag('enable-feedback-widget', enableFeedbackWidget);
+
+    if (enableFeedbackWidget) {
+      clack.log.info(
+        `The Feedback Widget will be enabled with default settings. You can show the widget by calling Sentry.showFeedbackWidget() in your code.`,
+      );
+    }
+  } else if (sdkVersion) {
+    clack.log.info(
+      `The Feedback Widget is supported from Sentry React Native SDK version ${FEEDBACK_WIDGET_SUPPORTED_SDK_RANGE}. Your version (${sdkVersion}) doesn't support it yet.`,
+    );
+    clack.log.message(
+      `To use the Feedback Widget, please upgrade your Sentry SDK: npm install ${RN_SDK_PACKAGE}@latest --save`,
+    );
+  }
+
   await traceStep('patch-app-js', () =>
     addSentryInit({
       dsn: selectedProject.keys[0].dsn.public,
       enableSessionReplay,
+      enableFeedbackWidget,
     }),
   );