Task/3850 show error info (#872)

* full width error highlight

* Separate stacktrace and code cards

* fix button styling

* red border'

* error colors and intent/emphasis

* use our colors for highlighted line

* fix: style

---------

Co-authored-by: Cahllagerfeld <[email protected]>

Author: tzador

src/components/CodeSnippet.tsx

@@ -12,6 +12,7 @@ type DisplayCodeProps = {
 	codeClasses?: string;
 	language?: "python" | "bash" | "ts" | "dockerfile";
 	copyCode?: string;
+	exceptionCodeLine?: number;
 };
 
 export function Codesnippet({
@@ -22,7 +23,8 @@ export function Codesnippet({
 	className,
 	codeClasses,
 	language = "python",
-	copyCode = code
+	copyCode = code,
+	exceptionCodeLine
 }: DisplayCodeProps) {
 	const [copied, setCopied] = useState(false);
 
@@ -39,27 +41,39 @@ export function Codesnippet({
 	}
 
 	return (
-		<div
-			className={cn(
-				`flex ${
-					fullWidth ? "w-full" : "max-w-fit"
-				} justify-between gap-4 rounded-md border border-theme-border-moderate bg-theme-surface-tertiary px-4 py-3 font-normal`,
-				className
-			)}
-		>
-			<pre
+		<div className="relative w-full">
+			<div
 				className={cn(
-					`${
-						wrap ? "" : "whitespace-nowrap"
-					} overflow-auto text-left font-mono text-theme-text-primary`,
-					codeClasses
+					`flex ${
+						fullWidth ? "w-full" : "max-w-fit"
+					} justify-between gap-4 rounded-md border border-theme-border-moderate bg-theme-surface-tertiary px-4 py-3 font-normal`,
+					className
 				)}
 			>
-				{highlightCode ? <CodeHighlighter language={language} code={code} /> : <code>{code}</code>}
-			</pre>
-			<button onClick={() => copyToClipboard(copyCode)}>
-				{copied ? <p>Copied!</p> : <Copy className="fill-neutral-500" width={24} height={24} />}
-			</button>
+				<pre
+					className={cn(
+						`${
+							wrap ? "" : "whitespace-nowrap"
+						} overflow-auto text-left font-mono text-theme-text-primary`,
+						codeClasses
+					)}
+				>
+					{highlightCode ? (
+						<CodeHighlighter language={language} code={code} />
+					) : (
+						<code>{code}</code>
+					)}
+				</pre>
+				{exceptionCodeLine && (
+					<div
+						className="error-highlight-line pointer-events-none absolute left-0 h-[24px] w-full bg-error-50"
+						style={{ top: `${24 * exceptionCodeLine + 17}px` }}
+					></div>
+				)}
+				<button onClick={() => copyToClipboard(copyCode)}>
+					{copied ? <p>Copied!</p> : <Copy className="fill-neutral-500" width={24} height={24} />}
+				</button>
+			</div>
 		</div>
 	);
 }

src/components/CollapsibleCard.tsx

@@ -13,7 +13,7 @@ import { CopyMetadataButton } from "./copy-metadata-button";
 type CollapsibleCardProps = {
 	initialOpen?: boolean;
 	children: React.ReactNode;
-	title: string | React.ReactNode;
+	title: React.ReactNode;
 	className?: string;
 	contentClassName?: string;
 	intent?: CollapsibleHeaderProps["intent"];

src/components/steps/step-sheet/CodeTab.tsx

@@ -1,23 +1,68 @@
 import { Codesnippet } from "@/components/CodeSnippet";
 import { CollapsibleCard } from "@/components/CollapsibleCard";
 import { useStepDetail } from "@/data/steps/step-detail-query";
-import { Skeleton } from "@zenml-io/react-component-library";
+import { Button, Skeleton } from "@zenml-io/react-component-library";
 import { ErrorFallback } from "../../Error";
+import AlertCircle from "@/assets/icons/alert-circle.svg?react";
+import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
 
 type Props = {
 	stepId: string;
 };
 
+function goToError() {
+	const errorLineElement = document.querySelector(".error-highlight-line");
+	if (errorLineElement) {
+		errorLineElement.scrollIntoView({ behavior: "smooth" });
+	}
+}
+
 export function StepCodeTab({ stepId }: Props) {
 	const { data, isPending, isError, error } = useStepDetail({ stepId });
 
 	if (isError) return <ErrorFallback err={error} />;
 
 	if (isPending) return <Skeleton className="h-[300px] w-full" />;
 
+	const traceback = data?.metadata?.exception_info?.traceback;
+
 	return (
-		<CollapsibleCard initialOpen title="Code">
-			<Codesnippet fullWidth highlightCode wrap code={data?.metadata?.source_code || ""} />
-		</CollapsibleCard>
+		<div className="flex flex-col gap-5">
+			{traceback && (
+				<CollapsibleCard
+					initialOpen
+					title={
+						<>
+							<AlertCircle className="h-5 w-5 fill-theme-text-error" /> Error
+						</>
+					}
+					contentClassName="border-t border-error-200"
+					className="border border-error-200"
+					headerClassName="flex justify-between"
+					headerChildren={
+						<Button
+							className="whitespace-nowrap"
+							onClick={goToError}
+							intent="danger"
+							emphasis="subtle"
+						>
+							Go to error
+							<ArrowLeft className="h-5 w-5 -rotate-90 fill-error-700" />
+						</Button>
+					}
+				>
+					<div className="whitespace-pre-wrap font-mono text-text-md">{traceback}</div>
+				</CollapsibleCard>
+			)}
+			<CollapsibleCard initialOpen title="Code">
+				<Codesnippet
+					fullWidth
+					highlightCode
+					wrap
+					code={data?.metadata?.source_code || ""}
+					exceptionCodeLine={data?.metadata?.exception_info?.step_code_line ?? undefined}
+				/>
+			</CollapsibleCard>
+		</div>
 	);
 }