Expose error stack traces (#211)

src/app/components/ErrorPanel.tsx

@@ -1,13 +1,52 @@
+import { useEffect, useMemo, useState } from 'preact/hooks'
+import { mapStackTrace } from 'sourcemapped-stacktrace'
 import { Octicon } from './Octicon'
 
 type ErrorPanelProps = {
-	error: string,
+	error: string | Error,
 	onDismiss?: () => unknown,
 }
 export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
+	const [stackVisible, setStackVisible] = useState(false)
+	const [stack, setStack] = useState<string | undefined>(undefined)
+
+	useEffect(() => {
+		if (error instanceof Error) {
+			const stack = error.stack!.split('\n').map(line => {
+				return line.replace(/^(\s+)at (?:async )?(https?:.*)/, '$1at ($2)')
+			})
+			setStack(stack.join('\n'))
+			mapStackTrace(stack.join('\n'), (mapped) => {
+				const mappedStack = mapped.map(line => {
+					return line.replace(/..\/..\/src\//, 'src/')
+				}).join('\n')
+				setStack(mappedStack)
+			})
+		}
+	}, [error])
+
+	const url = useMemo(() => {
+		let url ='https://github.com/misode/misode.github.io/issues/new'
+		if (error instanceof Error) {
+			url += `?title=${encodeURIComponent(`${error.name}: ${error.message}`)}`
+			if (stack) {
+				url += `&body=${encodeURIComponent(`\`\`\`\n${error.name}: ${error.message}\n${stack}\n\`\`\`\n`)}`
+			}
+		} else {
+			url += `?title=${encodeURIComponent(error.toString())}`
+		}
+		return url
+	}, [error, stack])
+
 	return <div class="error">
 		{onDismiss && <div class="error-dismiss" onClick={onDismiss}>{Octicon.x}</div>}
-		<h3>{error}</h3>
-		<p>If you think this is a bug, you can report it <a href="https://github.com/misode/misode.github.io/issues/new" target="_blank">on GitHub</a></p>
+		<h3>
+			{error instanceof Error ? error.message : error}
+			{stack && <span onClick={() => setStackVisible(!stackVisible)}>
+				{Octicon.info}
+			</span>}
+		</h3>
+		{stack && stackVisible && <pre>{stack}</pre>}
+		<p>If you think this is a bug, you can report it <a href={url} target="_blank">on GitHub</a></p>
 	</div>
 }

src/app/components/generator/SourcePanel.tsx

@@ -52,7 +52,7 @@ type SourcePanelProps = {
 	doDownload?: number,
 	doImport?: number,
 	copySuccess: () => unknown,
-	onError: (message: string) => unknown,
+	onError: (message: string | Error) => unknown,
 }
 export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doImport, copySuccess, onError }: SourcePanelProps) {
 	const { locale } = useLocale()
@@ -78,7 +78,12 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 				const output = getSerializedOutput(model, blockStates)
 				editor.current.setValue(output)
 			} catch (e) {
-				onError(`Error getting JSON output: ${message(e)}`)
+				if (e instanceof Error) {
+					e.message = `Error getting JSON output: ${e.message}`
+					onError(e)
+				} else {
+					onError(`Error getting JSON output: ${message(e)}`)
+				}
 				console.error(e)
 				editor.current.setValue('')
 			}
@@ -91,7 +96,12 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 				const data = FORMATS[format].parse(value)
 				model?.reset(DataModel.wrapLists(data), false)
 			} catch (e) {
-				onError(`Error importing: ${message(e)}`)
+				if (e instanceof Error) {
+					e.message = `Error importing: ${e.message}`
+					onError(e)
+				} else {
+					onError(`Error importing: ${message(e)}`)
+				}
 				console.error(e)
 			}
 		}

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -48,13 +48,19 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 			clearInterval(scrollInterval.current)
 		}
 		if (shown) {
-			redraw()
-			if (autoScroll) {
-				scrollInterval.current = setInterval(() => {
-					offset.current -= 8
-					redraw()
-				}, 100) as any
-			}
+			(async () => {
+				try {
+					await redraw()
+					if (autoScroll) {
+						scrollInterval.current = setInterval(() => {
+							offset.current -= 8
+							redraw()
+						}, 100) as any
+					}
+				} catch (e) {
+					throw e
+				}
+			})()
 		}
 	}, [state, seed, shown, biome, biomeScale, biomeDepth, autoScroll])