feat: update player to rrweb 18

ee/frontend/mobile-replay/schema/web/rr-web-schema.json

@@ -54,7 +54,9 @@
                             "required": ["top", "left"],
                             "type": "object"
                         },
-                        "node": {}
+                        "node": {
+                            "$ref": "#/definitions/serializedNodeWithId"
+                        }
                     },
                     "required": ["node", "initialOffset"],
                     "type": "object"
@@ -310,6 +312,30 @@
             "enum": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
             "type": "number"
         },
+        "NodeType.CDATA": {
+            "const": 4,
+            "type": "number"
+        },
+        "NodeType.Comment": {
+            "const": 5,
+            "type": "number"
+        },
+        "NodeType.Document": {
+            "const": 0,
+            "type": "number"
+        },
+        "NodeType.DocumentType": {
+            "const": 1,
+            "type": "number"
+        },
+        "NodeType.Element": {
+            "const": 2,
+            "type": "number"
+        },
+        "NodeType.Text": {
+            "const": 3,
+            "type": "number"
+        },
         "PointerTypes": {
             "enum": [0, 1, 2],
             "type": "number"
@@ -339,7 +365,9 @@
                 "nextId": {
                     "type": ["number", "null"]
                 },
-                "node": {},
+                "node": {
+                    "$ref": "#/definitions/serializedNodeWithId"
+                },
                 "parentId": {
                     "type": "number"
                 },
@@ -414,6 +442,17 @@
             "required": ["id", "attributes"],
             "type": "object"
         },
+        "attributes": {
+            "additionalProperties": {
+                "type": ["string", "number", "boolean", "null"]
+            },
+            "properties": {
+                "_cssText": {
+                    "type": "string"
+                }
+            },
+            "type": "object"
+        },
         "canvasMutationCommand": {
             "additionalProperties": false,
             "properties": {
@@ -785,6 +824,197 @@
             "required": ["ranges", "source"],
             "type": "object"
         },
+        "serializedNodeWithId": {
+            "anyOf": [
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "childNodes": {
+                            "items": {
+                                "$ref": "#/definitions/serializedNodeWithId"
+                            },
+                            "type": "array"
+                        },
+                        "compatMode": {
+                            "type": "string"
+                        },
+                        "id": {
+                            "type": "number"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.Document"
+                        }
+                    },
+                    "required": ["childNodes", "id", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "id": {
+                            "type": "number"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "name": {
+                            "type": "string"
+                        },
+                        "publicId": {
+                            "type": "string"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "systemId": {
+                            "type": "string"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.DocumentType"
+                        }
+                    },
+                    "required": ["id", "name", "publicId", "systemId", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "attributes": {
+                            "$ref": "#/definitions/attributes"
+                        },
+                        "childNodes": {
+                            "items": {
+                                "$ref": "#/definitions/serializedNodeWithId"
+                            },
+                            "type": "array"
+                        },
+                        "id": {
+                            "type": "number"
+                        },
+                        "isCustom": {
+                            "const": true,
+                            "type": "boolean"
+                        },
+                        "isSVG": {
+                            "const": true,
+                            "type": "boolean"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "needBlock": {
+                            "type": "boolean"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "tagName": {
+                            "type": "string"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.Element"
+                        }
+                    },
+                    "required": ["attributes", "childNodes", "id", "tagName", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "id": {
+                            "type": "number"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "isStyle": {
+                            "const": true,
+                            "type": "boolean"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "textContent": {
+                            "type": "string"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.Text"
+                        }
+                    },
+                    "required": ["id", "textContent", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "id": {
+                            "type": "number"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "textContent": {
+                            "const": "",
+                            "type": "string"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.CDATA"
+                        }
+                    },
+                    "required": ["id", "textContent", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "id": {
+                            "type": "number"
+                        },
+                        "isShadow": {
+                            "type": "boolean"
+                        },
+                        "isShadowHost": {
+                            "type": "boolean"
+                        },
+                        "rootId": {
+                            "type": "number"
+                        },
+                        "textContent": {
+                            "type": "string"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/NodeType.Comment"
+                        }
+                    },
+                    "required": ["id", "textContent", "type"],
+                    "type": "object"
+                }
+            ]
+        },
         "styleDeclarationData": {
             "additionalProperties": false,
             "properties": {

frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts

@@ -8,8 +8,7 @@ import {
 } from '@rrweb/types'
 import { captureException } from '@sentry/react'
 import { debounce } from 'lib/utils'
-import { canvasMutation, Replayer } from 'rrweb'
-import { ReplayPlugin } from 'rrweb/typings/types'
+import { canvasMutation, Replayer, ReplayPlugin } from 'rrweb'
 
 import { deserializeCanvasArg } from './deserialize-canvas-args'
 

frontend/src/scenes/session-recordings/player/rrweb/index.ts

@@ -1,6 +1,6 @@
 import { EventType, eventWithTime, IncrementalSource } from '@rrweb/types'
 import Hls from 'hls.js'
-import { playerConfig, ReplayPlugin } from 'rrweb/typings/types'
+import { playerConfig, ReplayPlugin } from 'rrweb'
 
 export const PLACEHOLDER_SVG_DATA_IMAGE_URL =
     'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");'

frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts

@@ -25,8 +25,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { wrapConsole } from 'lib/utils/wrapConsole'
 import posthog from 'posthog-js'
 import { RefObject } from 'react'
-import { Replayer } from 'rrweb'
-import { playerConfig, ReplayPlugin } from 'rrweb/typings/types'
+import { playerConfig, Replayer, ReplayPlugin } from 'rrweb'
 import { openBillingPopupModal } from 'scenes/billing/BillingPopup'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import {

frontend/src/types.ts

@@ -1,6 +1,5 @@
 import { LemonInputProps, LemonTableColumns } from '@posthog/lemon-ui'
 import { PluginConfigSchema } from '@posthog/plugin-scaffold'
-import { LogLevel } from '@rrweb/rrweb-plugin-console-record'
 import { eventWithTime } from '@rrweb/types'
 import { ChartDataset, ChartType, InteractionItem } from 'chart.js'
 import { LogicWrapper } from 'kea'
@@ -891,6 +890,34 @@ export type AnyFilterLike = AnyPropertyFilter | PropertyGroupFilter | PropertyGr
 
 export type SessionRecordingId = SessionRecordingType['id']
 
+/* copied from rrweb console record
+https://github.com/rrweb-io/rrweb/blob/dc20cd45cc63058325784444af6bd32ed2cace48/packages/plugins/rrweb-plugin-console-record/src/index.ts#L62C1-L86C37 %/
+ */
+type Logger = {
+    assert?: typeof console.assert
+    clear?: typeof console.clear
+    count?: typeof console.count
+    countReset?: typeof console.countReset
+    debug?: typeof console.debug
+    dir?: typeof console.dir
+    dirxml?: typeof console.dirxml
+    error?: typeof console.error
+    group?: typeof console.group
+    groupCollapsed?: typeof console.groupCollapsed
+    groupEnd?: () => void
+    info?: typeof console.info
+    log?: typeof console.log
+    table?: typeof console.table
+    time?: typeof console.time
+    timeEnd?: typeof console.timeEnd
+    timeLog?: typeof console.timeLog
+    trace?: typeof console.trace
+    warn?: typeof console.warn
+}
+
+type LogLevel = keyof Logger
+
+/* end of copied section */
 export interface RRWebRecordingConsoleLogPayload {
     level: LogLevel
     payload: (string | null)[]

package.json

@@ -81,8 +81,7 @@
         "@posthog/plugin-scaffold": "^1.4.4",
         "@radix-ui/react-accordion": "^1.2.2",
         "@react-hook/size": "^2.1.2",
-        "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.18",
-        "@rrweb/types": "2.0.0-alpha.13",
+        "@rrweb/types": "2.0.0-alpha.18",
         "@sentry/react": "7.112.1",
         "@stripe/react-stripe-js": "^2.8.0",
         "@stripe/stripe-js": "^4.5.0",
@@ -190,7 +189,7 @@
         "react-transition-group": "^4.4.5",
         "react-virtualized": "^9.22.5",
         "resize-observer-polyfill": "^1.5.1",
-        "rrweb": "2.0.0-alpha.13",
+        "rrweb": "2.0.0-alpha.18",
         "sass": "^1.26.2",
         "tailwind-merge": "^2.2.2",
         "tailwindcss": "3.4.1",
@@ -339,9 +338,9 @@
             "typescript": "~4.9.5"
         },
         "patchedDependencies": {
-            "rrweb@2.0.0-alpha.13": "patches/rrweb@2.0.0-alpha.13.patch",
             "heatmap.js@2.0.5": "patches/heatmap.js@2.0.5.patch",
-            "dayjs@1.11.11": "patches/dayjs@1.11.11.patch"
+            "dayjs@1.11.11": "patches/dayjs@1.11.11.patch",
+            "rrweb@2.0.0-alpha.18": "patches/rrweb@2.0.0-alpha.18.patch"
         }
     },
     "lint-staged": {