draft: track web sockets like we track fetch

playground/nextjs/package.json

@@ -21,7 +21,7 @@
         "eslint": "^8.57.1",
         "hls.js": "^1.5.15",
         "next": "14.2.20",
-        "posthog-js": "1.200.1",
+        "posthog-js": "file:.yalc/posthog-js",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "socket.io": "^4.8.1",

playground/nextjs/pages/_app.tsx

@@ -33,13 +33,6 @@ export default function App({ Component, pageProps }: AppProps) {
         }
     }, [])
 
-    useEffect(() => {
-        // make sure we initialize the WebSocket server
-        // we don't need to support IE11 here
-        // eslint-disable-next-line compat/compat
-        fetch('/api/socket')
-    }, [])
-
     const localhostDomain = process.env.NEXT_PUBLIC_CROSSDOMAIN
         ? 'https://localhost:8000'
         : process.env.NEXT_PUBLIC_POSTHOG_HOST

playground/nextjs/pages/chat.tsx

@@ -10,21 +10,28 @@ const Chat = () => {
     const [socket, setSocket] = useState<Socket<DefaultEventsMap, DefaultEventsMap> | null>(null)
 
     useEffect(() => {
+        // make sure we initialize the WebSocket server
+        // we don't need to support IE11 here
+        // eslint-disable-next-line compat/compat
+        fetch('/api/socket')
+
+        // Clean up the socket connection on unmount
+        return () => {
+            socket?.disconnect()
+        }
+    }, [])
+
+    const connect = () => {
         // Create a socket connection
         const createdSocket = io()
-
+        console.log('connecting', createdSocket)
         // Listen for incoming messages
         createdSocket.on('message', (message) => {
             setMessages((prevMessages) => [...prevMessages, message])
         })
 
         setSocket(createdSocket)
-
-        // Clean up the socket connection on unmount
-        return () => {
-            createdSocket.disconnect()
-        }
-    }, [])
+    }
 
     const sendMessage = () => {
         if (!socket) {
@@ -39,6 +46,13 @@ const Chat = () => {
 
     return (
         <div className={'w-full min-h-96 flex-col space-y-2'}>
+            <button
+                disabled={!!socket}
+                onClick={connect}
+                className={'disabled:cursor-not-allowed bg-amber-400 disabled:bg-gray-600'}
+            >
+                Connect chat
+            </button>
             <div className="flex flex-row justify-between items-center border border-gray-300 rounded p-2 space-x-2">
                 <input
                     className={'flex-1 border rounded px-2 py-1'}
@@ -47,7 +61,13 @@ const Chat = () => {
                     onChange={(e) => setCurrentMessage(e.target.value)}
                 />
 
-                <button onClick={sendMessage}>Send</button>
+                <button
+                    disabled={!socket}
+                    onClick={sendMessage}
+                    className={'disabled:cursor-not-allowed bg-amber-400 disabled:bg-gray-600'}
+                >
+                    Send
+                </button>
             </div>
 
             <div className="flex flex-col border rounded px-2 py-1">

playground/nextjs/src/posthog.ts

@@ -63,7 +63,7 @@ if (typeof window !== 'undefined') {
         person_profiles: PERSON_PROCESSING_MODE === 'never' ? 'identified_only' : PERSON_PROCESSING_MODE,
         persistence_name: `${process.env.NEXT_PUBLIC_POSTHOG_KEY}_nextjs`,
         opt_in_site_apps: true,
-        __preview_remote_config: true,
+        __preview_remote_config: false,
         ...configForConsent(),
     })
     // Help with debugging

src/entrypoints/recorder-next.ts

@@ -0,0 +1,24 @@
+import { assignableWindow } from '../utils/globals'
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record'
+import { record as rrwebRecord } from '@rrweb/record'
+import { getRecordNetworkPlugin } from '../extensions/replay/external/network-recorder.plugin'
+import { getRecordWebSocketPlugin } from '../extensions/replay/external/websocket-recorder.plugin'
+
+assignableWindow.__PosthogExtensions__ = assignableWindow.__PosthogExtensions__ || {}
+assignableWindow.__PosthogExtensions__.rrwebPlugins = {
+    getRecordConsolePlugin,
+    getRecordNetworkPlugin,
+    getRecordWebSocketPlugin,
+}
+assignableWindow.__PosthogExtensions__.rrweb = { record: rrwebRecord, version: 'v2' }
+
+// we used to put all of these items directly on window, and now we put it on __PosthogExtensions__
+// but that means that old clients which lazily load this extension are looking in the wrong place
+// yuck,
+// so we also put them directly on the window
+// when 1.161.1 is the oldest version seen in production we can remove this
+assignableWindow.rrweb = { record: rrwebRecord, version: 'v2' }
+assignableWindow.rrwebConsoleRecord = { getRecordConsolePlugin }
+assignableWindow.getRecordNetworkPlugin = getRecordNetworkPlugin
+
+export default rrwebRecord