feat: make debug logs controllable via environment variables

Author: 1egoman

components/session-view.tsx

@@ -14,7 +14,7 @@ import { ChatEntry } from '@/components/livekit/chat/chat-entry';
 import { ChatMessageView } from '@/components/livekit/chat/chat-message-view';
 import { MediaTiles } from '@/components/livekit/media-tiles';
 import useChatAndTranscription from '@/hooks/useChatAndTranscription';
-// import { useDebugMode } from '@/hooks/useDebug';
+import { useDebugMode } from '@/hooks/useDebug';
 import type { AppConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
@@ -39,8 +39,9 @@ export const SessionView = ({
   const { messages, send } = useChatAndTranscription();
   const room = useRoomContext();
 
-  // Uncomment the below to see verbose logs showing the underlying connection lifecycle
-  // useDebugMode();
+  useDebugMode({
+    enabled: process.env.NODE_END !== 'production',
+  });
 
   async function handleSendMessage(message: string) {
     await send(message);

hooks/useDebug.ts

@@ -2,10 +2,17 @@ import * as React from 'react';
 import { LogLevel, setLogLevel } from 'livekit-client';
 import { useRoomContext } from '@livekit/components-react';
 
-export const useDebugMode = ({ logLevel }: { logLevel?: LogLevel } = {}) => {
+export const useDebugMode = (options: { logLevel?: LogLevel; enabled?: boolean } = {}) => {
   const room = useRoomContext();
+  const logLevel = options.logLevel ?? 'debug';
+  const enabled = options.enabled ?? true;
 
   React.useEffect(() => {
+    if (!enabled) {
+      setLogLevel('silent');
+      return;
+    }
+
     setLogLevel(logLevel ?? 'debug');
 
     // @ts-expect-error
@@ -14,6 +21,7 @@ export const useDebugMode = ({ logLevel }: { logLevel?: LogLevel } = {}) => {
     return () => {
       // @ts-expect-error
       window.__lk_room = undefined;
+      setLogLevel('silent');
     };
-  }, [room, logLevel]);
+  }, [room, enabled, logLevel]);
 };