From aceaa90b96581fc2b54f3d65433c96e6933630d3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 12 Nov 2024 21:15:30 -0600
Subject: [PATCH] ErrorBoundary: always display error messages

---
 src/components/sentry-feedback-form.tsx | 71 -------------------------
 src/components/site-error-boundary.tsx  | 46 ++++++----------
 src/locales/en.json                     |  2 -
 3 files changed, 16 insertions(+), 103 deletions(-)
 delete mode 100644 src/components/sentry-feedback-form.tsx

diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
deleted file mode 100644
index ea1eb1db9..000000000
--- a/src/components/sentry-feedback-form.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import Button from 'soapbox/components/ui/button.tsx';
-import FormActions from 'soapbox/components/ui/form-actions.tsx';
-import FormGroup from 'soapbox/components/ui/form-group.tsx';
-import Form from 'soapbox/components/ui/form.tsx';
-import Text from 'soapbox/components/ui/text.tsx';
-import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
-import { captureSentryFeedback } from 'soapbox/sentry.ts';
-
-interface ISentryFeedbackForm {
-  eventId: string;
-}
-
-/** Accept feedback for the given Sentry event. */
-const SentryFeedbackForm: React.FC<ISentryFeedbackForm> = ({ eventId }) => {
-  const { account } = useOwnAccount();
-
-  const [feedback, setFeedback] = useState<string>();
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
-
-  const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    setFeedback(e.target.value);
-  };
-
-  const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
-    if (!feedback || !eventId) return;
-    setIsSubmitting(true);
-
-    await captureSentryFeedback({
-      name: account?.acct,
-      associatedEventId: eventId,
-      message: feedback,
-    }).catch(console.error);
-
-    setIsSubmitted(true);
-  };
-
-  if (isSubmitted) {
-    return (
-      <Text align='center'>
-        <FormattedMessage id='alert.unexpected.thanks' defaultMessage='Thanks for your feedback!' />
-      </Text>
-    );
-  }
-
-  return (
-    <Form onSubmit={handleSubmitFeedback}>
-      <FormGroup>
-        <Textarea
-          value={feedback}
-          onChange={handleFeedbackChange}
-          placeholder='Anything you can tell us about what happened?'
-          disabled={isSubmitting}
-          autoGrow
-        />
-      </FormGroup>
-
-      <FormActions>
-        <Button type='submit' className='mx-auto' disabled={!feedback || isSubmitting}>
-          <FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
-        </Button>
-      </FormActions>
-    </Form>
-  );
-};
-
-export default SentryFeedbackForm;
\ No newline at end of file
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 15186694b..b18dcba21 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -2,7 +2,6 @@ import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
-import { NODE_ENV } from 'soapbox/build-config.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
@@ -13,7 +12,6 @@ import KVStore from 'soapbox/storage/kv-store.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import SentryFeedbackForm from './sentry-feedback-form.tsx';
 import SiteLogo from './site-logo.tsx';
 
 interface ISiteErrorBoundary {
@@ -22,16 +20,13 @@ interface ISiteErrorBoundary {
 
 /** Application-level error boundary. Fills the whole screen. */
 const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
-  const { links, sentryDsn } = useSoapboxConfig();
+  const { links } = useSoapboxConfig();
   const textarea = useRef<HTMLTextAreaElement>(null);
 
   const [error, setError] = useState<unknown>();
   const [componentStack, setComponentStack] = useState<string | null | undefined>();
   const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
-  const [sentryEventId, setSentryEventId] = useState<string>();
 
-  const sentryEnabled = Boolean(sentryDsn);
-  const isProduction = NODE_ENV === 'production';
   const errorText = String(error) + componentStack;
 
   const clearCookies: React.MouseEventHandler = (e) => {
@@ -64,7 +59,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
         ErrorBoundary: 'yes',
       },
     })
-      .then((eventId) => setSentryEventId(eventId))
       .catch(console.error);
 
     import('bowser')
@@ -127,30 +121,22 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
           </div>
 
           <div className='mx-auto max-w-lg space-y-4 py-16'>
-            {(isProduction) ? (
-              (sentryEnabled && sentryEventId) && (
-                <SentryFeedbackForm eventId={sentryEventId} />
-              )
-            ) : (
-              <>
-                {errorText && (
-                  <Textarea
-                    ref={textarea}
-                    value={errorText}
-                    onClick={handleCopy}
-                    isCodeEditor
-                    rows={12}
-                    readOnly
-                  />
-                )}
+            {errorText && (
+              <Textarea
+                ref={textarea}
+                value={errorText}
+                onClick={handleCopy}
+                isCodeEditor
+                rows={12}
+                readOnly
+              />
+            )}
 
-                {browser && (
-                  <Stack>
-                    <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
-                    <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
-                  </Stack>
-                )}
-              </>
+            {browser && (
+              <Stack>
+                <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
+                <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
+              </Stack>
             )}
           </div>
         </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 653fd7dca..d7d7b179d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Something went wrong.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Submit Feedback",
-  "alert.unexpected.thanks": "Thanks for your feedback!",
   "aliases.account.add": "Create alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Unlink alias",