diff --git a/images/shoko_mascot.png b/images/shoko_mascot.png
new file mode 100644
index 000000000..4dcd18a33
Binary files /dev/null and b/images/shoko_mascot.png differ
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 000000000..5b34e3967
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate, useRouteError } from 'react-router-dom';
+
+import ShokoMascot from '@/../images/shoko_mascot.png';
+import Button from '@/components/Input/Button';
+import { useGetInitVersionQuery } from '@/core/rtkQuery/splitV3Api/initApi';
+import { usePostWebuiUpdateMutation } from '@/core/rtkQuery/splitV3Api/webuiApi';
+import { unsetDetails } from '@/core/slices/apiSession';
+
+const ErrorBoundary = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const error = useRouteError() as Error; // There is no type definition provided.
+
+ const version = useGetInitVersionQuery();
+ const [webuiUpdateTrigger, webuiUpdateResult] = usePostWebuiUpdateMutation();
+
+ const [updateChannel, setUpdateChannel] = useState<'Stable' | 'Dev'>('Stable');
+
+ const handleLogout = () => {
+ dispatch(unsetDetails());
+ navigate('/webui/login');
+ };
+
+ const handleWebUiUpdate = (channel: 'Stable' | 'Dev') => {
+ setUpdateChannel(channel);
+ webuiUpdateTrigger(channel).unwrap().then(() => handleLogout(), err => console.error(err));
+ };
+
+ return (
+
+
+
Congratulations!
+
You Broke The Web UI!
+
+ The information below is absolutely (maybe) useless!
+
+
+ {error.stack}
+
+
+
Lets get you back into the Web UI.
+
+ If you are seeing this page after updating, select
+ Force Update to Stable Web UI
+ , otherwise select
+ Logout of Web UI
+ to clear local storage.
+
+
+ Still need help? Hop on our
+
+ Discord
+
+ server and provide the above error.
+