From 35ca109fb246269dd46b2860a926eb03a60b4577 Mon Sep 17 00:00:00 2001 From: Danica Shen Date: Sat, 19 Oct 2024 23:53:44 +0100 Subject: [PATCH] feat(1852): add eventId to sentry feedback report --- app/_locales/en/messages.json | 24 --- ui/pages/error-page/error-page.component.tsx | 169 ++++++++++++++----- ui/pages/index.js | 9 +- 3 files changed, 136 insertions(+), 66 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index cdbe124e7d1f..2a4e240a14dd 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1951,42 +1951,18 @@ "message": "Error message", "description": "Title for description, which is displayed for debugging purposes" }, - "errorPageSentryCancelButtonLabel": { - "message": "Cancel", - "description": "In sentry feedback form, The label of cancel buttons used in the feedback form." - }, - "errorPageSentryConfirmButtonLabel": { - "message": "Confirm", - "description": "In sentry feedback form, The label of confirm buttons used in the feedback form." - }, "errorPageSentryFormTitle": { "message": "Describe what happened", "description": "In sentry feedback form, The title at the top of the feedback form." }, - "errorPageSentryIsRequiredLabel": { - "message": "(required)", - "description": "In sentry feedback form, The label shown next to an input field that is required." - }, - "errorPageSentryMessageLabel": { - "message": "Description", - "description": "In sentry feedback form, The label for the feedback description input field." - }, "errorPageSentryMessagePlaceholder": { "message": "Sharing details like how we can reproduce the bug will help us fix the problem.", "description": "In sentry feedback form, The placeholder for the feedback description input field." }, - "errorPageSentrySubmitButtonLabel": { - "message": "Submit", - "description": "In sentry feedback form, The label of the submit button used in the feedback form." - }, "errorPageSentrySuccessMessageText": { "message": "Thanks! We will take a look soon.", "description": "In sentry feedback form, The message displayed after a successful feedback submission." }, - "errorPageSentryTriggerLabel": { - "message": "Describe what happened", - "description": "In sentry feedback form, The label of the injected button that opens up the feedback form when clicked." - }, "errorPageTitle": { "message": "MetaMask encountered an error", "description": "Title of generic error page" diff --git a/ui/pages/error-page/error-page.component.tsx b/ui/pages/error-page/error-page.component.tsx index 5e2c13ff61f3..e31fb5c177d4 100644 --- a/ui/pages/error-page/error-page.component.tsx +++ b/ui/pages/error-page/error-page.component.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useContext, useRef } from 'react'; +import React, { useEffect, useContext, useRef, useState } from 'react'; import * as Sentry from '@sentry/browser'; import browser from 'webextension-polyfill'; import { @@ -7,6 +7,7 @@ import { MetaMetricsEventName, } from '../../../shared/constants/metametrics'; +import { getParticipateInMetaMetrics } from '../../selectors'; import { MetaMetricsContext } from '../../contexts/metametrics'; import { useI18nContext } from '../../hooks/useI18nContext'; import { @@ -18,6 +19,12 @@ import { Text, Button, ButtonVariant, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, } from '../../components/component-library'; import { AlignItems, @@ -28,10 +35,16 @@ import { FlexDirection, IconColor, JustifyContent, + TextColor, TextVariant, } from '../../helpers/constants/design-system'; import { SUPPORT_REQUEST_LINK } from '../../helpers/constants/common'; +import { useSelector } from 'react-redux'; +import { Textarea } from '../../components/component-library/textarea/textarea'; +import { TextareaResize } from '../../components/component-library/textarea/textarea.types'; +import { ButtonSize } from '../../components/component-library/button/button.types'; +import { BannerAlertSeverity } from '../../components/component-library/banner-alert/banner-alert.types'; type ErrorPageProps = { error: { @@ -45,40 +58,42 @@ type ErrorPageProps = { const ErrorPage: React.FC = ({ error }) => { const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); - const sentryButtonRef = useRef(null); + const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics); - useEffect(() => { - // Initialize the Sentry feedback integration widget - const feedback = Sentry.feedbackIntegration({ - enableScreenshot: false, - autoInject: false, - showBranding: false, - showName: false, - showEmail: false, - triggerLabel: t('errorPageSentryTriggerLabel'), - formTitle: t('errorPageSentryFormTitle'), - submitButtonLabel: t('errorPageSentrySubmitButtonLabel'), - cancelButtonLabel: t('errorPageSentryCancelButtonLabel'), - confirmButtonLabel: t('errorPageSentryConfirmButtonLabel'), - isRequiredLabel: t('errorPageSentryIsRequiredLabel'), - messageLabel: t('errorPageSentryMessageLabel'), - messagePlaceholder: t('errorPageSentryMessagePlaceholder'), - errorPageSuccessMessageText: t('errorPageSentrySuccessMessageText'), + const [feedbackMessage, setFeedbackMessage] = useState(''); + const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false); + const [isSuccessModalShown, setIsSuccessModalShown] = useState(false); + + const handleClickDescribeButton = (): void => { + setIsFeedbackModalOpen(true); + }; + + const handleCloseDescribeModal = (): void => { + setIsFeedbackModalOpen(false); + }; + + const handleSubmitFeedback = (e: React.FormEvent) => { + e.preventDefault(); + const eventId = Sentry.lastEventId(); + + Sentry.captureFeedback({ + message: feedbackMessage, + associatedEventId: eventId, }); + handleCloseDescribeModal(); + setIsSuccessModalShown(true); + }; - let isMounted = true; // For preventing memory leak + useEffect(() => { + if (isSuccessModalShown) { + const timeoutId = setTimeout(() => { + setIsSuccessModalShown(false); // Close the modal after 5 seconds + }, 5000); - if (sentryButtonRef.current && isMounted) { - feedback.attachTo(sentryButtonRef.current); // Attach feedback widget to button + // Cleanup function to clear timeout if the component unmounts or state changes + return () => clearTimeout(timeoutId); } - - return () => { - isMounted = false; // Prevents async operations on unmounted component - if (feedback) { - feedback.remove(); // Clean up feedback widget - } - }; - }, [sentryButtonRef, t]); + }, [isSuccessModalShown]); return (
@@ -157,6 +172,80 @@ const ErrorPage: React.FC = ({ error }) => { ) : null} + {isFeedbackModalOpen && ( + + + + + {t('errorPageSentryFormTitle')} + + +