feat(frontend): Open debug runs from component (#1155)

* feat(frontend): Add debug runs

* feat(frontend): Fix build

* feat(frontend): revert implementation

* feat(frontend): Fix error displa

* feat(frontend): Fix error display

* feat(frontend): Fix preview mode

* feat(frontend): Fix error display

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -33,7 +33,8 @@
 		isEditor,
 		jobs,
 		noBackend,
-		errorByComponent
+		errorByComponent,
+		mode
 	} = getContext<AppEditorContext>('AppEditorContext')
 
 	onMount(() => {
@@ -48,7 +49,6 @@
 	let args: Record<string, any> = {}
 	let testIsLoading = false
 	let runnableInputValues: Record<string, any> = {}
-
 	let executeTimeout: NodeJS.Timeout | undefined = undefined
 
 	function setDebouncedExecute() {
@@ -256,7 +256,12 @@
 	let lastStartedAt: number = Date.now()
 
 	function recordError(error: string) {
-		$errorByComponent[id] = error
+		if (testJob) {
+			$errorByComponent[testJob.id] = {
+				error: error,
+				componentId: id
+			}
+		}
 	}
 
 	$: result?.error && recordError(result.error)
@@ -283,8 +288,12 @@
 				outputs.result?.set(testJob?.result)
 				result = testJob.result
 
-				if ($errorByComponent[id] && !result?.error) {
-					delete $errorByComponent[id]
+				const previousJobId = Object.keys($errorByComponent).find(
+					(key) => $errorByComponent[key].componentId === id
+				)
+
+				if (previousJobId && !result?.error) {
+					delete $errorByComponent[previousJobId]
 					$errorByComponent = $errorByComponent
 				}
 			}
@@ -318,6 +327,19 @@
 		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 			Please select a runnable
 		</Alert>
+	{:else if result?.error && $mode === 'preview'}
+		<div class="p-2">
+			<Alert type="error" title="Error during execution">
+				<div class="flex flex-col gap-2">
+					An error occured, please contact the app author.
+					<span class="font-semibold">Job id: {testJob?.id}</span>
+					<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+						>{JSON.stringify(result.error, null, 4)}
+				</pre>
+				</div>
+			</Alert>
+			<slot />
+		</div>
 	{:else}
 		<div class="block w-full h-full">
 			<slot />

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -54,7 +54,7 @@
 	})
 
 	const runnableComponents = writable<Record<string, () => Promise<void>>>({})
-	const errorByComponent = writable<Record<string, string>>({})
+	const errorByComponent = writable<Record<string, { error: string; componentId: string }>>({})
 
 	setContext<AppEditorContext>('AppEditorContext', {
 		worldStore,
@@ -74,7 +74,8 @@
 		jobs: writable([]),
 		staticExporter: writable({}),
 		noBackend: false,
-		errorByComponent
+		errorByComponent,
+		openDebugRun: writable(undefined)
 	})
 
 	let timeout: NodeJS.Timeout | undefined = undefined

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -57,13 +57,34 @@
 
 	export let policy: Policy
 
-	const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const {
+		app,
+		summary,
+		mode,
+		breakpoint,
+		appPath,
+		jobs,
+		staticExporter,
+		errorByComponent,
+		openDebugRun
+	} = getContext<AppEditorContext>('AppEditorContext')
+
 	const loading = {
 		publish: false,
 		save: false
 	}
 
+	$: if ($openDebugRun == undefined) {
+		$openDebugRun = (componentId: string) => {
+			jobsDrawerOpen = true
+
+			const job = $jobs.find((job) => job.component === componentId)
+			if (job) {
+				selectedJobId = job.job
+			}
+		}
+	}
+
 	let newPath: string = ''
 	let pathError: string | undefined = undefined
 
@@ -219,10 +240,13 @@
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div
-										class="{classNames(
+										class={classNames(
 											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-											selectedJobId == job ? 'bg-blue-100 text-blue-600' : ''
-										)},"
+											$errorByComponent[job] ? 'border border-red-500 bg-red-100' : '',
+											selectedJobId == job && !$errorByComponent[component]
+												? 'bg-blue-100 text-blue-600'
+												: ''
+										)}
 										on:click={() => (selectedJobId = job)}
 									>
 										<span class="text-xs truncate">{job}</span>

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -60,7 +60,8 @@
 		jobs: writable([]),
 		staticExporter: writable({}),
 		noBackend,
-		errorByComponent: writable({})
+		errorByComponent: writable({}),
+		openDebugRun: writable(undefined)
 	})
 
 	let mounted = false

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -14,9 +14,15 @@
 
 	const dispatch = createEventDispatcher()
 
-	const { errorByComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { errorByComponent, openDebugRun } = getContext<AppEditorContext>('AppEditorContext')
 
-	$: error = $errorByComponent[component.id]
+	$: error = Object.values($errorByComponent).find((e) => e.componentId === component.id)
+
+	function openDebugRuns() {
+		if ($openDebugRun) {
+			$openDebugRun(component.id)
+		}
+	}
 </script>
 
 <span
@@ -64,6 +70,7 @@
 {/if}
 
 {#if error}
+	{@const json = JSON.parse(JSON.stringify(error.error))}
 	<span
 		title="Error"
 		class={classNames(
@@ -75,9 +82,14 @@
 			<Bug size={14} />
 			<span slot="text">
 				<div class="bg-white">
-					<Alert type="error" title="Error during execution">
-						<div class="flex flex-col">
-							<span> See "Debug Runs" on the top right for more details </span>
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+									>{json?.stack ?? ''}
+									</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
 						</div>
 					</Alert>
 				</div>

frontend/src/lib/components/apps/types.ts

@@ -172,7 +172,8 @@ export type AppEditorContext = {
 	isEditor: boolean
 	jobs: Writable<{ job: string; component: string }[]>
 	noBackend: boolean
-	errorByComponent: Writable<Record<string, string>>
+	errorByComponent: Writable<Record<string, { error: string; componentId: string }>>
+	openDebugRun: Writable<((componentID: string) => void) | undefined>
 }
 
 export type EditorMode = 'dnd' | 'preview'