Highlight error message at the end of log (#71)

Author: jordalgo

src/App.test.tsx

@@ -222,4 +222,30 @@ describe("App", () => {
       expect(el.classList).toContain("selected-line");
     });
   });
+
+  it("labels the final error message", async () => {
+    render(<App />);
+
+    const inputEl = document.getElementById("input-text");
+    if (!inputEl) {
+      throw new Error(DOM_EL_FAIL);
+    }
+
+    fireEvent(
+      inputEl,
+      createEvent.paste(inputEl, {
+        clipboardData: {
+          getData: () => SAMPLE_LOG_DATA_2,
+        },
+      }),
+    );
+
+    const line117El = document.getElementById("line-117");
+    if (!line117El) {
+      throw new Error(DOM_EL_FAIL);
+    }
+
+    expect(line117El.classList).toContain("error-message");
+    expect(line117El.innerHTML).toBe("R6 invalid mem access 'scalar'");
+  });
 });

src/analyzer.ts

@@ -77,6 +77,7 @@ export type VerifierLogState = {
   cLineIdtoIdx: Map<string, number>;
   bpfStates: BpfState[];
   cSourceMap: CSourceMap;
+  lastInsIdx: number;
 };
 
 export function makeValue(
@@ -272,6 +273,7 @@ export function getEmptyVerifierState(): VerifierLogState {
     cLineIdtoIdx: new Map(),
     bpfStates: [],
     cSourceMap: new CSourceMap(),
+    lastInsIdx: 0,
   };
 }
 
@@ -299,6 +301,7 @@ export function processRawLines(rawLines: string[]): VerifierLogState {
   let currentCSourceLine: CSourceLine | undefined;
   const cSourceMap = new CSourceMap();
   const knownMessageIdxs: number[] = [];
+  let lastInsIdx: number = 0;
 
   // First pass: parse individual lines
   lines = rawLines.map((rawLine, idx) => {
@@ -309,6 +312,13 @@ export function processRawLines(rawLines: string[]): VerifierLogState {
     return parsedLine;
   });
 
+  for (let i = lines.length - 1; i >= 0; --i) {
+    if (lines[i].type == ParsedLineType.INSTRUCTION) {
+      lastInsIdx = lines[i].idx;
+      break;
+    }
+  }
+
   // Process known messages and fixup parsed lines
   knownMessageIdxs.forEach((idx) => {
     const parsedLine = lines[idx];
@@ -378,6 +388,7 @@ export function processRawLines(rawLines: string[]): VerifierLogState {
     cSourceMap,
     cLines,
     cLineIdtoIdx,
+    lastInsIdx,
   };
 }
 

src/components.tsx

@@ -293,11 +293,13 @@ const LogLineRaw = ({
   state,
   indentLevel,
   idx,
+  lastInsIdx,
 }: {
   line: ParsedLine;
   state: BpfState;
   indentLevel: number;
   idx: number;
+  lastInsIdx: number;
 }) => {
   let content;
   const topClasses = ["log-line"];
@@ -312,7 +314,11 @@ const LogLineRaw = ({
       content = <>{line.raw}</>;
       break;
     default:
-      topClasses.push("ignorable-line");
+      if (lastInsIdx + 1 === idx) {
+        topClasses.push("error-message");
+      } else {
+        topClasses.push("ignorable-line");
+      }
       content = <>{line.raw}</>;
       break;
   }
@@ -703,7 +709,7 @@ const LogLinesRaw = ({
   handleLogLinesOver: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
 }) => {
-  const { bpfStates } = verifierLogState;
+  const { bpfStates, lastInsIdx } = verifierLogState;
   let indentLevel = 0;
   return (
     <div
@@ -730,6 +736,7 @@ const LogLinesRaw = ({
             line={line}
             idx={line.idx}
             key={`log_line_${line.idx}`}
+            lastInsIdx={lastInsIdx}
           />
         );
       })}

src/index.css

@@ -186,6 +186,11 @@ h1 {
   color: #cccccc;
 }
 
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+
 .inline-c-source-line,
 .active_mem_slot .inline-c-source-line.selected-line,
 .active_mem_slot .inline-c-source-line.dependency-line {