diff --git a/packages/core/src/js/feedback/FeedbackWidget.tsx b/packages/core/src/js/feedback/FeedbackWidget.tsx index 999be7c9c..fa4c90640 100644 --- a/packages/core/src/js/feedback/FeedbackWidget.tsx +++ b/packages/core/src/js/feedback/FeedbackWidget.tsx @@ -257,7 +257,11 @@ export class FeedbackWidget extends React.Component { + feedbackAlertDialog(text.errorTitle, text.captureScreenshotError); + }, 100); + } else if (screenshot) { this._setCapturedScreenshot(screenshot); } diff --git a/packages/core/src/js/feedback/FeedbackWidget.types.ts b/packages/core/src/js/feedback/FeedbackWidget.types.ts index aaf03e864..22b6b0911 100644 --- a/packages/core/src/js/feedback/FeedbackWidget.types.ts +++ b/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 */ diff --git a/packages/core/src/js/feedback/ScreenshotButton.tsx b/packages/core/src/js/feedback/ScreenshotButton.tsx index 105b2ab10..18cfa1923 100644 --- a/packages/core/src/js/feedback/ScreenshotButton.tsx +++ b/packages/core/src/js/feedback/ScreenshotButton.tsx @@ -8,11 +8,11 @@ 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 => { hideScreenshotButton(); @@ -20,14 +20,14 @@ const takeScreenshot = async (): Promise => { 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; diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts index 948d59c19..2158b69a4 100644 --- a/packages/core/src/js/feedback/defaults.ts +++ b/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 = { 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, diff --git a/packages/core/test/feedback/ScreenshotButton.test.tsx b/packages/core/test/feedback/ScreenshotButton.test.tsx index c215b3b38..2419860d1 100644 --- a/packages/core/test/feedback/ScreenshotButton.test.tsx +++ b/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( App Components @@ -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.'); }); }); });