Skip to content

Commit

Permalink
feat: switch playback to our own rrweb (PostHog#28148)
Browse files Browse the repository at this point in the history 
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@pauldambra @github-actions
pauldambra and github-actions[bot] authored Feb 3, 2025
1 parent 436a421 commit 5a2d379
Show file tree
Hide file tree
Showing 26 changed files with 355 additions and 97 deletions.
6 changes: 6 additions & 0 deletions cypress.e2e.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@ export default defineConfig({
webpackOptions: createEntry('cypress'),
watchOptions: {},
}
options.webpackOptions.module.rules.push({
test: /\.m?js$/,
resolve: {
fullySpecified: false,
},
} as any)

// @ts-expect-error -- ignore errors in options type
on('file:preprocessor', webpackPreprocessor(options))
Expand Down
4 changes: 1 addition & 3 deletions cypress/support/e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ const E2E_TESTING = Cypress.env('E2E_TESTING')
// From: https://github.com/cypress-io/cypress/issues/300#issuecomment-688915086
Cypress.on('window:before:load', (win) => {
cy.spy(win.console, 'error')
cy.spy(win.console, 'warn')

win._cypress_posthog_captures = []
cy.spy(win.console, 'warn')(win as any)._cypress_posthog_captures = []
})

Cypress.on('window:load', (win) => {
Expand Down
2 changes: 1 addition & 1 deletion ee/frontend/mobile-replay/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'
import { captureException, captureMessage } from '@sentry/react'
import Ajv, { ErrorObject } from 'ajv'

Expand Down
2 changes: 1 addition & 1 deletion ee/frontend/mobile-replay/mobile.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// copied from rrweb-snapshot, not included in rrweb types
import { customEvent, EventType, IncrementalSource, removedNodeMutation } from '@rrweb/types'
import { customEvent, EventType, IncrementalSource, removedNodeMutation } from '@posthog/rrweb-types'

export enum NodeType {
Document = 0,
Expand Down
234 changes: 232 additions & 2 deletions ee/frontend/mobile-replay/schema/web/rr-web-schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@
"required": ["top", "left"],
"type": "object"
},
"node": {}
"node": {
"$ref": "#/definitions/serializedNodeWithId"
}
},
"required": ["node", "initialOffset"],
"type": "object"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -339,7 +365,9 @@
"nextId": {
"type": ["number", "null"]
},
"node": {},
"node": {
"$ref": "#/definitions/serializedNodeWithId"
},
"parentId": {
"type": "number"
},
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion ee/frontend/mobile-replay/transform.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import posthogEE from '@posthog/ee/exports'
import { EventType } from '@rrweb/types'
import { EventType } from '@posthog/rrweb-types'
import { ifEeDescribe } from 'lib/ee.test'

import { PostHogEE } from '../../../frontend/@posthog/ee/types'
Expand Down
2 changes: 1 addition & 1 deletion ee/frontend/mobile-replay/transformer/transformers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
metaEvent,
mutationData,
removedNodeMutation,
} from '@rrweb/types'
} from '@posthog/rrweb-types'
import { captureMessage } from '@sentry/react'
import { isObject } from 'lib/utils'
import { PLACEHOLDER_SVG_DATA_IMAGE_URL } from 'scenes/session-recordings/player/rrweb'
Expand Down
2 changes: 1 addition & 1 deletion frontend/@posthog/ee/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// NOTE: All exported items from the EE module _must_ be optionally defined to ensure we work well with FOSS

import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'

export type PostHogEE = {
enabled: boolean
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'
import { deduplicateSnapshots } from 'scenes/session-recordings/player/sessionRecordingDataLogic'

import { RecordingSnapshot } from '~/types'
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/apm/performance-event-utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'
import { getSeriesBackgroundColor, getSeriesColor } from 'lib/colors'
import { humanizeBytes } from 'lib/utils'
import { CapturedNetworkRequest } from 'posthog-js'
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/file-playback/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'

import { PersonType, RecordingSnapshot, SessionRecordingType } from '~/types'

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/player/PlayerFrame.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import './PlayerFrame.scss'

import { Handler, viewportResizeDimension } from '@posthog/rrweb-types'
import useSize from '@react-hook/size'
import { Handler, viewportResizeDimension } from '@rrweb/types'
import { useActions, useValues } from 'kea'
import { useEffect, useRef } from 'react'
import { sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/player/eventIndex.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'

interface Metadata {
playerTime: number
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { customEvent, EventType, eventWithTime, fullSnapshotEvent, pluginEvent } from '@rrweb/types'
import { customEvent, EventType, eventWithTime, fullSnapshotEvent, pluginEvent } from '@posthog/rrweb-types'
import FuseClass from 'fuse.js'
import { actions, connect, events, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IconCursorClick, IconKeyboard, IconWarning } from '@posthog/icons'
import { eventWithTime } from '@rrweb/types'
import { eventWithTime } from '@posthog/rrweb-types'
import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { canvasMutation, Replayer } from '@posthog/rrweb'
import { ReplayPlugin } from '@posthog/rrweb'
import {
CanvasArg,
canvasMutationData,
canvasMutationParam,
EventType,
eventWithTime,
IncrementalSource,
} from '@rrweb/types'
} from '@posthog/rrweb-types'
import { captureException } from '@sentry/react'
import { debounce } from 'lib/utils'
import { canvasMutation, Replayer } from 'rrweb'
import { ReplayPlugin } from 'rrweb/typings/types'

import { deserializeCanvasArg } from './deserialize-canvas-args'

Expand Down
Loading

0 comments on commit 5a2d379

Please sign in to comment.