[UPdate] Add error boundary.

src-ui/app/App.jsx

@@ -22,6 +22,7 @@ import { ModalController } from "./modal_controller/ModalController";
 import { SnackbarController } from "./snackbar_controller/SnackbarController";
 import styles from "./App.module.scss";
 import { useIsBackendReady, useIsSoftwareUpdating, useIsVrctAvailable, useWindow } from "@logics_common";
+import { AppErrorBoundary } from "./error_boundary/AppErrorBoundary";
 
 export const App = () => {
     const { currentIsVrctAvailable } = useIsVrctAvailable();
@@ -32,22 +33,24 @@ export const App = () => {
 
     return (
         <div className={styles.container}>
-            <KeyEventController />
-            <StartPythonController />
-            <GlobalHotKeyController />
-            <UiLanguageController />
-            <ConfigPageCloseTriggerController />
-            <UiSizeController />
-            <FontFamilyController />
-            <TransparencyController />
-            <WindowGeometryController />
+            <AppErrorBoundary >
+                <KeyEventController />
+                <StartPythonController />
+                <GlobalHotKeyController />
+                <UiLanguageController />
+                <ConfigPageCloseTriggerController />
+                <UiSizeController />
+                <FontFamilyController />
+                <TransparencyController />
+                <WindowGeometryController />
 
-            {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false)
-                ? <SplashComponent />
-                : <Contents key={i18n.language} fetchPluginsHasRunRef={fetchPluginsHasRunRef} />
-            }
+                {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false)
+                    ? <SplashComponent />
+                    : <Contents key={i18n.language} fetchPluginsHasRunRef={fetchPluginsHasRunRef} />
+                }
 
-            <SnackbarController />
+                <SnackbarController />
+            </AppErrorBoundary>
         </div>
     );
 };

src-ui/app/error_boundary/AppErrorBoundary.jsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { appWindow } from "@tauri-apps/api/window";
+import { ErrorBoundary } from "react-error-boundary";
+import XMarkSvg from "@images/cancel.svg?react";
+import CopySvg from "@images/copy.svg?react";
+import CheckMarkSvg from "@images/check_mark.svg?react";
+
+import { ContactsContainer } from "./contacts_container/ContactsContainer";
+
+import styles from "./AppErrorBoundary.module.scss";
+
+export const AppErrorBoundary = ({children}) => {
+    return (
+        <ErrorBoundary
+            fallbackRender={({ error }) => (
+                <ErrorContainer error={error} />
+            )
+        }>
+            {children}
+        </ErrorBoundary>
+    );
+};
+
+const ErrorContainer = ({error}) => {
+    const [is_copied, setIsCopied] = useState(false);
+
+    const formatted_stack = error ? formatStackTrace(error.stack) : "Unknown error";
+
+    const copyToClipboard = async () => {
+        if (is_copied) return;
+
+        await navigator.clipboard.writeText(formatted_stack);
+        setIsCopied(true);
+
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    };
+
+    return (
+        <div className={styles.container}>
+            <CloseButtonContainer />
+            <div className={styles.wrapper}>
+                <p className={styles.error_message}>An error occurred. Please restart VRCT or contact the developers.</p>
+                {error ?
+                    <div className={styles.error_detail_container}>
+                        <div className={styles.error_stack_container}>
+                            <p className={styles.error_stack}>
+                                {formatted_stack}
+                            </p>
+                        </div>
+                        <button className={styles.copy_error_message_button} onClick={copyToClipboard}>
+                            <p className={styles.copy_text}>Copy</p>
+                            {is_copied
+                                ? <CheckMarkSvg className={styles.check_mark_svg}/>
+                                : <CopySvg className={styles.copy_svg}/>
+                            }
+                        </button>
+                    </div>
+                : null}
+                <ContactsContainer />
+            </div>
+        </div>
+    );
+};
+
+const CloseButtonContainer = () => {
+    const close = () => {
+        appWindow.close();
+    };
+
+    return (
+        <button className={styles.close_button_wrapper} onClick={close}>
+            <div className={styles.close_button}>
+                <XMarkSvg className={styles.x_mark_svg}/>
+            </div>
+        </button>
+    );
+};
+
+
+const formatStackTrace = (stack) => {
+    if (!stack) return "";
+    // フルパスの除去（例として window.location.origin や絶対パス部分を削除）
+    // ※必要に応じて正規表現を調整してください
+    const formatted = stack.replace(new RegExp(window.location.origin, "g"), "");
+
+    return formatted;
+};

src-ui/app/error_boundary/AppErrorBoundary.module.scss

@@ -0,0 +1,110 @@
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: safe center;
+    align-items: center;
+    flex-direction: column;
+    padding: 2rem;
+    overflow-y: auto;
+}
+
+.error_message {
+    font-size: 2rem;
+    text-align: center;
+    user-select: text;
+    margin-bottom: 3.2rem;
+}
+
+
+.error_detail_container {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 1rem;
+}
+.error_stack_container {
+    max-height: 10rem;
+    width: 100%;
+    overflow-y: scroll;
+    padding: 1rem;
+    background-color: var(--dark_950_color);
+    border-radius: 0.4rem;
+}
+.error_stack {
+    font-size: 1rem;
+    user-select: text;
+}
+
+.copy_error_message_button {
+    // background-color: var(--dark_800_color);
+    padding: 0.8rem 1rem;
+    font-size: 1.4rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    background-color: var(--dark_825_color);
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
+}
+
+.copy_svg {
+    width: 1.4rem;
+    color: var(--dark_500_color);
+}
+
+.check_mark_svg {
+    width: 1.4rem;
+    color: var(--primary_300_color);
+}
+
+
+
+.close_button_wrapper {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    width: 68px;
+    aspect-ratio: 1 / 1;
+    background-color: var(--error_bc_color);
+    & .x_mark_svg {
+        color: var(--dark_200_color);
+    }
+    &:hover {
+        & .x_mark_svg {
+            transform: rotate(45deg);
+        }
+    }
+    &:active {
+        background-color: var(--error_bc_active_color);
+    }
+    transition: all 0.1s ease;
+}
+
+.close_button {
+    // width: 100%;
+    // height: 100%;
+}
+
+.x_mark_svg {
+    width: 24px;
+    transform: rotate(-45deg);
+    color: var(--dark_700_color);
+    transition: transform 0.3s ease;
+}

src-ui/app/error_boundary/contacts_container/ContactsContainer.jsx

@@ -0,0 +1,29 @@
+import styles from "./ContactsContainer.module.scss";
+
+export const ContactsContainer = () => {
+    return (
+        <div className={styles.container}>
+            <OpenLinkContainer className={styles.github_issues} href_id="github_issues" text="Github Issues"/>
+            <OpenLinkContainer className={styles.google_forms} href_id="google_forms" text="Google Forms"/>
+        </div>
+    );
+};
+
+import dev_github_icon from "@images/about_vrct/dev_github_icon.png";
+import document from "@images/document.png";
+
+const contacts_links = {
+    github_issues: { img: dev_github_icon, href: "https://github.com/misyaguziya/VRCT/issues" },
+    google_forms: { img: document, href: "https://docs.google.com/forms/d/e/1FAIpQLSei-xoydOY60ivXqhOjaTzNN8PiBQIDcNhzfy6cw2sjYkcg_g/viewform" },
+};
+
+const OpenLinkContainer = ({className, href_id, text}) => {
+    const href = contacts_links[href_id].href;
+    const img = contacts_links[href_id].img;
+    return (
+        <a className={className} href={href} target="_blank" rel="noreferrer" >
+            <img className={styles.contact_button_icon} src={img} />
+            <p className={styles.contact_button_label}>{text}</p>
+        </a>
+    );
+};

src-ui/app/error_boundary/contacts_container/ContactsContainer.module.scss

@@ -0,0 +1,28 @@
+.container {
+    display: flex;
+    gap: 3.2rem;
+}
+
+.github_issues, .google_forms {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    border-radius: 0.4rem;
+    gap: 1rem;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color)
+    }
+}
+.contact_button_icon {
+    width: 5.2rem;
+}
+.contact_button_label {
+    font-size: 1.4rem;
+    white-space: nowrap;
+}