ErrorBoundary: always display error messages
This commit is contained in:
Alex Gleason
parent
8a4e85010d
commit
aceaa90b96
|
|
@ -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;
|
||||
|
|
@ -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,12 +121,6 @@ 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}
|
||||
|
|
@ -150,8 +138,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
<Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue