pcalling any external Generic story function

src/UI/StoryPanel/AnchoredToolbar.tsx

@@ -4,7 +4,10 @@ import { useMouseOffset } from "Hooks/Context/UserInput";
 import ToolbarDropdown from "UI/Overlays/Dropdown/Toolbar/ToolbarDropdown";
 import RenderToolButtons from "UI/StoryOverlay/IconToolbar/Buttons.tsx";
 import { useButtonElements } from "UI/StoryOverlay/IconToolbar/Utils";
+import Corner from "UI/Styles/Corner";
 import { Detector } from "UI/Styles/Detector";
+import { Div } from "UI/Styles/Div";
+import Padding from "UI/Styles/Padding";
 
 interface AnchoredToolbarProps {
 	PreviewEntry: PreviewEntry;
@@ -21,14 +24,24 @@ function AnchoredToolbar(props: AnchoredToolbarProps) {
 	}, []);
 
 	return (
-		<frame Size={new UDim2(0, 37, 1, 0)} BackgroundTransparency={0.2} BackgroundColor3={Color3.fromRGB(26, 26, 33)} BorderSizePixel={0}>
-			<Detector
-				Event={{
-					MouseButton2Click: OnToolbarLeftClick,
-				}}
-			/>
-			<RenderToolButtons PreviewEntry={props.PreviewEntry} HoverAlpha={UDim2.fromScale(0, 0)} />
-		</frame>
+		<Div Size={new UDim2(0, 39, 1, 0)}>
+			<Padding Padding={2} />
+			<frame
+				Size={UDim2.fromScale(1, 1)}
+				BackgroundTransparency={0.2}
+				BackgroundColor3={Color3.fromRGB(26, 26, 33)}
+				BorderSizePixel={0}
+			>
+				<uistroke Color={Color3.fromRGB(255, 255, 255)} Thickness={1} Transparency={0.95} />
+				<Corner Radius={6} />
+				<Detector
+					Event={{
+						MouseButton2Click: OnToolbarLeftClick,
+					}}
+				/>
+				<RenderToolButtons PreviewEntry={props.PreviewEntry} HoverAlpha={UDim2.fromScale(0, 0)} />
+			</frame>
+		</Div>
 	);
 }
 

src/UI/StoryPreview/PreviewController/Mounters/Generic/index.tsx

@@ -36,7 +36,10 @@ function Generic(props: MounterProps<"Generic">) {
 		(oldValues: ParametrizedControls) => {
 			const controlInfos = CreateControlInfos(controls, controlValues, oldValues);
 			for (const listener of listeners.current) {
-				listener(controlValues as InferControls<ReturnControls>, controlInfos);
+				const [success, err] = pcall(() => listener(controlValues as InferControls<ReturnControls>, controlInfos));
+				if (!success) {
+					warn("UI-Labs: Generic Story listener errored when updating.", err);
+				}
 			}
 		},
 		[controlValues],
@@ -49,7 +52,14 @@ function Generic(props: MounterProps<"Generic">) {
 			target: props.MountFrame,
 			subscribe: AddListener,
 		});
-		return result.render(storyProps);
+		const [success, err] = pcall(() => result.render(storyProps));
+		if (!success) {
+			warn("UI-Labs: Generic story errored when mounting. The cleanup function will not be executed: ", err);
+			return () => {
+				warn("UI-Labs: The cleanup function was not found. This might be due to the story erroring. This may cause a memory leak.");
+			};
+		}
+		return err;
 	}, []);
 
 	useUpdateEffect(() => {
@@ -59,7 +69,10 @@ function Generic(props: MounterProps<"Generic">) {
 
 	useStoryUnmount(result, () => {
 		listeners.current = [];
-		cleanup();
+		const [success, err] = pcall(cleanup);
+		if (!success) {
+			warn("UI-Labs: The cleanup function errored when unmounting. This may cause a memory leak: ", err);
+		}
 	});
 
 	useStoryActionComponents(props.Entry, props.Result, returnControls, controls, controlValues, setControlValues);

src/UI/StoryPreview/Utils.ts

@@ -21,7 +21,7 @@ export function CreateEntrySnapshot(entry: PreviewEntry, name?: string) {
 }
 export function ReloadEntry(entry: PreviewEntry) {
 	const reloader = entry.HotReloader;
-	if (reloader) {
+	if (reloader !== undefined) {
 		reloader.Reload();
 	}
 }