From 4613d43c3c4f9ee6298a7bdfdeee96cc4b841b6d Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 26 Sep 2023 12:08:08 +0100 Subject: [PATCH 1/3] Re-enable livekit rageshake logging & with depth limit Puts livekit logs back in the rageshake logs and adds a recursion limit to the object serialiser in rageshake. --- src/livekit/useLiveKit.ts | 3 --- src/main.tsx | 6 ++++++ src/settings/rageshake.ts | 23 +++++++++++++++++++++-- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts index fe1bec20..d6d8394b 100644 --- a/src/livekit/useLiveKit.ts +++ b/src/livekit/useLiveKit.ts @@ -20,7 +20,6 @@ import { ExternalE2EEKeyProvider, Room, RoomOptions, - setLogLevel, } from "livekit-client"; import { useLiveKitRoom } from "@livekit/components-react"; import { useEffect, useMemo, useRef, useState } from "react"; @@ -44,8 +43,6 @@ export type E2EEConfig = { sharedKey: string; }; -setLogLevel("debug"); - interface UseLivekitResult { livekitRoom?: Room; connState: ECConnectionState; diff --git a/src/main.tsx b/src/main.tsx index 58b653c8..4e962181 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -25,12 +25,18 @@ import { createRoot } from "react-dom/client"; import { createBrowserHistory } from "history"; import "./index.css"; import { logger } from "matrix-js-sdk/src/logger"; +import { + setLogExtension as setLKLogExtension, + setLogLevel, +} from "livekit-client"; import App from "./App"; import { init as initRageshake } from "./settings/rageshake"; import { Initializer } from "./initializer"; initRageshake(); +setLogLevel("debug"); +setLKLogExtension(global.mx_rage_logger.log); logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`); diff --git a/src/settings/rageshake.ts b/src/settings/rageshake.ts index 174493cb..cb668c91 100644 --- a/src/settings/rageshake.ts +++ b/src/settings/rageshake.ts @@ -50,6 +50,9 @@ const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB // we can batch the writes a little. const MAX_FLUSH_INTERVAL_MS = 2 * 1000; +// only descend this far into nested object trees +const DEPTH_LIMIT = 3; + enum ConsoleLoggerEvent { Log = "log", } @@ -67,7 +70,7 @@ class ConsoleLogger extends EventEmitter { public log = ( level: LogLevel, - ...args: (Error | DOMException | object | string)[] + ...args: (Error | DOMException | object | string | undefined)[] ): void => { // We don't know what locale the user may be running so use ISO strings const ts = new Date().toISOString(); @@ -548,14 +551,30 @@ type StringifyReplacer = ( // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#circular_references // Injects `<$ cycle-trimmed $>` wherever it cuts a cyclical object relationship -const getCircularReplacer = (): StringifyReplacer => { +const getCircularReplacer = function (): StringifyReplacer { const seen = new WeakSet(); + const depthMap = new WeakMap(); return (key: string, value: unknown): unknown => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return "<$ cycle-trimmed $>"; } seen.add(value); + + let depth = 0; + if (key) { + depth = depthMap.get(value) ?? 0; + } + + // 'this' is supposed to be the object the value was foudn in, according to + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify + // but that doesn't seem to be the case. Instead, we do a pre-pass on the children here to + // remember what depth we saw them at. + for (const v of Object.values(value)) { + if (typeof v === "object") depthMap.set(v, depth + 1); + } + + if (depth > DEPTH_LIMIT) return "<$ object-pruned $>"; } return value; }; From 2cfa007d4c27baebc16d9bf7faf3839302f72f6f Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 26 Sep 2023 17:31:00 +0100 Subject: [PATCH 2/3] Typo Co-authored-by: Robin --- src/settings/rageshake.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/rageshake.ts b/src/settings/rageshake.ts index cb668c91..d3aaf1dc 100644 --- a/src/settings/rageshake.ts +++ b/src/settings/rageshake.ts @@ -566,7 +566,7 @@ const getCircularReplacer = function (): StringifyReplacer { depth = depthMap.get(value) ?? 0; } - // 'this' is supposed to be the object the value was foudn in, according to + // 'this' is supposed to be the object the value was found in, according to // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify // but that doesn't seem to be the case. Instead, we do a pre-pass on the children here to // remember what depth we saw them at. From 3016866a4bc67b570e32ddd0fb4bbacac839f435 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 26 Sep 2023 18:30:39 +0100 Subject: [PATCH 3/3] Make the right function a real function, then the 'this' param works --- src/settings/rageshake.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/settings/rageshake.ts b/src/settings/rageshake.ts index d3aaf1dc..6ded0c2d 100644 --- a/src/settings/rageshake.ts +++ b/src/settings/rageshake.ts @@ -551,10 +551,10 @@ type StringifyReplacer = ( // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#circular_references // Injects `<$ cycle-trimmed $>` wherever it cuts a cyclical object relationship -const getCircularReplacer = function (): StringifyReplacer { +const getCircularReplacer = (): StringifyReplacer => { const seen = new WeakSet(); const depthMap = new WeakMap(); - return (key: string, value: unknown): unknown => { + return function (this: unknown, key: string, value: unknown): unknown { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return "<$ cycle-trimmed $>"; @@ -562,17 +562,10 @@ const getCircularReplacer = function (): StringifyReplacer { seen.add(value); let depth = 0; - if (key) { - depth = depthMap.get(value) ?? 0; - } - - // 'this' is supposed to be the object the value was found in, according to - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify - // but that doesn't seem to be the case. Instead, we do a pre-pass on the children here to - // remember what depth we saw them at. - for (const v of Object.values(value)) { - if (typeof v === "object") depthMap.set(v, depth + 1); + if (this) { + depth = depthMap.get(this) ?? 0; } + depthMap.set(value, depth + 1); if (depth > DEPTH_LIMIT) return "<$ object-pruned $>"; }