Settings should be wrapped in ErrorBoundary

src/renderer/components/settings/Settings.tsx

@@ -6,6 +6,7 @@
 
 import "./settings.css";
 
+import { ErrorBoundary } from "@vencord/types/components";
 import { Forms, Switch, Text } from "@vencord/types/webpack/common";
 import { ComponentType } from "react";
 import { Settings, useSettings } from "renderer/settings";
@@ -155,7 +156,8 @@ function SettingsSections() {
     return <>{sections}</>;
 }
 
-export default function SettingsUi() {
+export default ErrorBoundary.wrap(
+    function SettingsUI() {
         return (
             <Forms.FormSection>
                 <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
@@ -165,4 +167,9 @@ export default function SettingsUi() {
                 <SettingsSections />
             </Forms.FormSection>
         );
-}
+    },
+    {
+        message:
+            "Failed to render the Vesktop Settings tab. If this issue persists, try to right click the Vesktop tray icon, then click 'Repair Vencord'. And make sure your Vesktop is up to date."
+    }
+);