Enhancement - Improve playground error message

agenta-backend/agenta_backend/routers/variants_router.py

@@ -1,4 +1,5 @@
 import os
+import inspect
 import logging
 from typing import Any, Optional, Union, List
 
@@ -24,11 +25,13 @@
         Image_ as Image,
         AppVariantResponse_ as AppVariantResponse,
     )
+    from agenta_backend.cloud.services import logs_manager
 else:
     from agenta_backend.models.api.api_models import (
         Image,
         AppVariantResponse,
     )
+    from agenta_backend.services import logs_manager
 
 from agenta_backend.models.api.api_models import (
     URI,
@@ -312,6 +315,22 @@ async def start_variant(
     return url
 
 
+@router.get("/{variant_id}/logs/", operation_id="retrieve_variant_logs")
+async def retrieve_variant_logs(variant_id: str, request: Request):
+    try:
+        app_variant = await db_manager.fetch_app_variant_by_id(variant_id)
+        deployment = await db_manager.get_deployment_by_appid(str(app_variant.app.id))
+        is_coroutine_function = inspect.iscoroutinefunction(logs_manager.retrieve_logs)
+        if is_coroutine_function:
+            logs_result = await logs_manager.retrieve_logs(deployment.container_id)
+        else:
+            logs_result = logs_manager.retrieve_logs(deployment.container_id)
+        return logs_result
+    except Exception as exc:
+        logger.exception(f"An error occurred: {str(exc)}")
+        raise HTTPException(500, {"message": str(exc)})
+
+
 @router.get(
     "/{variant_id}/",
     operation_id="get_variant",

agenta-backend/agenta_backend/services/logs_manager.py

@@ -0,0 +1,20 @@
+import aiodocker
+
+
+async def retrieve_logs(container_id: str) -> str:
+    """
+    Retrieves and returns the last 10 lines of logs (both stdout and stderr)
+    for a specified Docker container.
+
+    Args:
+        container_id (str): The docker container identifier
+
+    Returns:
+        the last 10 lines of logs
+    """
+
+    async with aiodocker.Docker() as client:
+        container = await client.containers.get(container_id)
+        logs = await container.log(stdout=True, stderr=True)
+        outputs = logs[::-1][:10]
+        return "".join(outputs)

agenta-web/src/components/Playground/ViewNavigation.tsx

@@ -9,6 +9,7 @@ import {useState} from "react"
 import axios from "axios"
 import {createUseStyles} from "react-jss"
 import {
+    fetchVariantLogs,
     getAppContainerURL,
     removeVariant,
     restartAppVariantContainer,
@@ -36,6 +37,10 @@ const useStyles = createUseStyles({
     restartBtnMargin: {
         marginRight: "10px",
     },
+    errorLogs: {
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-all",
+    },
 })
 
 const ViewNavigation: React.FC<Props> = ({
@@ -69,6 +74,7 @@ const ViewNavigation: React.FC<Props> = ({
     const [retrying, setRetrying] = useState(false)
     const [isParamsCollapsed, setIsParamsCollapsed] = useState("1")
     const [containerURI, setContainerURI] = useState("")
+    const [variantErrorLogs, setVariantErrorLogs] = useState("")
     const [restarting, setRestarting] = useState<boolean>(false)
     const {currentApp} = useAppsData()
     const retriedOnce = useRef(false)
@@ -101,7 +107,15 @@ const ViewNavigation: React.FC<Props> = ({
                     setRetrying(false)
                 })
         }
-    }, [netWorkError])
+
+        if (isError) {
+            const getLogs = async () => {
+                const logs = await fetchVariantLogs(variant.variantId)
+                setVariantErrorLogs(logs)
+            }
+            getLogs()
+        }
+    }, [netWorkError, isError, variant.variantId])
 
     if (retrying || (!retriedOnce.current && netWorkError)) {
         return (
@@ -115,7 +129,8 @@ const ViewNavigation: React.FC<Props> = ({
 
     if (isError) {
         let variantDesignator = variant.templateVariantName
-        let imageName = `agentaai/${(currentApp?.app_name || "").toLowerCase()}_`
+        let appName = currentApp?.app_name || ""
+        let imageName = `agentaai/${appName.toLowerCase()}_`
 
         if (!variantDesignator || variantDesignator === "") {
             variantDesignator = variant.variantName
@@ -165,31 +180,39 @@ const ViewNavigation: React.FC<Props> = ({
                         <p>
                             Error connecting to the variant {variant.variantName}.{" "}
                             {(axios.isAxiosError(error) && error.response?.status === 404 && (
-                                <span>Container is not running.</span>
+                                <span>
+                                    Container is not running. <b>See logs below:</b>
+                                </span>
                             )) || <span>{error.message}</span>}
                         </p>
-                        <p>To debug this issue, please follow the steps below:</p>
                         <ul>
-                            <li>
-                                Verify whether the API is up by checking if {apiAddress} is
-                                accessible.
-                            </li>
-                            <li>
-                                Check if the Docker container for the variant {variantDesignator} is
-                                running. The image should be called {imageName}.
-                            </li>
+                            {isDemo() && (
+                                <div>
+                                    <pre className={classes.errorLogs}>{variantErrorLogs}</pre>
+                                </div>
+                            )}
+                            {!isDemo() && (
+                                <div>
+                                    <pre className={classes.errorLogs}>{variantErrorLogs}</pre>
+                                </div>
+                            )}
                         </ul>
                         <p>
-                            {" "}
-                            In case the docker container is not running. Please check the logs from
-                            docker to understand the issue. Most of the time it is a missing
-                            requirements. Also, please attempt restarting it (using cli or docker
-                            desktop)
+                            Verify API accessibility at{" "}
+                            <a href={apiAddress} target="_blank">
+                                {apiAddress}
+                            </a>
                         </p>
                         <p>
                             {" "}
-                            If the issue persists please file an issue in github here:
-                            https://github.com/Agenta-AI/agenta/issues/new?title=Issue%20in%20ViewNavigation.tsx
+                            If the issue persists please file an issue in github
+                            <a
+                                href="https://github.com/Agenta-AI/agenta/issues/new?title=Issue%20in%20ViewNavigation.tsx"
+                                target="_blank"
+                            >
+                                {" "}
+                                here
+                            </a>
                         </p>
 
                         <Button

agenta-web/src/lib/services/api.ts

@@ -60,6 +60,13 @@ export async function fetchVariants(
     return []
 }
 
+export const fetchVariantLogs = async (variantId: string, ignoreAxiosError: boolean = false) => {
+    const response = await axios.get(`${getAgentaApiUrl()}/api/variants/${variantId}/logs`, {
+        _ignoreError: ignoreAxiosError,
+    } as any)
+    return response.data
+}
+
 export function restartAppVariantContainer(variantId: string) {
     return axios.post(`${getAgentaApiUrl()}/api/containers/restart_container/`, {
         variant_id: variantId,