Add button to copy spyglass logs to error panel

Author: misode

src/app/components/ErrorPanel.tsx

@@ -1,13 +1,14 @@
 import type { ComponentChildren } from 'preact'
 import { getCurrentUrl } from 'preact-router'
-import { useEffect, useMemo, useState } from 'preact/hooks'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import { useProject } from '../contexts/Project.jsx'
 import { useSpyglass } from '../contexts/Spyglass.jsx'
 import { useVersion } from '../contexts/Version.jsx'
+import { useActiveTimeout } from '../hooks/useActiveTimout.js'
 import { useAsync } from '../hooks/useAsync.js'
 import { latestVersion } from '../services/DataFetcher.js'
 import { getGenerator, SOURCE_REPO_URL } from '../Utils.js'
-import { Octicon } from './index.js'
+import { Btn, Octicon } from './index.js'
 
 type ErrorPanelProps = {
 	error: string | Error,
@@ -37,6 +38,10 @@ export function ErrorPanel({ error, prefix, reportable, onDismiss, body: body_,
 		return await service.readFile(uri)
 	}, [service, version, projectUri, gen])
 
+	const spyglassLogs = useMemo(() => {
+		return service?.logger.logs
+	}, [service])
+
 	useEffect(() => {
 		if (error instanceof Error) {
 			const stack = error.stack!.split('\n').map(line => {
@@ -78,6 +83,14 @@ export function ErrorPanel({ error, prefix, reportable, onDismiss, body: body_,
 		return url
 	}, [error, name, body_, version, stack, source, gen?.id])
 
+	const [copySpyglassActive, setCopySpyglassActive] = useActiveTimeout()
+	const copySpyglassLogs = useCallback(() => {
+		if (spyglassLogs) {
+			navigator.clipboard.writeText(spyglassLogs.join('\n'))
+				.then(() => setCopySpyglassActive())
+		}
+	}, [spyglassLogs, setCopySpyglassActive])
+
 	return <div class="error">
 		{onDismiss && <div class="error-dismiss" onClick={onDismiss}>{Octicon.x}</div>}
 		<h3 class="font-bold text-xl !my-[10px]">
@@ -88,6 +101,7 @@ export function ErrorPanel({ error, prefix, reportable, onDismiss, body: body_,
 		</h3>
 		{stack && stackVisible && <pre>{stack}</pre>}
 		{reportable !== false && <p>If you think this is a bug, you can report it <a href={url} target="_blank">on GitHub</a></p>}
+		{spyglassLogs && <Btn icon={copySpyglassActive ? 'check' : 'copy'} label="Copy logs" onClick={copySpyglassLogs} />}
 		{children}
 	</div>
 }

src/app/services/Spyglass.ts

@@ -87,6 +87,7 @@ export class SpyglassService {
 
 	private constructor (
 		public readonly version: VersionId,
+		public readonly logger: StoredLogger,
 		private readonly service: core.Service,
 		private readonly client: SpyglassClient,
 	) {
@@ -289,7 +290,7 @@ export class SpyglassService {
 		const currentServiceId = SpyglassService.activeServiceId
 		await Promise.allSettled(INITIAL_DIRS.map(async uri => client.externals.fs.mkdir(uri)))
 		const version = siteConfig.versions.find(v => v.id === versionId)!
-		const logger = console
+		const logger = new StoredLogger(console)
 		const service = new core.Service({
 			logger,
 			profilers: new core.ProfilerFactory(logger, [
@@ -388,7 +389,7 @@ export class SpyglassService {
 				logger.info('[SpyglassService] Skipped saving the cache because another service is active')
 			}
 		}, 10_000)
-		return new SpyglassService(versionId, service, client)
+		return new SpyglassService(versionId, logger, service, client)
 	}
 }
 
@@ -417,7 +418,7 @@ const initialize: core.ProjectInitializer = async (ctx) => {
 	const vanillaMcdoc = await fetchVanillaMcdoc()
 	meta.registerSymbolRegistrar('vanilla-mcdoc', {
 		checksum: vanillaMcdoc.ref,
-		registrar: vanillaMcdocRegistrar(vanillaMcdoc),
+		registrar: vanillaMcdocRegistrar(vanillaMcdoc, logger),
 	})
 
 	meta.registerDependencyProvider('@misode-mcdoc', async () => {
@@ -434,8 +435,10 @@ const initialize: core.ProjectInitializer = async (ctx) => {
 	const version = siteConfig.versions.find(v => {
 		return v.dynamic ? v.id === release : v.ref === release
 	})
-	if (version === undefined) {
-		logger.error(`[initialize] Failed finding game version matching ${release}.`)
+	if (version !== undefined) {
+		logger.info(`[initialize] Found game version matching ${release}: ${JSON.stringify(version)}`)
+	} else {
+		logger.error(`[initialize] Failed finding game version matching ${release}`)
 		return
 	}
 
@@ -532,7 +535,7 @@ function customSymbolRegistrar(summary: McmetaSummary, release: ReleaseVersion):
 
 const VanillaMcdocUri = 'mcdoc://vanilla-mcdoc/symbols.json'
 
-function vanillaMcdocRegistrar(vanillaMcdoc: VanillaMcdocSymbols): core.SymbolRegistrar {
+function vanillaMcdocRegistrar(vanillaMcdoc: VanillaMcdocSymbols, logger: core.Logger): core.SymbolRegistrar {
 	return (symbols) => {
 		const start = performance.now()
 		for (const [id, typeDef] of Object.entries(vanillaMcdoc.mcdoc)) {
@@ -554,6 +557,30 @@ function vanillaMcdocRegistrar(vanillaMcdoc: VanillaMcdocSymbols): core.SymbolRe
 				})
 		}
 		const duration = performance.now() - start
-		console.log(`[vanillaMcdocRegistrar] Done in ${duration}ms`)
+		logger.info(`[vanillaMcdocRegistrar] Done in ${duration}ms`)
+	}
+}
+
+export class StoredLogger implements core.Logger {
+	public readonly logs: string[] = []
+	constructor(
+		private readonly parent: core.Logger,
+	) {}
+
+	error(data: any, ...args: any[]): void {
+		this.logs.push(`[ERROR] ${data}${args.map(a => ` ${a}`).join('')}`)
+		this.parent.error(data, ...args)
+	}
+	info(data: any, ...args: any[]): void {
+		this.logs.push(`[INFO] ${data}${args.map(a => ` ${a}`).join('')}`)
+		this.parent.info(data, ...args)
+	}
+	log(data: any, ...args: any[]): void {
+		this.logs.push(`[LOG] ${data}${args.map(a => ` ${a}`).join('')}`)
+		this.parent.log(data, ...args)
+	}
+	warn(data: any, ...args: any[]): void {
+		this.logs.push(`[WARN] ${data}${args.map(a => ` ${a}`).join('')}`)
+		this.parent.warn(data, ...args)
 	}
 }

src/styles/global.css

@@ -1455,6 +1455,7 @@ main.has-project {
 	color: var(--text-1);
 	background-color: var(--errors-background);
 	border-radius: 3px;
+	overflow: hidden;
 }
 
 .error > * {
@@ -1487,6 +1488,11 @@ main.has-project {
 	color: var(--text-1)
 }
 
+.error .btn {
+	display: inline-flex;
+	margin-top: 0;
+}
+
 .error-actions {
 	display: flex;
 	flex-wrap: wrap;