Fix some errors and make others visible

src/app/components/Ad.tsx

@@ -9,7 +9,9 @@ type AdProps = {
 export function Ad({ type, id }: AdProps) {
 	useEffect(() => {
 		document.getElementById('ad-placeholder')?.remove()
-		ethicalads?.load()
+		if ('ethicalads' in window) {
+			ethicalads.load()
+		}
 	}, [])
 
 	return <div data-ea-publisher="misode-github-io" data-ea-type={type} class="ad dark flat" id={id}></div>

src/app/components/ErrorPanel.tsx

@@ -0,0 +1,6 @@
+export function ErrorPanel({ error }: { error: string }) {
+	return <div class="error">
+		<h3>{error}</h3>
+		<p>You can report this as a bug <a href="https://github.com/misode/misode.github.io/issues/new" target="_blank">on GitHub</a></p>
+	</div>
+}

src/app/components/PreviewPanel.tsx

@@ -50,6 +50,7 @@ type PreviewProps = {
 	version: VersionId,
 	id: string,
 	shown: boolean,
+	onError: (message: string) => unknown,
 }
 export function PreviewPanel({ lang, model, version, id, shown }: PreviewProps) {
 	const [, setCount] = useState(0)

src/app/components/SourcePanel.tsx

@@ -12,15 +12,22 @@ type SourcePanelProps = {
 	doCopy?: number,
 	doDownload?: number,
 	doImport?: number,
+	onError: (message: string) => unknown,
 }
-export function SourcePanel({ lang, name, model, doCopy, doDownload, doImport }: SourcePanelProps) {
+export function SourcePanel({ lang, name, model, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
 	const loc = locale.bind(null, lang)
 	const source = useRef<HTMLTextAreaElement>(null)
 	const download = useRef<HTMLAnchorElement>(null)
-	
+
 	useModel(model, model => {
-		const data = model.schema.hook(transformOutput, new ModelPath(model), model.data)
-		source.current.value = JSON.stringify(data, null, 2) + '\n'
+		try {
+			const data = model.schema.hook(transformOutput, new ModelPath(model), model.data)
+			source.current.value = JSON.stringify(data, null, 2) + '\n'
+		} catch (e) {
+			onError(`Error getting JSON output: ${e.message}`)
+			console.error(e)
+			source.current.value = ''
+		}
 	})
 
 	const onImport = () => {

src/app/components/Tree.tsx

@@ -11,29 +11,36 @@ type TreePanelProps = {
 	lang: string,
 	model: DataModel | null,
 	version: VersionId,
+	onError: (message: string) => unknown,
 }
-export function Tree({ lang, model, version }: TreePanelProps) {
+export function Tree({ lang, model, version, onError }: TreePanelProps) {
 	const tree = useRef<HTMLDivElement>(null)
 	const redraw = useRef<Function>()
 
 	useEffect(() => {
 		redraw.current = () => {
 			if (!model) return
-			const mounter = new Mounter()
-			const props = { loc: locale.bind(null, lang), version, mounter }
-			const path = new ModelPath(model)
-			const rendered = model.schema.hook(renderHtml, path, model.data, props)
-			const category = model.schema.category(path)
-			const type = model.schema.type(path)
-			let html = rendered[2]
-			if (rendered[1]) {
-				html = `<div class="node ${type}-node" ${category ? `data-category="${category}"` : ''}>
-					<div class="node-header">${rendered[1]}</div>
-					<div class="node-body">${rendered[2]}</div>
-				</div>`
+			try {
+				const mounter = new Mounter()
+				const props = { loc: locale.bind(null, lang), version, mounter }
+				const path = new ModelPath(model)
+				const rendered = model.schema.hook(renderHtml, path, model.data, props)
+				const category = model.schema.category(path)
+				const type = model.schema.type(path)
+				let html = rendered[2]
+				if (rendered[1]) {
+					html = `<div class="node ${type}-node" ${category ? `data-category="${category}"` : ''}>
+						<div class="node-header">${rendered[1]}</div>
+						<div class="node-body">${rendered[2]}</div>
+					</div>`
+				}
+				tree.current.innerHTML = html
+				mounter.mounted(tree.current)
+			} catch (e) {
+				onError(`Error rendering the tree: ${e.message}`)
+				console.error(e)
+				tree.current.innerHTML = ''
 			}
-			tree.current.innerHTML = html
-			mounter.mounted(tree.current)
 		}
 	})
 

src/app/components/index.ts

@@ -2,6 +2,7 @@ export * from './Ad'
 export * from './Btn'
 export * from './BtnInput'
 export * from './BtnMenu'
+export * from './ErrorPanel'
 export * from './Header'
 export * from './Octicon'
 export * from './PreviewPanel'