Chore: upgrade Node.js from v20.9.0 (EOL) and update dependencies/configurations

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6.2.0
         with:
-          node-version: 20.9.0
+          node-version: 24.15.0
 
       - name: Install dependencies
         run: npm install

.nvmrc

@@ -1 +1 @@
-20.9.0
+24.15.0

components/RegexHighlightText.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from "react";
 import {
   HoverCard,
   HoverCardContent,
@@ -14,7 +15,7 @@ export default function RegexHighlightText(props: RegexHighlightTextProps) {
     return <pre className="whitespace-pre-wrap break-words">{props.text}</pre>;
   }
 
-  const parts: JSX.Element[] = [];
+  const parts: ReactElement[] = [];
   const newLine = (
     <>
       ↵<br />

components/SearchHighlightText.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 interface SearchHighlightTextProps {
   text: string;
   searchQuery: string;
@@ -17,14 +19,14 @@ export default function SearchHighlightText({
     return <span className={className}>{text}</span>;
   }
 
-  const parts: JSX.Element[] = [];
+  const parts: ReactElement[] = [];
   const lowerText = text.toLowerCase();
   const lowerQuery = searchQuery.toLowerCase();
 
   let lastIndex = 0;
-  let currentIndex = 0;
+  let currentIndex = lowerText.indexOf(lowerQuery, lastIndex);
 
-  while ((currentIndex = lowerText.indexOf(lowerQuery, lastIndex)) !== -1) {
+  while (currentIndex !== -1) {
     // Add text before match
     if (currentIndex > lastIndex) {
       parts.push(
@@ -45,6 +47,7 @@ export default function SearchHighlightText({
     );
 
     lastIndex = currentIndex + lowerQuery.length;
+    currentIndex = lowerText.indexOf(lowerQuery, lastIndex);
   }
 
   // Add remaining text

components/ds/ButtonComponent.tsx

@@ -33,7 +33,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

components/ds/CommandMenu.tsx

@@ -21,7 +21,7 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+type CommandDialogProps = DialogProps;
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (

components/ds/ImageUploadComponent.tsx

@@ -1,4 +1,5 @@
 "use client";
+import type { ReactElement } from "react";
 import { DragEvent, useCallback, useMemo, useRef, useState } from "react";
 import UploadIcon from "@/components/icons/UploadIcon";
 
@@ -115,7 +116,7 @@ const StatusComponent = ({
   </div>
 );
 
-const statusComponents: Record<Status, (maxSize: string) => JSX.Element> = {
+const statusComponents: Record<Status, (maxSize: string) => ReactElement> = {
   idle: (maxSize) => (
     <StatusComponent
       title="Drag and drop your image here, or click to select"

components/ds/InputComponent.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

components/ds/MultiFileUploadComponent.tsx

@@ -1,4 +1,5 @@
 "use client";
+import type { ReactElement } from "react";
 import { DragEvent, useCallback, useMemo, useRef, useState } from "react";
 import UploadIcon from "@/components/icons/UploadIcon";
 
@@ -174,7 +175,7 @@ const StatusComponent = ({
 
 const statusComponents: Record<
   Status,
-  (maxSize: string, fileType: string, multiple: boolean) => JSX.Element
+  (maxSize: string, fileType: string, multiple: boolean) => ReactElement
 > = {
   idle: (maxSize, fileType, multiple) => (
     <StatusComponent

components/ds/SVGUploadComponent.tsx

@@ -1,4 +1,5 @@
 "use client";
+import type { ReactElement } from "react";
 import { DragEvent, useCallback, useMemo, useRef, useState } from "react";
 import UploadIcon from "@/components/icons/UploadIcon";
 
@@ -162,7 +163,7 @@ const StatusComponent = ({
   </div>
 );
 
-const statusComponents: Record<Status, (maxSize: string) => JSX.Element> = {
+const statusComponents: Record<Status, (maxSize: string) => ReactElement> = {
   idle: (maxSize) => (
     <StatusComponent
       title="Drag and drop your SVG file here, or click to select"

components/ds/TextareaComponent.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {

components/har-waterfall/HarWaterfall.tsx

@@ -178,7 +178,7 @@ export const HarWaterfall: React.FC<HarWaterfallProps> = ({
           if (isBase64(contentToSearch)) {
             try {
               contentToSearch = atob(contentToSearch);
-            } catch (e) {
+            } catch {
               // If decode fails, search in original
             }
           }

components/theme-provider.tsx

@@ -1,6 +1,8 @@
 "use client";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

components/utils/csv-logs-viewer.utils.ts

@@ -403,8 +403,7 @@ export function buildSmartFacets(
     const cardinalityRatio = totalRows > 0 ? uniqueCount / totalRows : 1;
 
     // Determine if this column should be a facet
-    let shouldInclude = false;
-
+    let shouldInclude: boolean;
     // Always include facet-friendly columns if they have reasonable cardinality
     if (isFacetFriendlyColumn(header)) {
       shouldInclude = uniqueCount <= 100 && uniqueCount > 1;

components/utils/har-utils.ts

@@ -71,7 +71,7 @@ export function getFilterType(entry: HarEntry): FilterType {
     return "Errors";
   }
 
-  const { mimeType } = entry.response.content;
+  const mimeType = entry.response.content.mimeType ?? "";
 
   if (
     entry.request.url.includes("xhr") ||
@@ -100,15 +100,15 @@ export function getFilterType(entry: HarEntry): FilterType {
 export function isBase64(str: string) {
   try {
     return btoa(atob(str)) === str;
-  } catch (err) {
+  } catch {
     return false;
   }
 }
 
 export function tryParseJSON(str: string) {
   try {
     return JSON.parse(str);
-  } catch (e) {
+  } catch {
     return str;
   }
 }
@@ -171,7 +171,7 @@ export function getMatchCategories(
     if (isBase64(contentToSearch)) {
       try {
         contentToSearch = atob(contentToSearch);
-      } catch (e) {
+      } catch {
         // If decode fails, search in original
       }
     }

components/utils/hash-generator.utils.ts

@@ -31,8 +31,10 @@ export const generateHash = (
 
     return hash.update(data).digest(encoding);
   } catch (error) {
-    throw new Error(
-      `Failed to generate hash: ${error instanceof Error ? error.message : "An unknown error occurred"}`
-    );
+    const innerMessage =
+      error instanceof Error ? error.message : "An unknown error occurred";
+    throw new Error(`Failed to generate hash: ${innerMessage}`, {
+      cause: error,
+    });
   }
 };

components/utils/json-to-csv.utils.ts

@@ -27,9 +27,11 @@ export function convertJSONtoCSV(input: string | object): string {
     return csv;
   } catch (error) {
     if (error instanceof Error) {
-      throw new Error(error.message);
+      throw new Error(error.message, { cause: error });
     } else {
-      throw new Error("Failed to convert JSON to CSV: Unknown error");
+      throw new Error("Failed to convert JSON to CSV: Unknown error", {
+        cause: error,
+      });
     }
   }
 }

components/utils/json-to-tsv.utils.ts

@@ -30,7 +30,9 @@ export function convertJSONtoTSV(input: string | object): string {
     if (error instanceof Error) {
       throw error;
     } else {
-      throw new Error("Failed to convert JSON to TSV: Unknown error");
+      throw new Error("Failed to convert JSON to TSV: Unknown error", {
+        cause: error,
+      });
     }
   }
 }

components/utils/jwt-parser.utils.ts

@@ -6,7 +6,7 @@ function base64UrlDecode(str: string): string {
     const decoded = fromBase64(base64);
     if (!decoded) throw new Error();
     return decoded;
-  } catch (error) {
+  } catch {
     throw new Error("Invalid token");
   }
 }
@@ -28,7 +28,7 @@ function decodeJWT(token: string): {
       payload: JSON.parse(base64UrlDecode(payload)),
       signature,
     };
-  } catch (error) {
+  } catch {
     throw new Error("Invalid token");
   }
 }

components/utils/regex-tester.utils.ts

@@ -120,8 +120,8 @@ export const createRegex = (pattern: string): RegExp => {
     throw new Error("Pattern must be a non-empty string");
   }
 
-  let patternBody = "";
-  let flags = "";
+  let patternBody: string;
+  let flags: string = "";
 
   if (pattern.startsWith("/")) {
     const lastSlashIndex = pattern.lastIndexOf("/");
@@ -152,7 +152,7 @@ export const createRegex = (pattern: string): RegExp => {
     return new RegExp(patternBody, flags);
   } catch (error) {
     if (error instanceof SyntaxError) {
-      throw new Error(error.message);
+      throw new Error(error.message, { cause: error });
     }
     throw error;
   }
@@ -398,7 +398,7 @@ export const explainPattern = (pattern: string): PatternComponent[] => {
       while (j < patternBody.length && patternBody[j] !== "}") j++;
       const quantifier = patternBody.slice(i, j + 1);
       const inner = quantifier.slice(1, -1);
-      let explanation = "";
+      let explanation: string;
 
       if (inner.includes(",")) {
         const [min, max] = inner.split(",");

components/utils/sql-minifier.utils.ts

@@ -151,7 +151,12 @@ export function minifySQL(sql: string): string {
     return result.trim();
   } catch (error) {
     throw new Error(
-      `Failed to minify SQL: ${error instanceof Error ? error.message : "Unknown error"}`
+      `Failed to minify SQL: ${
+        error instanceof Error ? error.message : "Unknown error"
+      }`,
+      {
+        cause: error,
+      }
     );
   }
 }

components/utils/url-encoder.utils.ts

@@ -28,7 +28,7 @@ export function decode(input: string): string {
     } else {
       return decodeURIComponent(input);
     }
-  } catch (error) {
+  } catch {
     return "Failed to decode string";
   }
 }

eslint.config.mjs

@@ -0,0 +1,75 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import reactPlugin from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+
+export default [
+  {
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "dist/**",
+      "build/**",
+      "coverage/**",
+    ],
+  },
+
+  js.configs.recommended,
+
+  ...tseslint.configs.recommended,
+
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+
+    languageOptions: {
+      parser: tseslint.parser,
+
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+
+    plugins: {
+      react: reactPlugin,
+      import: importPlugin,
+      "react-hooks": reactHooks,
+      "@typescript-eslint": tseslint.plugin,
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+
+      "import/resolver": {
+        typescript: {
+          alwaysTryTypes: true,
+          project: "./tsconfig.json",
+        },
+      },
+    },
+
+    rules: {
+      "react/jsx-uses-react": "off",
+      "react/jsx-uses-vars": "error",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "import/no-named-as-default-member": "off",
+      "react/no-unescaped-entities": "off",
+    },
+  },
+];