[REPLAY] Add public function to get the link to current Replay

packages/rum-core/src/boot/rumPublicApi.ts

@@ -51,6 +51,11 @@ export interface RecorderApi {
   ) => void
   isRecording: () => boolean
   getReplayStats: (viewId: string) => ReplayStats | undefined
+  getSessionReplayLink: (
+    configuration: RumConfiguration,
+    sessionManager: RumSessionManager,
+    viewContexts: ViewContexts
+  ) => string | undefined
 }
 interface RumPublicApiOptions {
   ignoreInitIfSyntheticsWillInjectRum?: boolean
@@ -69,6 +74,7 @@ export function makeRumPublicApi(
   let getInternalContextStrategy: StartRumResult['getInternalContext'] = () => undefined
   let getInitConfigurationStrategy = (): InitConfiguration | undefined => undefined
   let stopSessionStrategy: () => void = noop
+  let getSessionReplayLinkStrategy: () => string | undefined = () => undefined
 
   let bufferApiCalls = new BoundedBuffer()
   let addTimingStrategy: StartRumResult['addTiming'] = (name, time = timeStampNow()) => {
@@ -152,7 +158,8 @@ export function makeRumPublicApi(
       userContextManager,
       initialViewOptions
     )
-
+    getSessionReplayLinkStrategy = () =>
+      recorderApi.getSessionReplayLink(configuration, startRumResults.session, startRumResults.viewContexts)
     ;({
       startView: startViewStrategy,
       addAction: addActionStrategy,
@@ -273,6 +280,7 @@ export function makeRumPublicApi(
         isExperimentalFeatureEnabled(ExperimentalFeature.SANITIZE_INPUTS) ? sanitize(value) : value
       )
     }),
+    getSessionReplayLink: monitor(() => getSessionReplayLinkStrategy()),
   })
 
   return rumPublicApi

packages/rum-core/src/domain/assembly.spec.ts

@@ -1,4 +1,4 @@
-import type { RelativeTime } from '@datadog/browser-core'
+import type { ClocksState, RelativeTime } from '@datadog/browser-core'
 import { ErrorSource, ONE_MINUTE, display } from '@datadog/browser-core'
 import {
   initEventBridgeStub,
@@ -37,6 +37,7 @@ describe('rum assembly', () => {
     findView = () => ({
       id: '7890',
       name: 'view name',
+      startClocks: {} as ClocksState,
     })
     reportErrorSpy = jasmine.createSpy('reportError')
     commonContext = {
@@ -484,7 +485,7 @@ describe('rum assembly', () => {
 
     it('should be overridden by the view context', () => {
       const { lifeCycle } = setupBuilder.build()
-      findView = () => ({ service: 'new service', version: 'new version', id: '1234' })
+      findView = () => ({ service: 'new service', version: 'new version', id: '1234', startClocks: {} as ClocksState })
       notifyRawRumEvent(lifeCycle, {
         rawRumEvent: createRawRumEvent(RumEventType.ACTION),
       })

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

@@ -40,6 +40,7 @@ export interface RumInitConfiguration extends InitConfiguration {
 
   // replay options
   defaultPrivacyLevel?: DefaultPrivacyLevel | undefined
+  subdomain?: string
   /**
    * @deprecated use sessionReplaySampleRate instead
    */
@@ -80,6 +81,7 @@ export interface RumConfiguration extends Configuration {
   trackResources: boolean | undefined
   trackLongTasks: boolean | undefined
   version?: string
+  subdomain?: string
   customerDataTelemetrySampleRate: number
 }
 
@@ -150,6 +152,7 @@ export function validateAndBuildRumConfiguration(
       trackViewsManually: !!initConfiguration.trackViewsManually,
       trackResources: initConfiguration.trackResources,
       trackLongTasks: initConfiguration.trackLongTasks,
+      subdomain: initConfiguration.subdomain,
       defaultPrivacyLevel: objectHasValue(DefaultPrivacyLevel, initConfiguration.defaultPrivacyLevel)
         ? initConfiguration.defaultPrivacyLevel
         : DefaultPrivacyLevel.MASK_USER_INPUT,

packages/rum-core/src/domain/contexts/viewContexts.ts

@@ -1,4 +1,4 @@
-import type { RelativeTime } from '@datadog/browser-core'
+import type { ClocksState, RelativeTime } from '@datadog/browser-core'
 import { SESSION_TIME_OUT_DELAY, ContextHistory } from '@datadog/browser-core'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
@@ -11,6 +11,7 @@ export interface ViewContext {
   version?: string
   id: string
   name?: string
+  startClocks: ClocksState
 }
 
 export interface ViewContexts {
@@ -39,6 +40,7 @@ export function startViewContexts(lifeCycle: LifeCycle): ViewContexts {
       version: view.version,
       id: view.id,
       name: view.name,
+      startClocks: view.startClocks,
     }
   }
 

packages/rum-core/src/domain/getDatadogOrigin.spec.ts

@@ -0,0 +1,29 @@
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+import { getDatadogOrigin } from './getDatadogOrigin'
+
+const DEFAULT_CONFIGURATION = {
+  site: 'datad0g.com',
+} as RumConfiguration
+
+describe('getDatadogOrigin', () => {
+  const parameters: Array<[string, string | undefined, string]> = [
+    ['datadoghq.com', undefined, 'app.datadoghq.com'],
+    ['datadoghq.com', 'toto', 'toto.datadoghq.com'],
+    ['datad0g.com', undefined, 'dd.datad0g.com'],
+    ['datad0g.com', 'toto', 'toto.datad0g.com'],
+    ['us3.datadoghq.com', undefined, 'us3.datadoghq.com'],
+    ['us3.datadoghq.com', 'toto', 'toto.us3.datadoghq.com'],
+    ['us5.datadoghq.com', undefined, 'us5.datadoghq.com'],
+    ['us5.datadoghq.com', 'toto', 'toto.us5.datadoghq.com'],
+  ]
+
+  parameters.forEach(([site, subdomain, host]) => {
+    it(`should return ${host} for subdomain "${
+      subdomain ?? 'undefined'
+    }" on "${site}" with query params if view is found`, () => {
+      const link = getDatadogOrigin({ ...DEFAULT_CONFIGURATION, site, subdomain })
+
+      expect(link).toBe(`https://${host}`)
+    })
+  })
+})

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

@@ -0,0 +1,20 @@
+import type { RumConfiguration } from './configuration'
+
+export function getDatadogOrigin(rumConfiguration: RumConfiguration) {
+  const site = rumConfiguration.site
+  const subdomain = rumConfiguration.subdomain || getDefaultSubdomain(rumConfiguration)
+  return `https://${subdomain ? `${subdomain}.` : ''}${site}`
+}
+
+function getDefaultSubdomain(configuration: RumConfiguration): string | undefined {
+  switch (configuration.site) {
+    case 'datadoghq.com':
+      return 'app'
+    case 'datadoghq.eu':
+      return 'app'
+    case 'datad0g.com':
+      return 'dd'
+    default:
+      return undefined
+  }
+}

packages/rum-core/src/index.ts

@@ -30,3 +30,4 @@ export { RumInitConfiguration, RumConfiguration } from './domain/configuration'
 export { DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from './domain/rumEventsCollection/action/getActionNameFromElement'
 export { STABLE_ATTRIBUTES } from './domain/rumEventsCollection/action/getSelectorFromElement'
 export * from './browser/htmlDomUtils'
+export { getDatadogOrigin } from './domain/getDatadogOrigin'

packages/rum-core/test/noopRecorderApi.ts

@@ -7,4 +7,5 @@ export const noopRecorderApi: RecorderApi = {
   isRecording: () => false,
   onRumStart: noop,
   getReplayStats: () => undefined,
+  getSessionReplayLink: () => undefined,
 }

packages/rum-slim/src/domain/getSessionReplayLink.spec.ts

@@ -0,0 +1,29 @@
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+import { getSessionReplayLink } from './getSessionReplayLink'
+
+const DEFAULT_CONFIGURATION = {
+  site: 'datad0g.com',
+} as RumConfiguration
+
+describe('getReplayLink (slim package)', () => {
+  const parameters: Array<[string, string | undefined, string]> = [
+    ['datadoghq.com', undefined, 'app.datadoghq.com'],
+    ['datadoghq.com', 'toto', 'toto.datadoghq.com'],
+    ['datad0g.com', undefined, 'dd.datad0g.com'],
+    ['datad0g.com', 'toto', 'toto.datad0g.com'],
+    ['us3.datadoghq.com', undefined, 'us3.datadoghq.com'],
+    ['us3.datadoghq.com', 'toto', 'toto.us3.datadoghq.com'],
+    ['us5.datadoghq.com', undefined, 'us5.datadoghq.com'],
+    ['us5.datadoghq.com', 'toto', 'toto.us5.datadoghq.com'],
+  ]
+
+  parameters.forEach(([site, subdomain, host]) => {
+    it(`should return ${host} for subdomain "${
+      subdomain ?? 'undefined'
+    }" on "${site}" with query params if view is found`, () => {
+      const link = getSessionReplayLink({ ...DEFAULT_CONFIGURATION, site, subdomain })
+
+      expect(link).toBe(`https://${host}/rum/replay/sessions/session-id?error-type=slim-package`)
+    })
+  })
+})

packages/rum-slim/src/domain/getSessionReplayLink.ts

@@ -0,0 +1,7 @@
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+import { getDatadogOrigin } from '@datadog/browser-rum-core'
+
+export function getSessionReplayLink(configuration: RumConfiguration): string | undefined {
+  const origin = getDatadogOrigin(configuration)
+  return `${origin}/rum/replay/sessions/session-id?error-type=slim-package`
+}

packages/rum-slim/src/entries/main.ts

@@ -2,6 +2,7 @@
 import { defineGlobal, getGlobalObject, noop } from '@datadog/browser-core'
 import type { RumPublicApi } from '@datadog/browser-rum-core'
 import { makeRumPublicApi, startRum } from '@datadog/browser-rum-core'
+import { getSessionReplayLink } from '../domain/getSessionReplayLink'
 
 export {
   CommonProperties,
@@ -32,6 +33,7 @@ export const datadogRum = makeRumPublicApi(startRum, {
   onRumStart: noop,
   isRecording: () => false,
   getReplayStats: () => undefined,
+  getSessionReplayLink,
 })
 
 interface BrowserWindow extends Window {

packages/rum/src/boot/isBrowserSupported.ts

@@ -0,0 +1,11 @@
+/**
+ * Test for Browser features used while recording
+ */
+export function isBrowserSupported() {
+  return (
+    // Array.from is a bit less supported by browsers than CSSSupportsRule, but has higher chances
+    // to be polyfilled. Test for both to be more confident. We could add more things if we find out
+    // this test is not sufficient.
+    typeof Array.from === 'function' && typeof CSSSupportsRule === 'function' && 'forEach' in NodeList.prototype
+  )
+}

packages/rum/src/boot/recorderApi.ts

@@ -8,9 +8,11 @@ import type {
 } from '@datadog/browser-rum-core'
 import { LifeCycleEventType } from '@datadog/browser-rum-core'
 import { getReplayStats } from '../domain/replayStats'
+import { getSessionReplayLink } from '../domain/getSessionReplayLink'
 import { startDeflateWorker } from '../domain/segmentCollection'
 
 import type { startRecording } from './startRecording'
+import { isBrowserSupported } from './isBrowserSupported'
 
 export type StartRecording = typeof startRecording
 
@@ -51,6 +53,7 @@ export function makeRecorderApi(
       getReplayStats: () => undefined,
       onRumStart: noop,
       isRecording: () => false,
+      getSessionReplayLink: () => undefined,
     }
   }
 
@@ -68,7 +71,7 @@ export function makeRecorderApi(
     start: () => startStrategy(),
     stop: () => stopStrategy(),
     getReplayStats,
-
+    getSessionReplayLink,
     onRumStart: (
       lifeCycle: LifeCycle,
       configuration: RumConfiguration,
@@ -155,15 +158,3 @@ export function makeRecorderApi(
     isRecording: () => state.status === RecorderStatus.Started,
   }
 }
-
-/**
- * Test for Browser features used while recording
- */
-function isBrowserSupported() {
-  return (
-    // Array.from is a bit less supported by browsers than CSSSupportsRule, but has higher chances
-    // to be polyfilled. Test for both to be more confident. We could add more things if we find out
-    // this test is not sufficient.
-    typeof Array.from === 'function' && typeof CSSSupportsRule === 'function' && 'forEach' in NodeList.prototype
-  )
-}

packages/rum/src/boot/startRecording.spec.ts

@@ -1,4 +1,4 @@
-import type { TimeStamp, HttpRequest } from '@datadog/browser-core'
+import type { TimeStamp, HttpRequest, ClocksState } from '@datadog/browser-core'
 import { PageExitReason, DefaultPrivacyLevel, noop, isIE, timeStampNow } from '@datadog/browser-core'
 import type { LifeCycle, ViewCreatedEvent } from '@datadog/browser-rum-core'
 import { LifeCycleEventType } from '@datadog/browser-rum-core'
@@ -43,7 +43,7 @@ describe('startRecording', () => {
       setupBuilder = setup()
         .withViewContexts({
           findView() {
-            return { id: viewId }
+            return { id: viewId, startClocks: {} as ClocksState }
           },
         })
         .withSessionManager(sessionManager)

packages/rum/src/domain/getSessionReplayLink.spec.ts

@@ -0,0 +1,83 @@
+import type { RumConfiguration, ViewContexts } from '@datadog/browser-rum-core'
+import { createRumSessionManagerMock } from '../../../rum-core/test'
+import { getSessionReplayLink } from './getSessionReplayLink'
+import { addRecord, resetReplayStats } from './replayStats'
+
+const DEFAULT_CONFIGURATION = {
+  site: 'datad0g.com',
+} as RumConfiguration
+
+describe('getReplayLink', () => {
+  afterEach(() => {
+    resetReplayStats()
+  })
+  it('should return url without query param if no view', () => {
+    const sessionManager = createRumSessionManagerMock().setId('session-id-1')
+    const viewContexts = { findView: () => undefined } as ViewContexts
+
+    const link = getSessionReplayLink(DEFAULT_CONFIGURATION, sessionManager, viewContexts)
+
+    expect(link).toBe('https://dd.datad0g.com/rum/replay/sessions/session-id-1')
+  })
+
+  const parameters: Array<[string, string | undefined, string]> = [
+    ['datadoghq.com', undefined, 'app.datadoghq.com'],
+    ['datadoghq.com', 'toto', 'toto.datadoghq.com'],
+    ['datad0g.com', undefined, 'dd.datad0g.com'],
+    ['datad0g.com', 'toto', 'toto.datad0g.com'],
+    ['us3.datadoghq.com', undefined, 'us3.datadoghq.com'],
+    ['us3.datadoghq.com', 'toto', 'toto.us3.datadoghq.com'],
+    ['us5.datadoghq.com', undefined, 'us5.datadoghq.com'],
+    ['us5.datadoghq.com', 'toto', 'toto.us5.datadoghq.com'],
+  ]
+
+  parameters.forEach(([site, subdomain, host]) => {
+    it(`should return ${host} for subdomain "${
+      subdomain ?? 'undefined'
+    }" on "${site}" with query params if view is found`, () => {
+      const sessionManager = createRumSessionManagerMock().setId('session-id-1')
+      const viewContexts = {
+        findView: () => ({
+          id: 'view-id-1',
+          startClocks: {
+            timeStamp: 123456,
+          },
+        }),
+      } as ViewContexts
+      addRecord('view-id-1')
+
+      const link = getSessionReplayLink({ ...DEFAULT_CONFIGURATION, site, subdomain }, sessionManager, viewContexts)
+
+      expect(link).toBe(`https://${host}/rum/replay/sessions/session-id-1?seed=view-id-1&from=123456`)
+    })
+  })
+
+  it('return a param if replay is sampled out', () => {
+    const sessionManager = createRumSessionManagerMock().setId('session-id-1').setPlanWithoutSessionReplay()
+    const viewContexts = {
+      findView: () => ({
+        id: 'view-id-1',
+        startClocks: {
+          timeStamp: 123456,
+        },
+      }),
+    } as ViewContexts
+
+    const link = getSessionReplayLink({ ...DEFAULT_CONFIGURATION, site: 'datadoghq.com' }, sessionManager, viewContexts)
+
+    expect(link).toBe(
+      'https://app.datadoghq.com/rum/replay/sessions/session-id-1?error-type=incorrect-session-plan&seed=view-id-1&from=123456'
+    )
+  })
+
+  it('return a param if rum is sampled out', () => {
+    const sessionManager = createRumSessionManagerMock().setNotTracked()
+    const viewContexts = {
+      findView: () => undefined,
+    } as ViewContexts
+
+    const link = getSessionReplayLink({ ...DEFAULT_CONFIGURATION, site: 'datadoghq.com' }, sessionManager, viewContexts)
+
+    expect(link).toBe('https://app.datadoghq.com/rum/replay/sessions/session-id?error-type=rum-not-tracked')
+  })
+})