SiteErrorBoundary: rework conditionals for Sentry and production

src/components/site-error-boundary.tsx

@@ -18,13 +18,14 @@ interface ISiteErrorBoundary {
 
 /** Application-level error boundary. Fills the whole screen. */
 const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
-  const { links } = useSoapboxConfig();
+  const { links, sentryDsn } = useSoapboxConfig();
   const textarea = useRef<HTMLTextAreaElement>(null);
 
   const [error, setError] = useState<unknown>();
   const [componentStack, setComponentStack] = useState<string>();
   const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
 
+  const sentryEnabled = Boolean(sentryDsn);
   const isProduction = NODE_ENV === 'production';
   const errorText = String(error) + componentStack;
 
@@ -52,7 +53,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
     setError(error);
     setComponentStack(info.componentStack);
 
-    if (isProduction) {
     captureSentryException(error, {
       tags: {
         // Allow page crashes to be easily searched in Sentry.
@@ -64,7 +64,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
       .then(({ default: Bowser }) => setBrowser(Bowser.getParser(window.navigator.userAgent)))
       .catch(() => {});
   }
-  }
 
   function goHome() {
     location.href = '/';
@@ -116,8 +115,11 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
             </div>
           </div>
 
-          {!isProduction && (
           <div className='mx-auto max-w-lg space-y-4 py-16'>
+            {(isProduction && sentryEnabled) ? (
+              <>{/* TODO: Sentry report form. */}</>
+            ) : (
+              <>
                 {errorText && (
                   <textarea
                     ref={textarea}
@@ -135,9 +137,10 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
                     <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
                   </Stack>
                 )}
-            </div>
+              </>
             )}
           </div>
+        </div>
       </main>
 
       <footer className='mx-auto w-full max-w-7xl shrink-0 px-4 sm:px-6 lg:px-8'>