Fix some errors and make others visible

src/app/Locales.ts

@@ -32,5 +32,5 @@ export async function loadLocale(language: string) {
 	const data = await import(`../locales/${language}.json`)
 	const schema = langConfig.schemas !== false
 		&& await import(`../../node_modules/@mcschema/locales/src/${language}.json`)
-	Locales[language] = { ...data, ...schema, ...data.default, ...schema.default }
+	Locales[language] = { ...data.default, ...schema.default }
 }

src/app/Schemas.ts

@@ -46,11 +46,15 @@ const versionGetter: {
 
 async function getVersion(id: VersionId): Promise<VersionData> {
 	if (!Versions[id]) {
-		const collections = versionGetter[id].getCollections()
-		const blockStates: BlockStateRegistry = {}
-		await fetchData(id, collections, blockStates)
-		const schemas = versionGetter[id].getSchemas(collections)
-		Versions[id] = { collections, schemas, blockStates }
+		try {
+			const collections = versionGetter[id].getCollections()
+			const blockStates: BlockStateRegistry = {}
+			await fetchData(id, collections, blockStates)
+			const schemas = versionGetter[id].getSchemas(collections)
+			Versions[id] = { collections, schemas, blockStates }
+		} catch (e) {
+			throw new Error(`Cannot get version "${id}": ${e.message}`)
+		}
 	}
 	return Versions[id]
 }
@@ -62,15 +66,19 @@ export async function getModel(version: VersionId, id: string): Promise<DataMode
 		if (!schemaName) {
 			throw new Error(`Cannot find model ${id}`)
 		}
-		const schema = versionData.schemas.get(schemaName)
-		const model = new DataModel(schema)
-		if (Models[id]) {
-			model.reset(Models[id].model.data, false)
-		} else {
-			model.validate(true)
-			model.history = [JSON.stringify(model.data)]
+		try {
+			const schema = versionData.schemas.get(schemaName)
+			const model = new DataModel(schema)
+			if (Models[id]) {
+				model.reset(Models[id].model.data, false)
+			} else {
+				model.validate(true)
+				model.history = [JSON.stringify(model.data)]
+			}
+			Models[id] = { model, version }
+		} catch (e) {
+			throw new Error(`Cannot get generator "${id}" for version "${version}": ${e.message}`)
 		}
-		Models[id] = { model, version }
 	}
 	return Models[id].model
 }

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'

src/app/pages/Generator.tsx

@@ -1,8 +1,8 @@
 import type { DataModel } from '@mcschema/core'
-import { useEffect, useState } from 'preact/hooks'
+import { useEffect, useErrorBoundary, useState } from 'preact/hooks'
 import config from '../../config.json'
 import { Analytics } from '../Analytics'
-import { Ad, Btn, BtnInput, BtnMenu, HasPreview, Octicon, PreviewPanel, SourcePanel, Tree } from '../components'
+import { Ad, Btn, BtnInput, BtnMenu, ErrorPanel, HasPreview, Octicon, PreviewPanel, SourcePanel, Tree } from '../components'
 import { fetchPreset } from '../DataFetcher'
 import { locale } from '../Locales'
 import type { VersionId } from '../Schemas'
@@ -19,11 +19,17 @@ type GeneratorProps = {
 }
 export function Generator({ lang, changeTitle, version, onChangeVersion, category, generator }: GeneratorProps) {
 	const loc = locale.bind(null, lang)
+	const [error, setError] = useState('')
+	const [errorBoundary] = useErrorBoundary()
+	if (errorBoundary) {
+		return <main><ErrorPanel error={`Something went wrong rendering the generator: ${errorBoundary.message}`}/></main>
+	}
+
 	const id = category ? `${category}/${generator}` : generator ?? ''
 	const modelConfig = config.models.find(m => m.id === id)
 
 	if (!modelConfig) {
-		return <div class="error">Not found</div>
+		return <main><ErrorPanel error={`Cannot find generator "${id}"`}/></main>
 	}
 
 	const minVersion = config.models.find(m => m.id === id)?.minVersion ?? '1.15'
@@ -36,7 +42,9 @@ export function Generator({ lang, changeTitle, version, onChangeVersion, categor
 	const [model, setModel] = useState<DataModel | null>(null)
 	useEffect(() => {
 		setModel(null)
-		getModel(version, id).then(m => setModel(m))
+		getModel(version, id)
+			.then(m => setModel(m))
+			.catch(e => setError(e.message))
 	}, [version, category, generator])
 
 	const reset = () => {
@@ -75,15 +83,17 @@ export function Generator({ lang, changeTitle, version, onChangeVersion, categor
 	const registry = (modelConfig.category ? modelConfig.category + '/' : '') + modelConfig.schema
 	useEffect(() => {
 		if (!modelConfig.path) return
-		getCollections(version).then(collections => {
-			const terms = (presetFilter ?? '').trim().split(' ')
-			const presets = collections.get(registry)
-				.map(p => p.slice(10))
-				.filter(p => terms.every(t => p.includes(t)))
-			if (presets) {
-				setPresetResults(presets)
-			}
-		})
+		getCollections(version)
+			.then(collections => {
+				const terms = (presetFilter ?? '').trim().split(' ')
+				const presets = collections.get(registry)
+					.map(p => p.slice(10))
+					.filter(p => terms.every(t => p.includes(t)))
+				if (presets) {
+					setPresetResults(presets)
+				}
+			})
+			.catch(e => setError(e.message))
 	}, [version, category, generator, presetFilter])
 
 	const loadPreset = (id: string) => {
@@ -154,7 +164,8 @@ export function Generator({ lang, changeTitle, version, onChangeVersion, categor
 					<Btn icon="arrow_right" label={loc('redo')} onClick={redo} />
 				</BtnMenu>
 			</div>
-			<Tree {...{lang, model, version}} />
+			{error && <ErrorPanel error={error} />}
+			<Tree {...{lang, model, version}} onError={setError} />
 		</main>
 		<div class="popup-actions" style={`--offset: -${10 + actionsShown * 50}px;`}>
 			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''}`} onClick={togglePreview}>
@@ -171,10 +182,10 @@ export function Generator({ lang, changeTitle, version, onChangeVersion, categor
 			</div>
 		</div>
 		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
-			<PreviewPanel {...{lang, model, version, id}} shown={previewShown} />
+			<PreviewPanel {...{lang, model, version, id}} shown={previewShown} onError={setError} />
 		</div>
 		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
-			<SourcePanel {...{lang, model, doCopy, doDownload, doImport}} name={modelConfig.schema ?? 'data'} />
+			<SourcePanel {...{lang, model, doCopy, doDownload, doImport}} name={modelConfig.schema ?? 'data'} onError={setError} />
 		</div>
 	</>
 }