diff --git a/src/plugins/betterSettings/index.tsx b/src/plugins/betterSettings/index.tsx
index 7d81c6f5c..5836734ef 100644
--- a/src/plugins/betterSettings/index.tsx
+++ b/src/plugins/betterSettings/index.tsx
@@ -6,8 +6,8 @@
 
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
@@ -124,12 +124,23 @@ export default definePlugin({
         }
     ],
 
+    // This is the very outer layer of the entire ui, so we can't wrap this in an ErrorBoundary
+    // without possibly also catching unrelated errors of children.
+    //
+    // Thus, we sanity check webpack modules & do this really hacky try catch to hopefully prevent hard crashes if something goes wrong.
+    // try catch will only catch errors in the Layer function (hence why it's called as a plain function rather than a component), but
+    // not in children
     Layer(props: LayerProps) {
-        return (
-            <ErrorBoundary fallback={() => props.children as any}>
-                <Layer {...props} />
-            </ErrorBoundary>
-        );
+        try {
+            if (!FocusLock || !ComponentDispatch)
+                throw new Error("Failed to fetch some webpack modules");
+
+            return Layer(props);
+        } catch (e) {
+            new Logger("BetterSettings").error("Failed to render Layer", e);
+        }
+
+        return props.children;
     },
 
     wrapMenu(list: SettingsEntry[]) {