(2.1) Handles Capture feedback form network connection issues

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

@@ -1,4 +1,4 @@
-import { captureFeedback, lastEventId } from '@sentry/core';
+import { captureFeedback, lastEventId, logger } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
@@ -7,6 +7,7 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
+import { checkInternetConnection, isValidEmail } from './utils';
 
 /**
  * @beta
@@ -40,7 +41,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       return;
     }
 
-    if ((config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+    if ((config.isEmailRequired || trimmedEmail.length > 0) && !isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -53,11 +54,16 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       associatedEventId: eventId,
     };
 
-    onFormClose();
-    this.setState({ isVisible: false });
-
-    captureFeedback(userFeedback);
-    Alert.alert(text.successMessageText);
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    checkInternetConnection(() => {
+      onFormClose();
+      this.setState({ isVisible: false });
+      captureFeedback(userFeedback);
+      Alert.alert(text.successMessageText);
+    }, () => {
+      Alert.alert(text.errorTitle, text.networkError);
+      logger.error(`Feedback form submission failed: ${text.networkError}`);
+    });
   };
 
   /**
@@ -135,9 +141,4 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     </View>
     );
   }
-
-  private _isValidEmail = (email: string): boolean => {
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
-    return emailRegex.test(email);
-  };
 }

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

@@ -111,6 +111,11 @@ export interface FeedbackTextConfiguration {
    * The error message when the email is invalid
    */
   emailError?: string;
+
+  /**
+   * Message when there is a network error
+   */
+  networkError?: string;
 }
 
 /**

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

@@ -17,6 +17,7 @@ const ERROR_TITLE = 'Error';
 const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
 const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+const CONNECTIONS_ERROR_TEXT = 'Unable to send Feedback due to network issues.';
 
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
   // FeedbackCallbacks
@@ -54,4 +55,5 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   formError: FORM_ERROR,
   emailError: EMAIL_ERROR,
   successMessageText: SUCCESS_MESSAGE_TEXT,
+  networkError: CONNECTIONS_ERROR_TEXT,
 };

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

@@ -0,0 +1,17 @@
+export const checkInternetConnection = async (onConnected: () => void, onDisconnected: () => void): Promise<void> => {
+  try {
+    const response = await fetch('https://sentry.io', { method: 'HEAD' });
+    if (response.ok) {
+      onConnected();
+    } else {
+      onDisconnected();
+    }
+  } catch (error) {
+    onDisconnected();
+  }
+};
+
+export const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+};

packages/core/test/feedback/FeedbackForm.test.tsx

@@ -5,12 +5,14 @@ import { Alert } from 'react-native';
 
 import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
 import type { FeedbackFormProps } from '../../src/js/feedback/FeedbackForm.types';
+import { checkInternetConnection } from '../../src/js/feedback/utils';
 
 const mockOnFormClose = jest.fn();
 
 jest.spyOn(Alert, 'alert');
 
 jest.mock('@sentry/core', () => ({
+  ...jest.requireActual('@sentry/core'),
   captureFeedback: jest.fn(),
   getCurrentScope: jest.fn(() => ({
     getUser: jest.fn(() => ({
@@ -20,6 +22,10 @@ jest.mock('@sentry/core', () => ({
   })),
   lastEventId: jest.fn(),
 }));
+jest.mock('../../src/js/feedback/utils', () => ({
+  ...jest.requireActual('../../src/js/feedback/utils'),
+  checkInternetConnection: jest.fn(),
+}));
 
 const defaultProps: FeedbackFormProps = {
   onFormClose: mockOnFormClose,
@@ -37,9 +43,15 @@ const defaultProps: FeedbackFormProps = {
   formError: 'Please fill out all required fields.',
   emailError: 'The email address is not valid.',
   successMessageText: 'Feedback success',
+  networkError: 'Network error',
 };
 
 describe('FeedbackForm', () => {
+  beforeEach(() => {
+    (checkInternetConnection as jest.Mock).mockImplementation((onConnected, _) => {
+      onConnected();
+    });
+  });
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -125,6 +137,24 @@ describe('FeedbackForm', () => {
     });
   });
 
+  it('shows an error message when there is no network connection', async () => {
+    (checkInternetConnection as jest.Mock).mockImplementationOnce((_, onDisconnected) => {
+      onDisconnected();
+    });
+
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), '[email protected]');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
+
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.errorTitle, defaultProps.networkError);
+    });
+  });
+
   it('calls onFormClose when the form is submitted successfully', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);