feat(feedback): Screenshot button error flow (#4757)

* Show an error if screenshot capture fails

* Test error flow

Author: antonis

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

@@ -257,7 +257,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     }
 
     const screenshot = getCapturedScreenshot();
-    if (screenshot) {
+    if (screenshot === 'ErrorCapturingScreenshot') {
+      setTimeout(async () => {
+        feedbackAlertDialog(text.errorTitle, text.captureScreenshotError);
+      }, 100);
+    } else if (screenshot) {
       this._setCapturedScreenshot(screenshot);
     }
 

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

@@ -159,6 +159,11 @@ export interface FeedbackTextConfiguration {
    */
   emailError?: string;
 
+  /**
+   * The error message when the capture screenshot fails
+   */
+  captureScreenshotError?: string;
+
   /**
    * Message when there is a generic error
    */

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

@@ -8,26 +8,26 @@ import { defaultScreenshotButtonConfiguration } from './defaults';
 import { defaultScreenshotButtonStyles } from './FeedbackWidget.styles';
 import { getTheme } from './FeedbackWidget.theme';
 import type { ScreenshotButtonProps, ScreenshotButtonStyles, ScreenshotButtonTextConfiguration } from './FeedbackWidget.types';
-import { hideScreenshotButton, showFeedbackWidget, showScreenshotButton } from './FeedbackWidgetManager';
+import { hideScreenshotButton, showFeedbackWidget } from './FeedbackWidgetManager';
 import { screenshotIcon } from './icons';
 import { lazyLoadFeedbackIntegration } from './lazy';
 
-let capturedScreenshot: Screenshot | undefined;
+let capturedScreenshot: Screenshot | 'ErrorCapturingScreenshot' | undefined;
 
 const takeScreenshot = async (): Promise<void> => {
   hideScreenshotButton();
   setTimeout(async () => { // Delay capture to allow the button to hide
     const screenshots: Screenshot[] | null = await NATIVE.captureScreenshot();
     if (screenshots && screenshots.length > 0) {
       capturedScreenshot = screenshots[0];
-      showFeedbackWidget();
     } else {
-      showScreenshotButton();
+      capturedScreenshot = 'ErrorCapturingScreenshot';
     }
+    showFeedbackWidget();
   }, 100);
 };
 
-export const getCapturedScreenshot = (): Screenshot | undefined => {
+export const getCapturedScreenshot = (): Screenshot | 'ErrorCapturingScreenshot' | undefined => {
   const screenshot = capturedScreenshot;
   capturedScreenshot = undefined;
   return screenshot;

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

@@ -16,6 +16,7 @@ const TRIGGER_SCREENSHOT_LABEL = 'Take Screenshot';
 const ERROR_TITLE = 'Error';
 const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
+const CAPTURE_SCREENSHOT_ERROR = 'Error capturing screenshot. Please try again.';
 const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
 const CAPTURE_SCREENSHOT_LABEL = 'Take a screenshot';
@@ -79,6 +80,7 @@ export const defaultConfiguration: Partial<FeedbackWidgetProps> = {
   errorTitle: ERROR_TITLE,
   formError: FORM_ERROR,
   emailError: EMAIL_ERROR,
+  captureScreenshotError: CAPTURE_SCREENSHOT_ERROR,
   successMessageText: SUCCESS_MESSAGE_TEXT,
   addScreenshotButtonLabel: ADD_SCREENSHOT_LABEL,
   removeScreenshotButtonLabel: REMOVE_SCREENSHOT_LABEL,

packages/core/test/feedback/ScreenshotButton.test.tsx

@@ -1,7 +1,7 @@
 import { getClient, setCurrentClient } from '@sentry/core';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Alert, Text } from 'react-native';
 
 import { FeedbackWidget } from '../../src/js/feedback/FeedbackWidget';
 import type { ScreenshotButtonProps, ScreenshotButtonStyles } from '../../src/js/feedback/FeedbackWidget.types';
@@ -20,6 +20,8 @@ jest.mock('../../src/js/wrapper', () => ({
   },
 }));
 
+jest.spyOn(Alert, 'alert');
+
 const mockScreenshot: Screenshot = {
   filename: 'test-screenshot.png',
   contentType: 'image/png',
@@ -188,10 +190,10 @@ describe('ScreenshotButton', () => {
     });
   });
 
-  it('when the capture fails the capture button is still visible', async () => {
+  it('when the capture fails an error message is shown', async () => {
     mockCaptureScreenshot.mockResolvedValue([]);
 
-    const { getByText, queryByText } = render(
+    const { getByText } = render(
       <FeedbackWidgetProvider>
         <Text>App Components</Text>
       </FeedbackWidgetProvider>
@@ -213,8 +215,7 @@ describe('ScreenshotButton', () => {
     });
 
     await waitFor(() => {
-      const captureButton = queryByText('Take Screenshot');
-      expect(captureButton).not.toBeNull();
+      expect(Alert.alert).toHaveBeenCalledWith('Error', 'Error capturing screenshot. Please try again.');
     });
   });
 });