feat: 2.11 Sentry error integration cp-7.52.0

app/components/Views/ChoosePassword/index.js

@@ -10,6 +10,7 @@ import {
   Platform,
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { captureException } from '@sentry/react-native';
 import Text, {
   TextColor,
   TextVariant,
@@ -75,6 +76,7 @@ import Routes from '../../../constants/navigation/Routes';
 import { withMetricsAwareness } from '../../hooks/useMetrics';
 import fox from '../../../animations/Searching_Fox.json';
 import LottieView from 'lottie-react-native';
+import ErrorBoundary from '../ErrorBoundary';
 import {
   TraceName,
   endTrace,
@@ -248,6 +250,7 @@ class ChoosePassword extends PureComponent {
     rememberMe: false,
     loading: false,
     error: null,
+    errorToThrow: null,
     inputWidth: { width: '99%' },
     showPasswordIndex: [0, 1],
     passwordInputContainerFocusedIndex: -1,
@@ -369,6 +372,34 @@ class ChoosePassword extends PureComponent {
     }
   }
 
+  isOAuthPasswordCreationError = (error, authType) =>
+    authType.oauth2Login &&
+    error.message &&
+    error.message.includes('SeedlessOnboardingController');
+
+  handleOAuthPasswordCreationError = (error, authType) => {
+    // If user has already consented to analytics, report error using regular Sentry
+    if (this.props.metrics.isEnabled()) {
+      authType.oauth2Login &&
+        captureException(error, {
+          tags: {
+            view: 'ChoosePassword',
+            context:
+              'OAuth password creation failed - user consented to analytics',
+          },
+        });
+    } else {
+      // User hasn't consented to analytics yet, use ErrorBoundary onboarding flow
+      authType.oauth2Login &&
+        this.setState({
+          loading: false,
+          errorToThrow: new Error(
+            `OAuth password creation failed: ${error.message}`,
+          ),
+        });
+    }
+  };
+
   setSelection = () => {
     const { isSelected } = this.state;
     this.setState(() => ({ isSelected: !isSelected }));
@@ -429,6 +460,10 @@ class ChoosePassword extends PureComponent {
         try {
           await Authentication.newWalletAndKeychain(password, authType);
         } catch (error) {
+          if (this.isOAuthPasswordCreationError(error, authType)) {
+            this.handleOAuthPasswordCreationError(error, authType);
+            return;
+          }
           if (Device.isIos) {
             await this.handleRejectedOsBiometricPrompt();
           }
@@ -544,6 +579,10 @@ class ChoosePassword extends PureComponent {
         newAuthData,
       );
     } catch (err) {
+      if (this.isOAuthPasswordCreationError(err, newAuthData)) {
+        this.handleOAuthPasswordCreationError(err, newAuthData);
+        return;
+      }
       throw Error(strings('choose_password.disable_biometric_error'));
     }
     this.setState({
@@ -700,7 +739,7 @@ class ChoosePassword extends PureComponent {
     );
   };
 
-  render() {
+  renderContent = () => {
     const { isSelected, password, passwordStrength, confirmPassword, loading } =
       this.state;
     const passwordsMatch = password !== '' && password === confirmPassword;
@@ -954,6 +993,31 @@ class ChoosePassword extends PureComponent {
         )}
       </SafeAreaView>
     );
+  };
+
+  render() {
+    const { errorToThrow } = this.state;
+
+    // Component that throws error if needed (to be caught by ErrorBoundary)
+    const ThrowErrorIfNeeded = () => {
+      if (errorToThrow) {
+        throw errorToThrow;
+      }
+      return null;
+    };
+
+    return (
+      <ErrorBoundary
+        navigation={this.props.navigation}
+        view="ChoosePassword"
+        useOnboardingErrorHandling={
+          !!errorToThrow && !this.props.metrics.isEnabled()
+        }
+      >
+        <ThrowErrorIfNeeded />
+        {this.renderContent()}
+      </ErrorBoundary>
+    );
   }
 }
 

app/components/Views/ChoosePassword/index.test.tsx

@@ -19,6 +19,7 @@ import { BIOMETRY_TYPE } from 'react-native-keychain';
 import { Authentication } from '../../../core';
 import { InteractionManager, Alert } from 'react-native';
 import { EVENT_NAME } from '../../../core/Analytics';
+import Logger from '../../../util/Logger';
 
 jest.mock('../../../util/metrics/TrackOnboarding/trackOnboarding');
 
@@ -90,9 +91,11 @@ jest.mock('react-native/Libraries/Alert/Alert', () => ({
 }));
 
 const mockMetricsIsEnabled = jest.fn().mockReturnValue(true);
+const mockTrackEvent = jest.fn();
 jest.mock('../../../core/Analytics/MetaMetrics', () => ({
   getInstance: () => ({
     isEnabled: mockMetricsIsEnabled,
+    trackEvent: mockTrackEvent,
   }),
 }));
 
@@ -873,6 +876,142 @@ describe('ChoosePassword', () => {
     mockNewWalletAndKeychain.mockRestore();
   });
 
+  describe('ErrorBoundary Tests', () => {
+    it('should trigger ErrorBoundary for OAuth password creation failures when analytics disabled', async () => {
+      const loggerErrorSpy = jest.spyOn(Logger, 'error');
+      mockMetricsIsEnabled.mockReturnValueOnce(false);
+      const mockNewWalletAndKeychain = jest.spyOn(
+        Authentication,
+        'newWalletAndKeychain',
+      );
+      mockNewWalletAndKeychain
+        .mockRejectedValueOnce(
+          new Error('SeedlessOnboardingController - Auth server is down'),
+        )
+        .mockResolvedValueOnce(undefined);
+
+      const props: ChoosePasswordProps = {
+        ...defaultProps,
+        route: {
+          ...defaultProps.route,
+          params: {
+            ...defaultProps.route.params,
+            [PREVIOUS_SCREEN]: ONBOARDING,
+            oauthLoginSuccess: true,
+          },
+        },
+      };
+      const component = renderWithProviders(<ChoosePassword {...props} />);
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      const passwordInput = component.getByTestId(
+        ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID,
+      );
+      const confirmPasswordInput = component.getByTestId(
+        ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID,
+      );
+      const checkbox = component.getByTestId(
+        ChoosePasswordSelectorsIDs.I_UNDERSTAND_CHECKBOX_ID,
+      );
+
+      await act(async () => {
+        fireEvent.press(checkbox);
+        fireEvent.changeText(passwordInput, 'StrongPassword123!');
+      });
+      await act(async () => {
+        fireEvent.changeText(confirmPasswordInput, 'StrongPassword123!');
+      });
+      await act(async () => {
+        fireEvent(confirmPasswordInput, 'submitEditing');
+      });
+
+      expect(mockNewWalletAndKeychain).toHaveBeenCalledTimes(1);
+      expect(loggerErrorSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining('OAuth password creation failed'),
+        }),
+        expect.objectContaining({
+          View: 'ChoosePassword',
+          ErrorBoundary: true,
+        }),
+      );
+      expect(mockTrackEvent).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          name: 'Error Screen Viewed',
+        }),
+      );
+
+      mockNewWalletAndKeychain.mockRestore();
+    });
+
+    it('should not trigger ErrorBoundary for OAuth password creation failures when analytics enabled', async () => {
+      mockMetricsIsEnabled.mockReturnValueOnce(true);
+      const mockNewWalletAndKeychain = jest.spyOn(
+        Authentication,
+        'newWalletAndKeychain',
+      );
+      mockNewWalletAndKeychain
+        .mockRejectedValueOnce(
+          new Error('SeedlessOnboardingController - Auth server is down'),
+        )
+        .mockResolvedValueOnce(undefined);
+
+      const props: ChoosePasswordProps = {
+        ...defaultProps,
+        route: {
+          ...defaultProps.route,
+          params: {
+            ...defaultProps.route.params,
+            [PREVIOUS_SCREEN]: ONBOARDING,
+            oauthLoginSuccess: true,
+          },
+        },
+      };
+      const component = renderWithProviders(<ChoosePassword {...props} />);
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      const passwordInput = component.getByTestId(
+        ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID,
+      );
+      const confirmPasswordInput = component.getByTestId(
+        ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID,
+      );
+      const checkbox = component.getByTestId(
+        ChoosePasswordSelectorsIDs.I_UNDERSTAND_CHECKBOX_ID,
+      );
+
+      await act(async () => {
+        fireEvent.press(checkbox);
+        fireEvent.changeText(passwordInput, 'StrongPassword123!');
+      });
+      await act(async () => {
+        fireEvent.changeText(confirmPasswordInput, 'StrongPassword123!');
+      });
+      await act(async () => {
+        fireEvent(confirmPasswordInput, 'submitEditing');
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+      });
+
+      expect(mockNewWalletAndKeychain).toHaveBeenCalledTimes(1);
+      expect(mockTrackEvent).not.toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          name: 'Error Screen Viewed',
+        }),
+      );
+
+      mockNewWalletAndKeychain.mockRestore();
+    });
+  });
+
   describe('Tracing functionality', () => {
     const mockTrace = trace as jest.MockedFunction<typeof trace>;
     const mockEndTrace = endTrace as jest.MockedFunction<typeof endTrace>;

app/components/Views/ErrorBoundary/__snapshots__/index.test.tsx.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ErrorBoundary Onboarding Error Handling renders onboarding error state snapshot 1`] = `null`;
+
 exports[`ErrorBoundary render matches snapshot 1`] = `null`;