Add error boundary for preview panel

Author: misode

src/app/components/generator/PreviewPanel.tsx

@@ -1,25 +1,47 @@
 import type { DocAndNode } from '@spyglassmc/core'
+import { useErrorBoundary } from 'preact/hooks'
 import { useDocAndNode } from '../../contexts/Spyglass.jsx'
 import { useVersion } from '../../contexts/Version.jsx'
 import { checkVersion } from '../../services/index.js'
 import { safeJsonParse } from '../../Utils.js'
+import { ErrorPanel } from '../ErrorPanel.jsx'
 import { BiomeSourcePreview, BlockStatePreview, DecoratorPreview, DensityFunctionPreview, LootTablePreview, ModelPreview, NoisePreview, NoiseSettingsPreview, RecipePreview, StructureSetPreview } from '../previews/index.js'
 
 export const HasPreview = ['loot_table', 'recipe', 'dimension', 'worldgen/density_function', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature', 'worldgen/structure_set', 'block_definition', 'docAndNode']
 
 type PreviewPanelProps = {
-	docAndNode: DocAndNode | undefined,
 	id: string,
+	docAndNode: DocAndNode | undefined,
 	shown: boolean,
-	onError: (message: string) => unknown,
 }
-export function PreviewPanel({ docAndNode: original, id, shown }: PreviewPanelProps) {
-	const { version } = useVersion()
-
+export function PreviewPanel({ id, docAndNode: original, shown }: PreviewPanelProps) {
 	if (!original) return <></>
 
 	const docAndNode = useDocAndNode(original)
 
+	const [error, dismissError] = useErrorBoundary()
+
+	if (error) {
+		const previewError = new Error(`Preview error: ${error.message}`)
+		if (error.stack) {
+			previewError.stack = error.stack
+		}
+		return <ErrorPanel error={previewError} onDismiss={dismissError} />
+	}
+
+	return <div>
+		<PreviewContent key={id} id={id} docAndNode={docAndNode} shown={shown} />
+	</div>
+}
+
+type PreviewContentProps = {
+	docAndNode: DocAndNode,
+	id: string,
+	shown: boolean,
+}
+export function PreviewContent({ id, docAndNode, shown }: PreviewContentProps) {
+	const { version } = useVersion()
+
 	if (id === 'loot_table') {
 		return <LootTablePreview {...{ docAndNode, shown }} />
 	}

src/app/components/generator/SchemaGenerator.tsx

@@ -32,8 +32,11 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 	const [error, setError] = useState<Error | string | null>(null)
 	const [errorBoundary, errorRetry] = useErrorBoundary()
 	if (errorBoundary) {
-		errorBoundary.message = `Something went wrong rendering the generator: ${errorBoundary.message}`
-		return <main><ErrorPanel error={errorBoundary} onDismiss={errorRetry} /></main>
+		const generatorError = new Error(`Generator error: ${errorBoundary.message}`)
+		if (errorBoundary.stack) {
+			generatorError.stack = errorBoundary.stack
+		}
+		return <main><ErrorPanel error={generatorError} onDismiss={errorRetry} /></main>
 	}
 
 	useEffect(() => Store.visitGenerator(gen.id), [gen.id])
@@ -405,7 +408,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 			</div>
 		</div>
 		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
-			<PreviewPanel docAndNode={docAndNode} id={gen.id} shown={previewShown} onError={setError} />
+			<PreviewPanel docAndNode={docAndNode} id={gen.id} shown={previewShown} />
 		</div>
 		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
 			<SourcePanel docAndNode={docAndNode} {...{doCopy, doDownload, doImport}} copySuccess={copySuccess} onError={setError} />