From 4a2d9b95185183548344e9830bfcafe94d67d6f4 Mon Sep 17 00:00:00 2001
From: Valerie Pomerleau <vpomerleau@mozilla.com>
Date: Fri, 15 Nov 2024 12:43:48 -0800
Subject: [PATCH] feat(settings): Add sentry capture for AppErrorDialog

Because:

* We want to measure how often users see this screen from an error on retrieving initial settings state, and compare with AppErrorBoundary

This commit:

* Add Sentry capture exception, add tags for source

Closes #
---
 packages/fxa-react/components/AppErrorBoundary/index.tsx | 4 ++--
 packages/fxa-settings/src/components/Settings/index.tsx  | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/fxa-react/components/AppErrorBoundary/index.tsx b/packages/fxa-react/components/AppErrorBoundary/index.tsx
index 77f655ca32..18b7c6546b 100644
--- a/packages/fxa-react/components/AppErrorBoundary/index.tsx
+++ b/packages/fxa-react/components/AppErrorBoundary/index.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import AppErrorDialog from '../AppErrorDialog';
-import sentryMetrics from 'fxa-shared/sentry/browser';
+import * as Sentry from '@sentry/browser';
 
 interface AppErrorBoundaryProps {
   children?: React.ReactNode;
@@ -33,7 +33,7 @@ class AppErrorBoundary extends React.Component<
 
   componentDidCatch(error: Error) {
     console.error('AppError', error);
-    sentryMetrics.captureException(error);
+    Sentry.captureException(error, { tags: { source: 'AppErrorBoundary' } });
   }
 
   render() {
diff --git a/packages/fxa-settings/src/components/Settings/index.tsx b/packages/fxa-settings/src/components/Settings/index.tsx
index e32ac69b72..f78badcd70 100644
--- a/packages/fxa-settings/src/components/Settings/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/index.tsx
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect } from 'react';
+import * as Sentry from '@sentry/browser';
 import SettingsLayout from './SettingsLayout';
 import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
 import AppErrorDialog from 'fxa-react/components/AppErrorDialog';
@@ -137,6 +138,7 @@ export const Settings = ({
 
   // This error check includes a network error
   if (error) {
+    Sentry.captureException(error, { tags: { source: 'settings' } });
     GleanMetrics.error.view({ event: { reason: error.message } });
     return <AppErrorDialog data-testid="error-dialog" {...{ error }} />;
   }