ErrorFallback cleanup

commaai · Jul 31, 2023 · 7027994 · 7027994
1 parent 884e890
commit 7027994
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/src/components/ErrorFallback.jsx b/src/components/ErrorFallback.jsx
@@ -7,8 +7,6 @@ const ErrorFallback = ({ error, componentStack }) => {
   const [copied, setCopied] = useState(false);
   const copiedInterval = useRef(null);
 
-  console.log({ error, componentStack });
-
   useEffect(() => {
     if ('serviceWorker' in navigator) {
       setSwInfo('loading...');
@@ -17,10 +15,7 @@ const ErrorFallback = ({ error, componentStack }) => {
           setSwInfo('none');
           return;
         }
-        const serviceWorkers = [];
-        for (const registration of registrations) {
-          serviceWorkers.push(`${registration.scope} ${registration.active?.state}`);
-        }
+        const serviceWorkers = registrations.map((r) => `${r.scope} ${r.active?.state}`);
         setSwInfo(serviceWorkers.join('; '));
       }).catch((err) => {
         setSwInfo(err.toString());
@@ -31,7 +26,7 @@ const ErrorFallback = ({ error, componentStack }) => {
   }, []);
 
   const information = `connect version: ${import.meta.env.VITE_APP_GIT_SHA || 'unknown'}
-Build timestamp: ${import.meta.env.VITE_APP_GIT_TIMESTAMP || 'unknown'}
+Release timestamp: ${import.meta.env.VITE_APP_GIT_TIMESTAMP || 'unknown'}
 URL: ${window.location.href}
 
 Browser: ${window.navigator.userAgent}
@@ -40,13 +35,14 @@ Window: ${window.innerWidth}x${window.innerHeight}
 Service workers: ${swInfo}
 
 ${error.toString()}${componentStack}`;
+  console.debug('[ErrorFallback]', information);
 
   const copyError = async () => {
     if (copiedInterval.current) {
       clearTimeout(copiedInterval.current);
     }
     try {
-      await navigator.clipboard.writeText('```' + information + '```');
+      await navigator.clipboard.writeText(`\`\`\`${information}\`\`\``);
       setCopied(true);
       copiedInterval.current = setTimeout(() => setCopied(false), 2000);
     } catch (err) {
@@ -60,25 +56,36 @@ ${error.toString()}${componentStack}`;
         <h2>Oops!</h2>
         <p>Something went wrong. Please reload the page.</p>
         <p>
-          If you continue to have problems, let us know on <a href="https://discord.comma.ai" target="_blank">Discord</a>{` `}
-          in the <span className="whitespace-nowrap"><strong>#connect-feedback</strong></span> channel.
+          If you continue to have problems, let us know on
+          {' '}
+          <a href="https://discord.comma.ai" target="_blank" rel="noreferrer">Discord</a>
+          {' '}
+          in the
+          {' '}
+          <span className="whitespace-nowrap"><strong>#connect-feedback</strong></span>
+          {' '}
+          channel.
         </p>
         <p>
-          <a className="bg-blue-600 rounded-md px-4 py-2 font-bold hover:bg-blue-500 transition-colors no-underline" href="">
+          <a
+            className="bg-blue-600 rounded-md px-4 py-2 font-bold hover:bg-blue-500 transition-colors no-underline"
+            href=""
+          >
             Reload
           </a>
         </p>
       </div>
       <details className="mt-8">
         <summary>Show debugging information</summary>
         <div className="relative bg-black rounded-xl mt-2 overflow-hidden">
-          <pre className="select-all overflow-x-auto px-4 pt-4 pb-2">
+          <pre className="select-all overflow-x-auto px-4 pt-4 pb-2 text-sm">
             {information}
           </pre>
           <button
             className={`absolute right-2 top-2 flex rounded-md pl-2 pr-2 py-2 text-white font-bold transition-colors ${copied ? 'bg-green-500' : 'bg-gray-700 hover:bg-gray-600'}`}
-            onClick={copyError}
+            type="button"
             aria-label={copied ? 'Copied' : 'Copy error'}
+            onClick={copyError}
           >
             {copied ? <Check /> : <ContentCopy />}
             <span className="ml-1">{copied ? 'Copied' : 'Copy error'}</span>