Add full exception trace to UI

web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx

@@ -8,6 +8,8 @@ import {
   TableBody,
   TableCell,
   Text,
+  Button,
+  Divider,
 } from "@tremor/react";
 import { IndexAttemptStatus } from "@/components/Status";
 import { CCPairFullInfo } from "./types";
@@ -15,14 +17,63 @@ import { useState } from "react";
 import { PageSelector } from "@/components/PageSelector";
 import { localizeAndPrettify } from "@/lib/time";
 import { getDocsProcessedPerMinute } from "@/lib/indexAttempt";
+import { Modal } from "@/components/Modal";
+import { CheckmarkIcon, CopyIcon } from "@/components/icons/icons";
 
 const NUM_IN_PAGE = 8;
 
 export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
   const [page, setPage] = useState(1);
+  const [indexAttemptTracePopupId, setIndexAttemptTracePopupId] = useState<
+    number | null
+  >(null);
+  const indexAttemptToDisplayTraceFor = ccPair.index_attempts.find(
+    (indexAttempt) => indexAttempt.id === indexAttemptTracePopupId
+  );
+  const [copyClicked, setCopyClicked] = useState(false);
 
   return (
     <>
+      {indexAttemptToDisplayTraceFor &&
+        indexAttemptToDisplayTraceFor.full_exception_trace && (
+          <Modal
+            width="w-4/6"
+            className="h-5/6 overflow-y-hidden flex flex-col"
+            title="Full Exception Trace"
+            onOutsideClick={() => setIndexAttemptTracePopupId(null)}
+          >
+            <div className="overflow-y-auto mb-6">
+              <div className="mb-6">
+                {!copyClicked ? (
+                  <div
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        indexAttemptToDisplayTraceFor.full_exception_trace!
+                      );
+                      setCopyClicked(true);
+                      setTimeout(() => setCopyClicked(false), 2000);
+                    }}
+                    className="flex w-fit cursor-pointer hover:bg-hover-light p-2 border-border border rounded"
+                  >
+                    Copy full trace
+                    <CopyIcon className="ml-2 my-auto" />
+                  </div>
+                ) : (
+                  <div className="flex w-fit hover:bg-hover-light p-2 border-border border rounded cursor-default">
+                    Copied to clipboard
+                    <CheckmarkIcon
+                      className="my-auto ml-2 flex flex-shrink-0 text-success"
+                      size={16}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="whitespace-pre-wrap">
+                {indexAttemptToDisplayTraceFor.full_exception_trace}
+              </div>
+            </div>
+          </Modal>
+        )}
       <Table>
         <TableHead>
           <TableRow>
@@ -61,7 +112,17 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
                   <TableCell>{indexAttempt.total_docs_indexed}</TableCell>
                   <TableCell>
                     <Text className="flex flex-wrap whitespace-normal">
-                      {indexAttempt.error_msg || "-"}
+                      <div>{indexAttempt.error_msg || "-"}</div>
+                      {indexAttempt.full_exception_trace && (
+                        <div
+                          onClick={() =>
+                            setIndexAttemptTracePopupId(indexAttempt.id)
+                          }
+                          className="mt-2 text-link cursor-pointer"
+                        >
+                          View Full Trace
+                        </div>
+                      )}
                     </Text>
                   </TableCell>
                 </TableRow>

web/src/lib/types.ts

@@ -167,6 +167,7 @@ export interface IndexAttemptSnapshot {
   new_docs_indexed: number;
   total_docs_indexed: number;
   error_msg: string | null;
+  full_exception_trace: string | null;
   time_started: string | null;
   time_updated: string;
 }