refactor: error boundary

src/components/card-shell.tsx

@@ -1,6 +1,5 @@
 import { About } from './about';
 import { Block } from './block';
-import { CardContainer } from './card-container';
 import { Dot } from './dot';
 import { AnkiField } from './field';
 import { SelectionMenu } from './selection-menu';
@@ -47,9 +46,10 @@ export const CardShell: FC<Props> = ({
   const [showSettings, setShowSettings] = useState(false);
 
   return (
-    <CardContainer
+    <div
       className={clsx(
-        'tappable m-auto w-full max-w-xl px-5 py-7 font-sans text-base lg:max-w-3xl',
+        'tappable m-auto px-5 py-7 font-sans text-base',
+        'w-full max-w-xl lg:max-w-3xl',
         `locale-${locale}`,
       )}
     >
@@ -114,6 +114,6 @@ export const CardShell: FC<Props> = ({
           </Block>
         )}
       </div>
-    </CardContainer>
+    </div>
   );
 };

src/entries/index.tsx

@@ -4,14 +4,17 @@ import { APP_CONTAINER_ID } from '@/utils/const';
 import { Provider } from 'jotai';
 import { render } from 'preact';
 import { ComponentType } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
 let container: HTMLElement | null = document.getElementById(APP_CONTAINER_ID);
 
 export const setup = (App: ComponentType) => {
   render(
-    <Provider store={store}>
-      <App />
-    </Provider>,
+    <ErrorBoundary fallbackRender={fallbackRender}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ErrorBoundary>,
     container!,
   );
   const id = setInterval(() => {
@@ -22,3 +25,19 @@ export const setup = (App: ComponentType) => {
     }
   }, 500);
 };
+function fallbackRender({ error }: FallbackProps) {
+  return (
+    <div role="alert" className="p-10">
+      <p>Something went wrong.</p>
+      <p>
+        Please open an issue at{' '}
+        <a href="https://github.com/ikkz/anki-template/issues">
+          https://github.com/ikkz/anki-template/issues
+        </a>{' '}
+        with screenshot
+      </p>
+      <pre style={{ color: 'red' }}>{error?.message}</pre>
+      <pre style={{ color: 'red' }}>{error?.stack}</pre>
+    </div>
+  );
+}

src/entries/mcq.tsx

@@ -18,13 +18,12 @@ import { useAutoAnimate } from '@formkit/auto-animate/preact';
 import useCreation from 'ahooks/es/useCreation';
 import useMemoizedFn from 'ahooks/es/useMemoizedFn';
 import useSelections from 'ahooks/es/useSelections';
-import useTimeout from 'ahooks/es/useTimeout';
 import { locale } from 'at/locale';
 import { fields } from 'at/options';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import { useEffect } from 'react';
-import { shuffle } from 'remeda';
+import { doNothing, shuffle } from 'remeda';
 
 const fieldToAlpha = (field: string) => field.slice(field.length - 1);
 
@@ -90,11 +89,15 @@ export default () => {
   });
 
   const [parent] = useAutoAnimate();
-  useTimeout(() => {
+  useEffect(() => {
     if (back) {
-      setOptions(originOptions);
+      const timeout = setTimeout(() => {
+        setOptions(originOptions);
+      }, 600);
+      return () => clearTimeout(timeout);
     }
-  }, 600);
+    return doNothing;
+  }, [back]);
 
   const note = useField('note');
   const isMultipleChoice = answers.length > 1;