chore: track errors in linking flow (#17425)

brainbicycle · web-flow · commit cd391097e575 · 2026-07-02T12:23:51.000-04:00
* track errors in linking flow

* explanatory comment
diff --git a/src/Components/AuthDialog/Hooks/useAuthDialogTracking.ts b/src/Components/AuthDialog/Hooks/useAuthDialogTracking.ts
@@ -3,7 +3,9 @@ import {
   type AuthImpression,
   AuthModalType,
   type CreatedAccount,
+  type ErrorMessageViewed,
   Intent,
+  OwnerType,
   type ResetYourPassword,
   type SuccessfullyLoggedIn,
 } from "@artsy/cohesion"
@@ -106,6 +108,30 @@ export const useAuthDialogTracking = () => {
         return trackEvent(payload)
       },
 
+      errorMessageViewed: ({
+        error_code,
+        title,
+        message,
+        flow,
+      }: {
+        error_code?: string
+        title: string
+        message: string
+        flow: string
+      }) => {
+        const payload: ErrorMessageViewed = {
+          action: ActionType.errorMessageViewed,
+          context_owner_type: OwnerType.authModal,
+          context_owner_id: "", // required by schema but auth modal has no entity ID
+          title,
+          message,
+          error_code,
+          flow,
+        }
+
+        trackEvent(payload)
+      },
+
       resetPassword: () => {
         if (!analytics.intent || !analytics.trigger) return
 
diff --git a/src/Components/AuthDialog/Views/AuthDialogLinkAccounts.tsx b/src/Components/AuthDialog/Views/AuthDialogLinkAccounts.tsx
@@ -13,6 +13,7 @@ import {
 } from "@artsy/palette"
 import { useAuthDialogContext } from "Components/AuthDialog/AuthDialogContext"
 import { useAfterAuthentication } from "Components/AuthDialog/Hooks/useAfterAuthentication"
+import { useAuthDialogTracking } from "Components/AuthDialog/Hooks/useAuthDialogTracking"
 import { formatErrorMessage } from "Components/AuthDialog/Utils/formatErrorMessage"
 import { useRouter } from "System/Hooks/useRouter"
 import { login } from "Utils/auth"
@@ -160,6 +161,7 @@ const PasswordForm: FC<PasswordFormProps> = ({
 }) => {
   const { runAfterAuthentication } = useAfterAuthentication()
   const { dispatch } = useAuthDialogContext()
+  const track = useAuthDialogTracking()
 
   return (
     <Formik
@@ -179,6 +181,14 @@ const PasswordForm: FC<PasswordFormProps> = ({
 
           if (res.linkingError) {
             setFieldValue("mode", "LinkError")
+
+            track.errorMessageViewed({
+              error_code: "link_accounts_error",
+              title: "Account linking failed",
+              message: LINK_ERROR_MESSAGE(providerName),
+              flow: "Link Accounts",
+            })
+
             return
           }
 
@@ -196,11 +206,27 @@ const PasswordForm: FC<PasswordFormProps> = ({
             setStatus({
               error: AUTH_ERROR_CODES.TWO_FACTOR_AUTHENTICATION_ENABLED,
             })
+
+            track.errorMessageViewed({
+              error_code: "two_factor_authentication_enabled",
+              title: "Two-factor authentication enabled",
+              message: AUTH_ERROR_CODES.TWO_FACTOR_AUTHENTICATION_ENABLED,
+              flow: "Link Accounts",
+            })
+
             return
           }
 
+          const errorMessage = formatErrorMessage(err)
           setFieldValue("mode", "Error")
-          setStatus({ error: formatErrorMessage(err) })
+          setStatus({ error: errorMessage })
+
+          track.errorMessageViewed({
+            error_code: err.message,
+            title: "Account linking failed",
+            message: errorMessage,
+            flow: "Link Accounts",
+          })
         }
       }}
     >
@@ -247,8 +273,7 @@ const PasswordForm: FC<PasswordFormProps> = ({
 
               {values.mode === "LinkError" && (
                 <Message variant="error">
-                  Your account was signed in, but we couldn't link your{" "}
-                  {providerName} account. Please try again from Settings.
+                  {LINK_ERROR_MESSAGE(providerName)}
                 </Message>
               )}
 
@@ -313,6 +338,9 @@ type FormMode =
   | "LinkError"
   | "TwoFactorBlocked"
 
+const LINK_ERROR_MESSAGE = (providerName: string) =>
+  `Your account was signed in, but we couldn't link your ${providerName} account. Please try again from Settings.`
+
 const VALIDATION_SCHEMA = Yup.object().shape({
   password: Yup.string().required("Password required"),
 })
diff --git a/src/Components/AuthDialog/Views/__tests__/AuthDialogLinkAccounts.jest.tsx b/src/Components/AuthDialog/Views/__tests__/AuthDialogLinkAccounts.jest.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { useAuthDialogContext } from "Components/AuthDialog/AuthDialogContext"
+import { useAuthDialogTracking } from "Components/AuthDialog/Hooks/useAuthDialogTracking"
 import { AuthDialogLinkAccounts } from "Components/AuthDialog/Views/AuthDialogLinkAccounts"
 import { login } from "Utils/auth"
 
@@ -39,15 +40,24 @@ jest.mock("Components/AuthDialog/AuthDialogContext", () => ({
   useAuthDialogContext: jest.fn(),
 }))
 
+jest.mock("Components/AuthDialog/Hooks/useAuthDialogTracking", () => ({
+  useAuthDialogTracking: jest.fn(),
+}))
+
 describe("AuthDialogLinkAccounts", () => {
   const mockDispatch = jest.fn()
+  const mockErrorMessageViewed = jest.fn()
 
   beforeEach(() => {
     mockDispatch.mockClear()
+    mockErrorMessageViewed.mockClear()
     ;(useAuthDialogContext as jest.Mock).mockReturnValue({
       dispatch: mockDispatch,
       state: { values: {}, options: {} },
     })
+    ;(useAuthDialogTracking as jest.Mock).mockReturnValue({
+      errorMessageViewed: mockErrorMessageViewed,
+    })
   })
 
   it("renders the password form when only email provider is available", () => {
@@ -105,6 +115,13 @@ describe("AuthDialogLinkAccounts", () => {
     })
 
     expect(screen.queryByText("Yes, Link Accounts")).not.toBeInTheDocument()
+    expect(mockErrorMessageViewed).toHaveBeenCalledWith({
+      error_code: "two_factor_authentication_enabled",
+      title: "Two-factor authentication enabled",
+      message:
+        "Social account linking is not available while two-factor authentication is enabled on your Artsy account.",
+      flow: "Link Accounts",
+    })
 
     fireEvent.click(screen.getByText("Go Back"))
 
@@ -130,5 +147,69 @@ describe("AuthDialogLinkAccounts", () => {
     await waitFor(() => {
       expect(screen.getByText("Go Back")).toBeInTheDocument()
     })
+
+    expect(mockErrorMessageViewed).toHaveBeenCalledWith(
+      expect.objectContaining({
+        error_code: "two_factor_authentication_enabled",
+      }),
+    )
+  })
+
+  it("shows a link error and tracks when account linking fails after sign-in", async () => {
+    render(<AuthDialogLinkAccounts />)
+    ;(login as jest.Mock).mockResolvedValueOnce({ linkingError: true })
+
+    const passwordInput = screen.getByPlaceholderText("Enter your password")
+    fireEvent.change(passwordInput, { target: { value: "secret" } })
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const button = screen.getByText("Yes, Link Accounts").parentNode!
+    fireEvent.click(button)
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByText(/couldn.t link your Google account/),
+        ).toBeInTheDocument()
+      },
+      { timeout: 3000 },
+    )
+
+    expect(mockErrorMessageViewed).toHaveBeenCalledWith({
+      error_code: "link_accounts_error",
+      title: "Account linking failed",
+      message: expect.stringContaining("link your Google account"),
+      flow: "Link Accounts",
+    })
+  })
+
+  it("shows a generic error and tracks when login fails with an API error", async () => {
+    render(<AuthDialogLinkAccounts />)
+    ;(login as jest.Mock).mockRejectedValueOnce(
+      new Error("invalid email or password"),
+    )
+
+    const passwordInput = screen.getByPlaceholderText("Enter your password")
+    fireEvent.change(passwordInput, { target: { value: "wrong" } })
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const button = screen.getByText("Yes, Link Accounts").parentNode!
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          "The email or password you entered is invalid. Please try again.",
+        ),
+      ).toBeInTheDocument()
+    })
+
+    expect(mockErrorMessageViewed).toHaveBeenCalledWith({
+      error_code: "invalid email or password",
+      title: "Account linking failed",
+      message:
+        "The email or password you entered is invalid. Please try again.",
+      flow: "Link Accounts",
+    })
   })
 })
