feat(metrics): Add more glean metrics for signup code view

Author: vbudhram

packages/fxa-settings/src/components/OAuthDataError/index.tsx

@@ -2,17 +2,24 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { getLocalizedErrorMessage } from '../../lib/error-utils';
 import { AuthError } from '../../lib/oauth';
 import { useFtlMsgResolver } from '../../models';
 import AppLayout from '../AppLayout';
 import Banner from '../Banner';
 import CardHeader from '../CardHeader';
 
-const OAuthDataError = ({ error }: { error: AuthError }) => {
+const OAuthDataError = ({ error, gleanMetric }: { error: AuthError, gleanMetric?: (data: { event: { reason: string } }) => void }) => {
   const ftlMsgResolver = useFtlMsgResolver();
 
+
+  useEffect(() => {
+    if (gleanMetric) {
+      gleanMetric({ event: { reason: error.errno.toString() }});
+    }
+  }, [gleanMetric, error.errno]);
+
   return (
     <AppLayout>
       <CardHeader

packages/fxa-settings/src/lib/glean/index.ts

@@ -254,6 +254,11 @@ const recordEventMetric = (
     case 'reg_signup_code_submit':
       reg.signupCodeSubmit.record();
       break;
+    case 'reg_signup_code_submit_frontend_error':
+      reg.signupCodeSubmitFrontendError.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
+      break;
     case 'reg_success_view':
       reg.successView.record();
       break;

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/container.test.tsx

@@ -19,6 +19,7 @@ import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localiz
 import SignupConfirmCodeContainer from './container';
 import { Integration } from '../../../models';
 import { mockSensitiveDataClient as createMockSensitiveDataClient } from '../../../models/mocks';
+import GleanMetrics from '../../../lib/glean';
 
 import {
   MOCK_EMAIL,
@@ -46,6 +47,17 @@ jest.mock('@reach/router', () => ({
   useNavigate: () => mockNavigate,
 }));
 
+jest.mock('../../../lib/glean', () => ({
+  __esModule: true,
+  default: {
+    signupConfirmation: {
+      view: jest.fn(),
+      submit: jest.fn(),
+      error: jest.fn(),
+    }
+  },
+}));
+
 // Global instances
 let integration: Integration;
 let mockAuthClient = new AuthClient('localhost:9000', { keyStretchVersion: 1 });
@@ -272,14 +284,17 @@ describe('confirm-signup-container', () => {
                   };
                 }
               ),
-            oAuthDataError: { message: 'BOOM', errno: 1, version: 1 },
+            oAuthDataError: { message: 'Something went wrong. Please close this tab and try again.', errno: 1, version: 1 },
           };
         });
       render();
       await waitFor(() =>
         expect(screen.getByText('Bad Request')).toBeInTheDocument()
       );
       expect(screen.getByText('Unexpected error')).toBeInTheDocument();
+      expect(GleanMetrics.signupConfirmation.error).toHaveBeenCalledWith({
+        event: { reason: "1" }
+      })
     });
   });
   describe('useOAuthKeysCheck', () => {

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/container.tsx

@@ -23,6 +23,7 @@ import { EMAIL_BOUNCE_STATUS_QUERY } from './gql';
 import OAuthDataError from '../../../components/OAuthDataError';
 import { QueryParams } from '../../..';
 import { SensitiveData } from '../../../lib/sensitive-data-client';
+import GleanMetrics from '../../../lib/glean';
 
 export const POLL_INTERVAL = 5000;
 
@@ -131,10 +132,10 @@ const SignupConfirmCodeContainer = ({
   }
 
   if (oAuthDataError) {
-    return <OAuthDataError error={oAuthDataError} />;
+    return <OAuthDataError error={oAuthDataError} gleanMetric={GleanMetrics.signupConfirmation.error} />;
   }
   if (oAuthKeysCheckError) {
-    return <OAuthDataError error={oAuthKeysCheckError} />;
+    return <OAuthDataError error={oAuthKeysCheckError} gleanMetric={GleanMetrics.signupConfirmation.error}/>;
   }
 
   return (

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.test.tsx

@@ -17,7 +17,7 @@ import {
   Subject,
   createMockOAuthNativeIntegration,
   createMockOAuthWebIntegration,
-  createMockWebIntegration,
+  createMockWebIntegration, MOCK_AUTH_ERROR_INVALID_CODE, MOCK_AUTH_ERROR_RATE_LIMIT,
 } from './mocks';
 import {
   MOCK_OAUTH_FLOW_HANDLER_RESPONSE,
@@ -64,6 +64,7 @@ jest.mock('../../../lib/glean', () => ({
     signupConfirmation: {
       view: jest.fn(),
       submit: jest.fn(),
+      error: jest.fn(),
     },
     isDone: jest.fn(),
   },
@@ -317,6 +318,7 @@ describe('ConfirmSignupCode page', () => {
         });
       });
     });
+
     it('sends expected web channel messages when service=relay', async () => {
       const integration = createMockOAuthNativeIntegration(false);
       renderWithSession({
@@ -421,7 +423,52 @@ describe('ConfirmSignupCode page with error states', () => {
     });
   });
 
-  // TODO add test for expected behaviour on verifySession fail in FXA-8303
+  it('renders an error tooltip when the form is submitted with invalid code', async () => {
+    session = {
+      verifySession: jest.fn().mockRejectedValue(MOCK_AUTH_ERROR_INVALID_CODE),
+    } as unknown as Session;
+
+    renderWithSession({ session, integration: createMockWebIntegration({}) });
+
+    const codeInput = screen.getByLabelText('Enter 6-digit code');
+    fireEvent.change(codeInput, {
+      target: { value: '123123' },
+    });
+
+    const submitButton = screen.getByRole('button', { name: 'Confirm' });
+    fireEvent.click(submitButton);
+    await waitFor(() => {
+      expect(screen.getByTestId('tooltip')).toHaveTextContent(
+        'Invalid or expired confirmation code'
+      );
+      expect(GleanMetrics.signupConfirmation.submit).toHaveBeenCalled();
+      expect(GleanMetrics.signupConfirmation.error).toHaveBeenCalledWith({
+        event: { reason: MOCK_AUTH_ERROR_INVALID_CODE.errno.toString() }
+      });
+    });
+  });
+
+  it('renders an error when the form is submitted with rate limit', async () => {
+    session = {
+      verifySession: jest.fn().mockRejectedValue(MOCK_AUTH_ERROR_RATE_LIMIT),
+    } as unknown as Session;
+
+    renderWithSession({ session, integration: createMockWebIntegration({}) });
+
+    const codeInput = screen.getByLabelText('Enter 6-digit code');
+    fireEvent.change(codeInput, {
+      target: { value: '123123' },
+    });
+
+    const submitButton = screen.getByRole('button', { name: 'Confirm' });
+    fireEvent.click(submitButton);
+    await waitFor(() => {
+      expect(GleanMetrics.signupConfirmation.submit).toHaveBeenCalled();
+      expect(GleanMetrics.signupConfirmation.error).toHaveBeenCalledWith({
+        event: { reason: MOCK_AUTH_ERROR_RATE_LIMIT.errno.toString() }
+      });
+    });
+  });
 });
 
 describe('Resending a new code from ConfirmSignupCode page', () => {

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx

@@ -247,6 +247,7 @@ const ConfirmSignupCode = ({
         }
       }
     } catch (error) {
+      GleanMetrics.signupConfirmation.error({ event: { reason: error.errno?.toString() } });
       let localizedErrorMessage: string;
       // Intercept invalid parameter error and set the error message to INVALID_EXPIRED_OTP_CODE
       // This error occurs when the submitted code does not pass validation for the code param

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/mocks.tsx

@@ -41,6 +41,15 @@ export const MOCK_AUTH_ERROR = {
   message: 'Something broke',
 };
 
+export const MOCK_AUTH_ERROR_INVALID_CODE = {
+  errno: 183,
+  message: 'Invalid or expired confirmation code',
+};
+
+export const MOCK_AUTH_ERROR_RATE_LIMIT = {
+  errno: 114,
+  message: 'Client has sent too many requests',
+};
 export const MOCK_SIGNUP_CODE = '123456';
 
 export function createMockWebIntegration({

packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml

@@ -1408,6 +1408,27 @@ reg:
     expires: never
     data_sensitivity:
       - interaction
+  signup_code_submit_frontend_error:
+    type: event
+    description: |
+      Emit any frontend errors that occur when a user attempts to submit the code on registration confirmation page.
+    send_in_pings:
+      - events
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-7265
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121
+    expires: never
+    data_sensitivity:
+      - interaction
+    extra_keys:
+      reason:
+        description: additional context-dependent info, e.g. the cause of an error
+        type: string
   submit:
     type: event
     description: |

packages/fxa-shared/metrics/glean/web/event.ts

@@ -4,8 +4,8 @@
 
 // AUTOGENERATED BY glean_parser v14.5.2. DO NOT EDIT. DO NOT COMMIT.
 
-import StringMetricType from '@mozilla/glean/private/metrics/string';
 import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';
+import StringMetricType from '@mozilla/glean/private/metrics/string';
 
 /**
  * The name of the event

packages/fxa-shared/metrics/glean/web/index.ts

@@ -74,6 +74,7 @@ export const eventsMap = {
   signupConfirmation: {
     view: 'reg_signup_code_view',
     submit: 'reg_signup_code_submit',
+    error: 'reg_signup_code_submit_frontend_error',
   },
 
   login: {