Merge pull request #3924 from element-hq/valere/devx/livekit_logs

dev-tool: Add option to enable extended livekit logs

src/initializer.tsx

@@ -23,12 +23,17 @@ import {
   createRoutesFromChildren,
   matchRoutes,
 } from "react-router-dom";
+import {
+  setLogExtension as setLKLogExtension,
+  setLogLevel as setLKLogLevel,
+} from "livekit-client";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget } from "./widget";
+import { enableExtendedLivekitLogs } from "./settings/settings.ts";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -189,6 +194,18 @@ export class Initializer {
 
     // Add the platform to the DOM, so CSS can query it
     document.body.setAttribute("data-platform", platform);
+
+    // livekit logging configuration
+    setLKLogExtension((level, msg, context) => {
+      // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
+      global.mx_rage_logger.log(level, "livekit", msg, context);
+    });
+
+    enableExtendedLivekitLogs.value$.subscribe((enabled) => {
+      setLKLogLevel(enabled ? "trace" : "info");
+    });
+
+    window.setLKLogLevel = setLKLogLevel;
   }
 
   public static init(): Promise<void> | null {

src/main.tsx

@@ -15,10 +15,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  setLogExtension as setLKLogExtension,
-  setLogLevel as setLKLogLevel,
-} from "livekit-client";
 
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
@@ -26,16 +22,9 @@ import { Initializer } from "./initializer";
 import { AppViewModel } from "./state/AppViewModel";
 import { globalScope } from "./state/ObservableScope";
 
-window.setLKLogLevel = setLKLogLevel;
-
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-setLKLogLevel("info");
-setLKLogExtension((level, msg, context) => {
-  // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
-  global.mx_rage_logger.log(level, "livekit", msg, context);
-});
 
 logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
 

src/settings/DeveloperSettingsTab.test.tsx

@@ -14,7 +14,11 @@ import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
 import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
-import { customLivekitUrl as customLivekitUrlSetting } from "./settings";
+import {
+  customLivekitUrl as customLivekitUrlSetting,
+  enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
+} from "./settings";
+
 // Mock url params hook to avoid environment-dependent snapshot churn.
 vi.mock("../UrlParams", () => ({
   useUrlParams: (): { mocked: boolean; answer: number } => ({
@@ -248,4 +252,63 @@ describe("DeveloperSettingsTab", () => {
       expect(customLivekitUrlSetting.getValue()).toBe(null);
     });
   });
+
+  // Add this test inside the describe("DeveloperSettingsTab", () => { block,
+  // after the custom livekit url tests:
+
+  describe("enable extended livekit logs", () => {
+    afterEach(() => {
+      enableExtendedLivekitLogsSetting.setValue(false);
+    });
+
+    it("toggles extended livekit logs setting", async () => {
+      const user = userEvent.setup();
+      const client = createMockMatrixClient();
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+          />
+        </TooltipProvider>,
+      );
+
+      const checkbox = screen.getByLabelText("Enable extended livekit logs");
+
+      // Initial state should be unchecked (default false)
+      expect(checkbox).not.toBeChecked();
+      expect(enableExtendedLivekitLogsSetting.getValue()).toBe(false);
+
+      // Click to enable
+      await user.click(checkbox);
+      expect(checkbox).toBeChecked();
+      expect(enableExtendedLivekitLogsSetting.getValue()).toBe(true);
+
+      // Click to disable
+      await user.click(checkbox);
+      expect(checkbox).not.toBeChecked();
+      expect(enableExtendedLivekitLogsSetting.getValue()).toBe(false);
+    });
+
+    it("Use the current setting value on render", () => {
+      const client = createMockMatrixClient();
+
+      // Set the value to true before rendering
+      enableExtendedLivekitLogsSetting.setValue(true);
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+          />
+        </TooltipProvider>,
+      );
+
+      const checkbox = screen.getByLabelText("Enable extended livekit logs");
+      expect(checkbox).toBeChecked();
+      expect(enableExtendedLivekitLogsSetting.getValue()).toBe(true);
+    });
+  });
 });

src/settings/DeveloperSettingsTab.tsx

@@ -43,6 +43,7 @@ import {
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
+  enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
 } from "./settings";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
@@ -101,6 +102,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
+  const [enableExtendedLivekitLogs, setEnableExtendedLivekitLogs] = useSetting(
+    enableExtendedLivekitLogsSetting,
+  );
+
   const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
     useState<string | null>(null);
   const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
@@ -225,7 +230,21 @@ export const DeveloperSettingsTab: FC<Props> = ({
             },
             [setAlwaysShowIphoneEarpiece],
           )}
-        />{" "}
+        />
+      </FieldRow>
+      <FieldRow>
+        <InputField
+          id="enableLivekitExtendedLogs"
+          type="checkbox"
+          label="Enable extended livekit logs"
+          checked={enableExtendedLivekitLogs}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setEnableExtendedLivekitLogs(event.target.checked);
+            },
+            [setEnableExtendedLivekitLogs],
+          )}
+        />
       </FieldRow>
       <EditInPlace
         onSubmit={(e) => e.preventDefault()}

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -185,7 +185,43 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         Show iPhone earpiece option on all platforms
       </label>
     </div>
-     
+  </div>
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field checkboxField"
+    >
+      <input
+        aria-describedby="_r_6_"
+        id="enableLivekitExtendedLogs"
+        type="checkbox"
+      />
+      <label
+        for="enableLivekitExtendedLogs"
+      >
+        <div
+          class="checkbox"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Enable extended livekit logs
+      </label>
+    </div>
   </div>
   <form
     class="_root_19upo_16"
@@ -195,7 +231,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     >
       <label
         class="_label_19upo_59"
-        for="radix-_r_6_"
+        for="radix-_r_7_"
       >
         Custom Livekit-url
       </label>
@@ -203,9 +239,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_controls_17lij_8"
       >
         <input
-          aria-describedby="radix-_r_7_"
+          aria-describedby="radix-_r_8_"
           class="_control_d83jn_10"
-          id="radix-_r_6_"
+          id="radix-_r_7_"
           name="input"
           title=""
           value=""
@@ -213,7 +249,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
       <span
         class="_message_19upo_85 _help-message_19upo_91"
-        id="radix-_r_7_"
+        id="radix-_r_8_"
       >
         Currently, no overwrite is set. Url from well-known or config is used.
       </span>
@@ -237,10 +273,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
             checked=""
             class="_input_1ug7n_18"
-            id="radix-_r_8_"
+            id="radix-_r_9_"
             name="_r_0_"
             title=""
             type="radio"
@@ -256,13 +292,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_8_"
+          for="radix-_r_9_"
         >
           Legacy: state events & oldest membership SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_9_"
+          id="radix-_r_a_"
         >
           Compatible with old versions of EC that do not support multi SFU
         </span>
@@ -278,9 +314,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
             class="_input_1ug7n_18"
-            id="radix-_r_a_"
+            id="radix-_r_b_"
             name="_r_0_"
             title=""
             type="radio"
@@ -296,13 +332,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_a_"
+          for="radix-_r_b_"
         >
           Compatibility: state events & multi SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_b_"
+          id="radix-_r_c_"
         >
           Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
         </span>
@@ -318,9 +354,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
             class="_input_1ug7n_18"
-            id="radix-_r_c_"
+            id="radix-_r_d_"
             name="_r_0_"
             title=""
             type="radio"
@@ -336,13 +372,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_c_"
+          for="radix-_r_d_"
         >
           Matrix 2.0: sticky events & multi SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_d_"
+          id="radix-_r_e_"
         >
           Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
         </span>

src/settings/settings.ts

@@ -129,6 +129,11 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
   false,
 );
 
+export const enableExtendedLivekitLogs = new Setting<boolean>(
+  "extended-livekit-logs",
+  false,
+);
+
 export enum MatrixRTCMode {
   Legacy = "legacy",
   Compatibility = "compatibility",