Add collapsible failed task logs to prevent React error 185 (apache#54377)

* Add collapsible failed task logs to prevent React error 185

- Recent failed task logs now start collapsed by default
- Added "Expand Logs"/"Hide Logs" toggle buttons with translations
- Implemented lazy loading - logs only fetch when expanded
- Prevents page crashes from large log content rendering
- Increased log container max height from 100px to 200px

* Apply suggestion from @bbovenzi

Co-authored-by: Brent Bovenzi <[email protected]>

* Add optional  parameter to useLogs hook to truncate logs before rendering, preventing page unresponsiveness when expanding multiple large log previews. This addresses performance issues with tasks that have very large logs (10M+) while
  maintaining the lazy loading behavior.

  - Add limit parameter to useLogs hook Props interface
  - Implement log truncation logic using useMemo for performance
  - Update TaskLogPreview to use limit: 100 for overview display
  - Preserve backward compatibility - existing usage without limit unchanged

* Pierre's Suggestions

---------

Co-authored-by: Brent Bovenzi <[email protected]>

Author: 2 people

airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json

@@ -84,6 +84,8 @@
       "assetEvent_other": "Created Asset Events"
     },
     "failedLogs": {
+      "hideLogs": "Hide Logs",
+      "showLogs": "Show Logs",
       "title": "Recent Failed Task Logs",
       "viewFullLogs": "View full logs"
     }

airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, Link } from "@chakra-ui/react";
+import { Box, Flex, Link, Button } from "@chakra-ui/react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -36,28 +37,37 @@ export const TaskLogPreview = ({
   readonly wrap: boolean;
 }) => {
   const { t: translate } = useTranslation("dag");
+  const [isExpanded, setIsExpanded] = useState(false);
+
   const { data, error, isLoading } = useLogs(
     {
       dagId: taskInstance.dag_id,
+      limit: 100,
       logLevelFilters: ["error", "critical"],
       taskInstance,
       tryNumber: taskInstance.try_number,
     },
     {
+      enabled: isExpanded,
       refetchInterval: false,
       retry: false,
     },
   );
 
   return (
     <Box borderRadius={4} borderStyle="solid" borderWidth={1} key={taskInstance.id} width="100%">
-      <Flex alignItems="center" justifyContent="space-between" px={2}>
+      <Flex alignItems="center" justifyContent="space-between" px={2} py={2}>
         <Box>
           <StateBadge mr={1} state={taskInstance.state} />
           {taskInstance.task_display_name}
           <Time datetime={taskInstance.run_after} ml={1} />
         </Box>
         <Flex gap={1}>
+          <Button fontSize="sm" onClick={() => setIsExpanded(!isExpanded)} size="sm" variant="ghost">
+            {isExpanded
+              ? translate("overview.failedLogs.hideLogs")
+              : translate("overview.failedLogs.showLogs")}
+          </Button>
           <ClearTaskInstanceButton taskInstance={taskInstance} withText={false} />
           <Link asChild color="fg.info" fontSize="sm">
             <RouterLink to={getTaskInstanceLink(taskInstance)}>
@@ -66,15 +76,17 @@ export const TaskLogPreview = ({
           </Link>
         </Flex>
       </Flex>
-      <Box maxHeight="100px" overflow="auto">
-        <TaskLogContent
-          error={error}
-          isLoading={isLoading}
-          logError={error}
-          parsedLogs={data.parsedLogs ?? []}
-          wrap={wrap}
-        />
-      </Box>
+      {isExpanded ? (
+        <Box borderTopStyle="solid" borderTopWidth={1} maxHeight="200px" overflow="auto">
+          <TaskLogContent
+            error={error}
+            isLoading={isLoading}
+            logError={error}
+            parsedLogs={data.parsedLogs ?? []}
+            wrap={wrap}
+          />
+        </Box>
+      ) : null}
     </Box>
   );
 };

airflow-core/src/airflow/ui/src/queries/useLogs.tsx

@@ -20,6 +20,7 @@ import { chakra, Box } from "@chakra-ui/react";
 import type { UseQueryOptions } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import type { TFunction } from "i18next";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import innerText from "react-innertext";
 
@@ -34,6 +35,7 @@ type Props = {
   accept?: "*/*" | "application/json" | "application/x-ndjson";
   dagId: string;
   expanded?: boolean;
+  limit?: number;
   logLevelFilters?: Array<string>;
   showSource?: boolean;
   showTimestamp?: boolean;
@@ -184,6 +186,7 @@ export const useLogs = (
     accept = "application/x-ndjson",
     dagId,
     expanded,
+    limit,
     logLevelFilters,
     showSource,
     showTimestamp,
@@ -217,8 +220,25 @@ export const useLogs = (
     },
   );
 
+  // Log truncation is performed in the frontend because the backend
+  // does not support yet pagination / limits on logs reading endpoint
+  const truncatedData = useMemo(() => {
+    if (!data?.content || limit === undefined || limit <= 0) {
+      return data;
+    }
+
+    const streamingContent = parseStreamingLogContent(data);
+    const truncatedContent =
+      streamingContent.length > limit ? streamingContent.slice(-limit) : streamingContent;
+
+    return {
+      ...data,
+      content: truncatedContent,
+    };
+  }, [data, limit]);
+
   const parsedData = parseLogs({
-    data: parseStreamingLogContent(data),
+    data: parseStreamingLogContent(truncatedData),
     expanded,
     logLevelFilters,
     showSource,