[REPLAY-149] implement ViewEnd record

LICENSE-3rdparty.csv

@@ -1,13 +1,14 @@
 Component,Origin,License,Copyright
 require,tslib,Apache-2.0,Copyright Microsoft Corporation
-file,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin 
+file,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
 file,rrweb,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
 file,rrweb-snapshot,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/graphs/contributors) and SmartX Inc.
 file,tracekit,MIT,Copyright 2013 Onur Can Cakmak and all TraceKit contributors
 dev,@types/connect-busboy,MIT,Copyright Microsoft Corporation
 dev,@types/cors,MIT,Copyright Microsoft Corporation
 dev,@types/express,MIT,Copyright Microsoft Corporation
 dev,@types/jasmine,MIT,Copyright Microsoft Corporation
+dev,@types/pako,MIT,Copyright Microsoft Corporation
 dev,@types/sinon,MIT,Copyright Microsoft Corporation
 dev,@typescript-eslint/eslint-plugin,MIT,Copyright JS Foundation and other contributors
 dev,@typescript-eslint/parser,MIT,Copyright JS Foundation and other contributors
@@ -47,6 +48,7 @@ dev,karma-spec-reporter,MIT,Copyright 2015 Michael Lex
 dev,karma-webpack,MIT,Copyright JS Foundation and other contributors
 dev,lerna,MIT,Copyright 2015-present Lerna Contributors
 dev,npm-run-all,MIT,Copyright 2015 Toru Nagashima
+dev,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
 dev,prettier,MIT,Copyright James Long and contributors
 dev,replace-in-file,MIT,Copyright 2015-2019 Adam Reis
 dev,sinon,BSD-3-Clause,Copyright 2010-2017 Christian Johansen

packages/rum-core/src/domain/lifeCycle.ts

@@ -13,6 +13,7 @@ export enum LifeCycleEventType {
   AUTO_ACTION_DISCARDED,
   VIEW_CREATED,
   VIEW_UPDATED,
+  VIEW_ENDED,
   REQUEST_STARTED,
   REQUEST_COMPLETED,
   SESSION_RENEWED,
@@ -42,6 +43,7 @@ export class LifeCycle {
       | LifeCycleEventType.DOM_MUTATED
       | LifeCycleEventType.BEFORE_UNLOAD
       | LifeCycleEventType.AUTO_ACTION_DISCARDED
+      | LifeCycleEventType.VIEW_ENDED
   ): void
   notify(
     eventType: LifeCycleEventType.RAW_RUM_EVENT_COLLECTED,
@@ -81,7 +83,8 @@ export class LifeCycle {
       | LifeCycleEventType.SESSION_RENEWED
       | LifeCycleEventType.DOM_MUTATED
       | LifeCycleEventType.BEFORE_UNLOAD
-      | LifeCycleEventType.AUTO_ACTION_DISCARDED,
+      | LifeCycleEventType.AUTO_ACTION_DISCARDED
+      | LifeCycleEventType.VIEW_ENDED,
     callback: () => void
   ): Subscription
   subscribe(

packages/rum-core/src/domain/rumEventsCollection/view/trackViews.ts

@@ -186,6 +186,7 @@ function newView(
       stopEventCountsTracking()
       stopActivityLoadingTimeTracking()
       stopCLSTracking()
+      lifeCycle.notify(LifeCycleEventType.VIEW_ENDED)
     },
     isDifferentView(otherLocation: Location) {
       return (

packages/rum-recorder/package.json

@@ -20,5 +20,9 @@
     "type": "git",
     "url": "https://github.com/DataDog/browser-sdk.git",
     "directory": "packages/rum-recorder"
+  },
+  "devDependencies": {
+    "@types/pako": "1.0.1",
+    "pako": "2.0.3"
   }
 }

packages/rum-recorder/src/boot/recorder.spec.ts

@@ -1,15 +1,17 @@
 import { createNewEvent, HttpRequest, isIE } from '@datadog/browser-core'
 import { LifeCycle, LifeCycleEventType } from '@datadog/browser-rum-core'
+import { inflate } from 'pako'
 
 import { setup, TestSetupBuilder } from '../../../rum-core/test/specHelper'
 import { collectAsyncCalls } from '../../test/utils'
 
-import { FocusRecord, RawRecord } from '../types'
+import { FocusRecord, RawRecord, Segment, RecordType } from '../types'
 import { startRecording, trackFocusRecords } from './recorder'
 
 describe('startRecording', () => {
   let setupBuilder: TestSetupBuilder
   let sessionId: string | undefined
+  let viewId: string
   let waitRequestSendCalls: (
     expectedCallsCount: number,
     callback: (calls: jasmine.Calls<HttpRequest['send']>) => void
@@ -21,6 +23,7 @@ describe('startRecording', () => {
       pending('IE not supported')
     }
     sessionId = 'session-id'
+    viewId = 'view-id'
     setupBuilder = setup()
       .withParentContexts({
         findView() {
@@ -29,7 +32,7 @@ describe('startRecording', () => {
               id: sessionId,
             },
             view: {
-              id: 'view-id',
+              id: viewId,
               referrer: '',
               url: 'http://example.org',
             },
@@ -152,6 +155,23 @@ describe('startRecording', () => {
       expectNoExtraRequestSendCalls(done)
     })
   })
+
+  it('adds a ViewEnd snapshot when the view ends', (done) => {
+    const { lifeCycle } = setupBuilder.build()
+
+    lifeCycle.notify(LifeCycleEventType.VIEW_ENDED)
+    viewId = 'view-id-2'
+    lifeCycle.notify(LifeCycleEventType.VIEW_CREATED, {} as any)
+    flushSegment(lifeCycle)
+
+    waitRequestSendCalls(2, (calls) => {
+      expect(getRequestData(calls.first())['view.id']).toBe('view-id')
+      readRequestSegment(calls.first(), (segment) => {
+        expect(segment.records[segment.records.length - 1].type).toBe(RecordType.ViewEnd)
+        expectNoExtraRequestSendCalls(done)
+      })
+    })
+  })
 })
 
 describe('trackFocusRecords', () => {
@@ -213,15 +233,30 @@ function flushSegment(lifeCycle: LifeCycle) {
 }
 
 function getRequestData(call: jasmine.CallInfo<HttpRequest['send']>) {
-  const data = call.args[0]
-  expect(data).toEqual(jasmine.any(FormData))
   const result: { [key: string]: unknown } = {}
-  ;(data as FormData).forEach((value, key) => {
+  getRequestFormData(call).forEach((value, key) => {
     result[key] = value
   })
   return result
 }
 
+function readRequestSegment(call: jasmine.CallInfo<HttpRequest['send']>, callback: (segment: Segment) => void) {
+  const encodedSegment = getRequestFormData(call).get('segment')
+  expect(encodedSegment).toBeInstanceOf(Blob)
+  const reader = new FileReader()
+  reader.addEventListener('loadend', () => {
+    const textDecoder = new TextDecoder()
+    callback(JSON.parse(textDecoder.decode(inflate(reader.result as Uint8Array))))
+  })
+  reader.readAsArrayBuffer(encodedSegment as Blob)
+}
+
+function getRequestFormData(call: jasmine.CallInfo<HttpRequest['send']>) {
+  const data = call.args[0]
+  expect(data).toEqual(jasmine.any(FormData))
+  return data as FormData
+}
+
 function createRandomString(minLength: number) {
   let result = ''
   while (result.length < minLength) {

packages/rum-recorder/src/boot/recorder.ts

@@ -32,6 +32,7 @@ export function startRecording(
   lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, takeFullSnapshot)
   lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, takeFullSnapshot)
   const { stop: stopTrackingFocusRecords } = trackFocusRecords(lifeCycle, addRawRecord)
+  trackViewEndRecord(lifeCycle, (record) => addRawRecord(record))
 
   return {
     stop() {
@@ -55,3 +56,11 @@ export function trackFocusRecords(lifeCycle: LifeCycle, addRawRecord: (record: R
   lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, addFocusRecord)
   return addEventListeners(window, [DOM_EVENT.FOCUS, DOM_EVENT.BLUR], addFocusRecord)
 }
+
+export function trackViewEndRecord(lifeCycle: LifeCycle, addRawRecord: (record: RawRecord) => void) {
+  lifeCycle.subscribe(LifeCycleEventType.VIEW_ENDED, () => {
+    addRawRecord({
+      type: RecordType.ViewEnd,
+    })
+  })
+}

packages/rum-recorder/src/types.ts

@@ -38,6 +38,7 @@ export type RawRecord =
   | MetaRecord
   | CustomRecord
   | FocusRecord
+  | ViewEndRecord
 
 export type Record = RawRecord & {
   timestamp: number
@@ -52,6 +53,7 @@ export enum RecordType {
   Meta,
   Custom,
   Focus,
+  ViewEnd,
 }
 
 export interface DomContentLoadedRecord {
@@ -103,3 +105,7 @@ export interface FocusRecord {
     has_focus: boolean
   }
 }
+
+export interface ViewEndRecord {
+  type: RecordType.ViewEnd
+}

webpack.base.js

@@ -47,6 +47,10 @@ module.exports = ({ entry, mode, filename, datacenter }) => ({
   resolve: {
     extensions: ['.ts', '.js'],
     plugins: [new TsconfigPathsPlugin({ configFile: tsconfigPath })],
+    alias: {
+      // The default "pako.esm.js" build is not transpiled to es5
+      pako: 'pako/dist/pako.es5.js',
+    },
   },
 
   plugins: [

yarn.lock

@@ -1303,6 +1303,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/pako@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.1.tgz#33b237f3c9aff44d0f82fe63acffa4a365ef4a61"
+  integrity sha512-GdZbRSJ3Cv5fiwT6I0SQ3ckeN2PWNqxd26W9Z2fCK1tGrrasGy4puvNFtnddqH9UJFMQYXxEuuB7B8UK+LLwSg==
+
 "@types/qs@*":
   version "6.9.5"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
@@ -7978,6 +7983,11 @@ p-waterfall@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
+pako@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
+  integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+
 pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"