pageSetups.ts

import { generateUUID, INTAKE_URL_PARAMETERS } from '@datadog/browser-core'
import type { LogsInitConfiguration } from '@datadog/browser-logs'
import type { RumInitConfiguration, RemoteConfiguration } from '@datadog/browser-rum-core'
import type { DebuggerInitConfiguration } from '@datadog/browser-debugger'
import type test from '@playwright/test'
import { isBrowserStack, isContinuousIntegration } from './environment'
import type { Servers } from './httpServers'

export interface SetupOptions {
  rum?: RumInitConfiguration
  useRumSlim: boolean
  logs?: LogsInitConfiguration
  logsInit: (initConfiguration: LogsInitConfiguration) => void
  rumInit: (initConfiguration: RumInitConfiguration) => void
  debugger?: DebuggerInitConfiguration
  remoteConfiguration?: RemoteConfiguration
  eventBridge: boolean
  head?: string
  body?: string
  baseUrlHooks: UrlHook[]
  context: {
    run_id: string
    test_name: string
  }
  testFixture: typeof test
  extension?: {
    rumConfiguration?: RumInitConfiguration
    logsConfiguration?: LogsInitConfiguration
  }
  worker?: WorkerOptions
  callerLocation?: CallerLocation
}

export interface CallerLocation {
  file: string
  line: number
  column: number
}

export interface WorkerOptions {
  importScripts?: boolean
  rumConfiguration?: RumInitConfiguration
  logsConfiguration?: LogsInitConfiguration
}

export type SetupFactory = (options: SetupOptions, servers: Servers) => string
export type UrlHook = (baseUrl: URL, servers: Servers, options: SetupOptions) => void

// By default, run tests only with the 'bundle' setup outside of the CI (to run faster on the
// developer laptop) or with Browser Stack (to limit flakiness).
export const DEFAULT_SETUPS =
  !isContinuousIntegration || isBrowserStack
    ? [{ name: 'bundle', factory: bundleSetup }]
    : [
        { name: 'async', factory: asyncSetup },
        { name: 'npm', factory: npmSetup },
        { name: 'bundle', factory: bundleSetup },
      ]

export function asyncSetup(options: SetupOptions, servers: Servers) {
  let header = options.head || ''
  let footer = ''

  if (options.eventBridge) {
    header += setupEventBridge(servers)
  }

  if (options.extension) {
    header += setupExtension(options, servers)
  }

  function formatSnippet(url: string, globalName: string) {
    return `(function(h,o,u,n,d) {
h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
d=o.createElement(u);d.async=1;d.src=n
n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
})(window,document,'script','${url}','${globalName}')`
  }

  const { logsScriptUrl, rumScriptUrl, debuggerScriptUrl } = createCrossOriginScriptUrls(servers, options)

  if (options.logs) {
    footer += html`<script>
      ${formatSnippet(logsScriptUrl, 'DD_LOGS')}
      DD_LOGS.onReady(function () {
        DD_LOGS.setGlobalContext(${JSON.stringify(options.context)})
        ;(${options.logsInit.toString()})(${formatConfiguration(options.logs, servers)})
      })
    </script>`
  }

  if (options.rum) {
    footer += html`<script type="text/javascript">
      ${formatSnippet(rumScriptUrl, 'DD_RUM')}
      DD_RUM.onReady(function () {
        DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
        ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})
      })
    </script>`
  }

  if (options.debugger) {
    footer += html`<script type="text/javascript">
      ${formatSnippet(debuggerScriptUrl, 'DD_DEBUGGER')}
      DD_DEBUGGER.onReady(function () {
        DD_DEBUGGER.init(${formatConfiguration(options.debugger, servers)})
      })
    </script>`
  }

  return basePage({
    header,
    body: options.body,
    footer,
  })
}

export function bundleSetup(options: SetupOptions, servers: Servers) {
  let header = options.head || ''

  if (options.eventBridge) {
    header += setupEventBridge(servers)
  }

  if (options.extension) {
    header += setupExtension(options, servers)
  }

  const { logsScriptUrl, rumScriptUrl, debuggerScriptUrl } = createCrossOriginScriptUrls(servers, options)

  if (options.logs) {
    header += html`<script type="text/javascript" src="${logsScriptUrl}"></script>`
    header += html`<script type="text/javascript">
      DD_LOGS.setGlobalContext(${JSON.stringify(options.context)})
      ;(${options.logsInit.toString()})(${formatConfiguration(options.logs, servers)})
    </script>`
  }

  if (options.rum) {
    header += html`<script type="text/javascript" src="${rumScriptUrl}"></script>`
    header += html`<script type="text/javascript">
      DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
      ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})
    </script>`
  }

  if (options.debugger) {
    header += html`
      <script type="text/javascript" src="${debuggerScriptUrl}"></script>
      <script type="text/javascript">
        DD_DEBUGGER.init(${formatConfiguration(options.debugger, servers)})
      </script>
    `
  }

  return basePage({
    header,
    body: options.body,
  })
}

export function npmSetup(options: SetupOptions, servers: Servers) {
  let header = options.head || ''

  if (options.eventBridge) {
    header += setupEventBridge(servers)
  }

  if (options.extension) {
    header += setupExtension(options, servers)
  }

  if (options.logs) {
    header += html`<script type="text/javascript">
      window.LOGS_INIT = () => {
        window.DD_LOGS.setGlobalContext(${JSON.stringify(options.context)})
        ;(${options.logsInit.toString()})(${formatConfiguration(options.logs, servers)})
      }
    </script>`
  }

  if (options.rum) {
    header += html`<script type="text/javascript">
      window.RUM_INIT = () => {
        window.DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
        ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})
      }
    </script>`
  }

  if (options.debugger) {
    header += html`<script type="text/javascript">
      window.DEBUGGER_INIT = () => {
        window.DD_DEBUGGER.init(${formatConfiguration(options.debugger, servers)})
      }
    </script>`
  }

  header += html`<script type="text/javascript" src="./app.js"></script>`

  return basePage({
    header,
    body: options.body,
  })
}

export function appSetup(options: SetupOptions, servers: Servers, appName: string) {
  let header = options.head || ''

  if (options.eventBridge) {
    header += setupEventBridge(servers)
  }

  if (options.extension) {
    header += setupExtension(options, servers)
  }

  if (options.rum) {
    header += html`<script type="text/javascript">
      window.RUM_CONFIGURATION = ${formatConfiguration(options.rum, servers)}
      window.RUM_CONTEXT = ${JSON.stringify(options.context)}
    </script>`
  }

  const footer = html`<script type="text/javascript" src="./${appName}.js"></script>`

  return basePage({
    header,
    body: options.body,
    footer,
  })
}

export function workerSetup(setupOptions: SetupOptions, servers: Servers) {
  const { worker, context } = setupOptions
  let setup = ''

  if (worker?.logsConfiguration) {
    setup += js`
      ${worker.importScripts ? js`importScripts('/datadog-logs.js');` : js`import '/datadog-logs.js';`}
      DD_LOGS.init(${formatConfiguration(worker.logsConfiguration, servers)})
      DD_LOGS.setGlobalContext(${JSON.stringify(context)})
    `
  }

  if (worker?.rumConfiguration) {
    setup += js`
      ${worker.importScripts ? js`importScripts('/datadog-rum.js');` : js`import '/datadog-rum.js';`}
      DD_RUM.init(${formatConfiguration(worker.rumConfiguration, servers)})
      DD_RUM.setGlobalContext(${JSON.stringify(context)})
    `
  }

  setup += js`
    self.addEventListener('message', (event) => {
      if (event.data.__type === 'evaluate') {
        new Function(event.data.code)();
      }
    });
  `

  return setup
}

export function microfrontendSetup(options: SetupOptions, servers: Servers) {
  let header = options.head || ''

  if (options.eventBridge) {
    header += setupEventBridge(servers)
  }

  if (options.extension) {
    header += setupExtension(options, servers)
  }

  const { rumScriptUrl } = createCrossOriginScriptUrls(servers, options)

  if (options.rum) {
    header += html`<script type="text/javascript" src="${rumScriptUrl}"></script>`
    header += html`<script type="text/javascript">
      DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
      ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})
    </script>`
  }

  header += html`<script type="module" src="/microfrontend/shell.js"></script>`

  return basePage({
    header,
    body: options.body,
  })
}

function basePage({ header, body, footer }: { header?: string; body?: string; footer?: string }) {
  // prettier-ignore
  // The empty favicon avoids a /favicon.ico request from the browser.
  return html`<!doctype html><html><head><link rel="icon" href="data:,"/>${header || ''}</head><body>${body || ''}</body>${footer || ''}</html>`
}

// html is a simple template string tag to allow prettier to format various setups as HTML
export function html(parts: readonly string[], ...vars: string[]) {
  return parts.reduce((full, part, index) => full + vars[index - 1] + part)
}

function js(parts: readonly string[], ...vars: string[]) {
  return parts.reduce((full, part, index) => full + vars[index - 1] + part)
}

function setupEventBridge(servers: Servers) {
  const baseHostname = new URL(servers.base.origin).hostname

  // Send EventBridge events to the intake so we can inspect them in our E2E test cases. The URL
  // needs to be similar to the normal Datadog intake (through proxy) to make the SDK completely
  // ignore them.
  const eventBridgeIntake = `${servers.intake.origin}/?${new URLSearchParams({
    ddforward: `/api/v2/rum?${INTAKE_URL_PARAMETERS.join('&')}`,
    bridge: 'true',
  }).toString()}`

  return html`<script type="text/javascript">
    window.DatadogEventBridge = {
      getCapabilities() {
        return '["records"]'
      },
      getPrivacyLevel() {
        return 'mask'
      },
      getAllowedWebViewHosts() {
        return '["${baseHostname}"]'
      },
      send(e) {
        const { eventType, event } = JSON.parse(e)
        const request = new XMLHttpRequest()
        request.open('POST', ${JSON.stringify(eventBridgeIntake)} + '&event_type=' + eventType, true)
        request.send(JSON.stringify(event))
      },
    }
  </script>`
}

function setupExtension(options: SetupOptions, servers: Servers) {
  let header = ''

  const { rumScriptUrl, logsScriptUrl } = createCrossOriginScriptUrls(servers, { ...options, useRumSlim: false })

  if (options.extension?.rumConfiguration) {
    header += html`<script type="text/javascript">
      window.RUM_BUNDLE_URL = '${rumScriptUrl}'
      window.RUM_CONTEXT = ${JSON.stringify(options.context)}
      window.EXT_RUM_CONFIGURATION = ${formatConfiguration(options.extension.rumConfiguration, servers)}
    </script>`
  }

  if (options.extension?.logsConfiguration) {
    header += html`<script type="text/javascript">
      window.LOGS_BUNDLE_URL = '${logsScriptUrl}'
      window.LOGS_CONTEXT = ${JSON.stringify(options.context)}
      window.EXT_LOGS_CONFIGURATION = ${formatConfiguration(options.extension.logsConfiguration, servers)}
    </script>`
  }

  return header
}

type JsonIncompatibleValue = ((...args: any[]) => any) | RegExp

function isJsonIncompatibleValue(value: unknown): value is JsonIncompatibleValue {
  return typeof value === 'function' || value instanceof RegExp
}

export function formatConfiguration(
  initConfiguration: LogsInitConfiguration | RumInitConfiguration | DebuggerInitConfiguration,
  servers: Servers
) {
  const jsonIncompatibles = new Map<string, JsonIncompatibleValue>()

  let result = JSON.stringify(
    {
      ...initConfiguration,
      proxy: servers.intake.origin,
      remoteConfigurationProxy: `${servers.base.origin}/config`,
    },
    (_key, value) => {
      if (isJsonIncompatibleValue(value)) {
        const id = generateUUID()
        jsonIncompatibles.set(id, value)

        return id
      }

      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
      return value
    }
  )

  result = result.replace('"LOCATION_ORIGIN"', 'location.origin')

  for (const [id, value] of jsonIncompatibles) {
    result = result.replace(`"${id}"`, String(value))
  }

  return result
}

export function createCrossOriginScriptUrls(servers: Servers, options: SetupOptions) {
  return {
    logsScriptUrl: `${servers.crossOrigin.origin}/datadog-logs.js`,
    rumScriptUrl: `${servers.crossOrigin.origin}/${options.useRumSlim ? 'datadog-rum-slim.js' : 'datadog-rum.js'}`,
    debuggerScriptUrl: `${servers.crossOrigin.origin}/datadog-debugger.js`,
  }
}