[wip] electron investigations

.gitignore

@@ -12,6 +12,9 @@ package.tgz
 docs/
 *.tsbuildinfo
 
+# Generated WASM base64 files
+**/*.wasm.base64.ts
+
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*
 .yarn/*
@@ -20,8 +23,8 @@ docs/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-/test-results/
-/playwright-report/
+**/test-results/
+**/playwright-report/
 /blob-report/
 /playwright/.cache/
 .vscode

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 variables:
   CURRENT_STAGING: staging-47
   APP: 'browser-sdk'
-  CURRENT_CI_IMAGE: 93
+  CURRENT_CI_IMAGE: 94
   BUILD_STABLE_REGISTRY: 'registry.ddbuild.io'
   CI_IMAGE: '$BUILD_STABLE_REGISTRY/ci/$APP:$CURRENT_CI_IMAGE'
   GIT_REPOSITORY: 'git@github.com:DataDog/browser-sdk.git'

Dockerfile

@@ -65,6 +65,8 @@ RUN apt-get -y install git
 
 RUN apt-get -y install procps
 
+RUN apt-get -y install xvfb
+
 # Woke
 RUN set -o pipefail \
   && curl -sSfL https://git.io/getwoke | bash -s -- -b /usr/local/bin v0.17.1

LICENSE-3rdparty.csv

@@ -10,6 +10,10 @@ prod,@tabler/icons-react,MIT,Copyright (c) 2020-2023 Paweł Kuna
 prod,clsx,MIT,Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
 prod,react,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 prod,react-dom,MIT,Copyright (c) Facebook, Inc. and its affiliates.
+prod,@msgpack/msgpack,Apache-2.0,Copyright (c) 2010 Peter Griess
+prod,dd-trace,Apache-2.0,Copyright (c) 2018, Datadog Inc.
+prod,graphql,MIT,Copyright (c) GraphQL Contributors
+prod,@openfeature/core,Apache-2.0,Copyright OpenFeature Maintainers
 dev,typedoc,Apache-2.0,TypeStrong
 dev,@eslint/js,MIT,Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
 dev,@jsdevtools/coverage-istanbul-loader,MIT,Copyright (c) 2015 James Messinger
@@ -84,3 +88,4 @@ dev,react-refresh-typescript,MIT,Copyright (c) Piotr Monwid-Olechnowicz
 dev,webpack-dev-server,MIT,Copyright JS Foundation and other contributors
 dev,http-server,MIT,Copyright http-party contributors
 dev,react-router,MIT,Copyright (c) React Training LLC 2015-2019 Copyright (c) Remix Software Inc. 2020-2021 Copyright (c) Shopify Inc. 2022-2023
+dev,electron,MIT,Copyright (c) Electron contributors Copyright (c) 2013-2020 GitHub Inc.

developer-extension/package.json

@@ -3,8 +3,8 @@
   "version": "6.24.0",
   "private": true,
   "scripts": {
-    "build": "rm -rf dist && webpack --disable-interpret --mode production",
-    "dev": "rm -rf dist && webpack --disable-interpret --mode development && webpack serve --disable-interpret --mode development --config-name=panel --hot"
+    "build": "webpack --disable-interpret --mode production",
+    "dev": "webpack --disable-interpret --mode development && webpack serve --disable-interpret --mode development --config-name=panel --hot"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",

developer-extension/src/panel/hooks/useEvents/useEvents.ts

@@ -31,7 +31,7 @@ export function useEvents({
   }, [eventCollectionStrategy])
 
   useEffect(() => {
-    if (!preserveEvents) {
+    if (!preserveEvents && 'webNavigation' in chrome) {
       const clearCurrentEvents = (details: chrome.webNavigation.WebNavigationTransitionCallbackDetails) => {
         if (details.transitionType === 'reload' && details.tabId === chrome.devtools.inspectedWindow.tabId) {
           clearEvents()

developer-extension/webpack.config.mts

@@ -16,6 +16,7 @@ export default (_env: unknown, argv: { mode?: webpack.Configuration['mode'] }) =
       entry: './src/background',
       output: {
         filename: 'background.js',
+        clean: true,
       },
       plugins: [
         ...(isDevelopment

eslint-local-rules/disallowSideEffects.js

@@ -38,6 +38,7 @@ const packagesWithoutSideEffect = new Set([
   '@datadog/browser-rum-core',
   'react',
   'react-router-dom',
+  'electron',
 ])
 
 /**

eslint-local-rules/enforceProdDepsImports.js

@@ -38,7 +38,7 @@ export default {
     return moduleVisitor((source) => {
       const importTypeResult = importType(source.value, context)
       // Use an allow list instead of a deny list to make the rule more future-proof.
-      if (importTypeResult === 'parent' || importTypeResult === 'sibling') {
+      if (importTypeResult === 'parent' || importTypeResult === 'sibling' || importTypeResult === 'builtin') {
         return
       }
 

eslint.config.mjs

@@ -418,6 +418,18 @@ export default tseslint.config(
     },
   },
 
+  {
+    files: ['packages/electron/src/**/*.ts'],
+    ignores: [SPEC_FILES],
+    rules: {
+      // TODO: verify this is safe
+      'local-rules/disallow-side-effects': 'off',
+
+      // TODO: remove before merging this to main: quick dev only
+      'no-console': 'off',
+    },
+  },
+
   {
     // Files executed by nodejs
     files: [

package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "postinstall": "scripts/cli init_submodule",
     "build": "yarn workspaces foreach --all --parallel --topological run build",
+    "build:electron": "lerna run build:modules --scope=@datadog/electron",
     "build:bundle": "yarn workspaces foreach --all --parallel run build:bundle",
     "build:apps": "node scripts/build/build-test-apps.ts",
     "build:docs:json": "typedoc --logLevel Verbose --json ./docs.json",
@@ -32,7 +33,7 @@
     "test:e2e:init": "yarn build && yarn build:apps && yarn playwright install chromium --with-deps",
     "test:e2e": "playwright test --config test/e2e/playwright.local.config.ts --project chromium",
     "test:e2e:bs": "node ./scripts/test/bs-wrapper.ts playwright test --config test/e2e/playwright.bs.config.ts",
-    "test:e2e:ci": "yarn test:e2e:init && yarn test:e2e",
+    "test:e2e:ci": "yarn test:e2e:init && xvfb-run -a yarn test:e2e",
     "test:e2e:ci:bs": "yarn build && yarn build:apps && yarn test:e2e:bs",
     "test:compat:tsc": "node scripts/check-typescript-compatibility.ts",
     "test:compat:ssr": "scripts/cli check_server_side_rendering_compatibility",

packages/core/package.json

@@ -7,6 +7,7 @@
   "types": "cjs/index.d.ts",
   "sideEffects": false,
   "scripts": {
+    "pack": "yarn pack",
     "build": "node ../../scripts/build/build-package.ts --modules"
   },
   "repository": {

packages/core/src/browser/cookie.ts

@@ -7,6 +7,7 @@ import {
   generateUUID,
 } from '../tools/utils/stringUtils'
 import { buildUrl } from '../tools/utils/urlPolyfill'
+import { getGlobalObject } from '../tools/globalObject'
 
 export interface CookieOptions {
   secure?: boolean
@@ -65,7 +66,7 @@ export function deleteCookie(name: string, options?: CookieOptions) {
 }
 
 export function areCookiesAuthorized(options: CookieOptions): boolean {
-  if (document.cookie === undefined || document.cookie === null) {
+  if (getGlobalObject<Window>().document?.cookie === undefined || getGlobalObject<Window>().document?.cookie === null) {
     return false
   }
   try {

packages/core/src/domain/resourceUtils.ts

@@ -9,6 +9,7 @@ export const ResourceType = {
   FONT: 'font',
   MEDIA: 'media',
   OTHER: 'other',
+  NATIVE: 'native',
 } as const
 
 export type ResourceType = (typeof ResourceType)[keyof typeof ResourceType]

packages/core/src/domain/telemetry/index.ts

@@ -6,6 +6,7 @@ export {
   addTelemetryError,
   resetTelemetry,
   startTelemetry,
+  startTelemetryCollection,
   addTelemetryConfiguration,
   addTelemetryUsage,
   addTelemetryMetrics,

packages/core/src/domain/telemetry/telemetry.ts

@@ -56,6 +56,7 @@ const ALLOWED_FRAME_URLS = [
 export const enum TelemetryService {
   LOGS = 'browser-logs-sdk',
   RUM = 'browser-rum-sdk',
+  ELECTRON = 'electron-sdk',
 }
 
 export interface Telemetry {

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-export type { Configuration, InitConfiguration, EndpointBuilder, ProxyFn } from './domain/configuration'
+export type { Configuration, InitConfiguration, EndpointBuilder, ProxyFn, TrackType } from './domain/configuration'
 export {
   validateAndBuildConfiguration,
   DefaultPrivacyLevel,
@@ -7,6 +7,7 @@ export {
   isSampleRate,
   buildEndpointHost,
   isIntakeUrl,
+  createEndpointBuilder,
 } from './domain/configuration'
 export * from './domain/intakeSites'
 export type { TrackingConsentState } from './domain/trackingConsent'
@@ -40,6 +41,7 @@ export type {
 } from './domain/telemetry'
 export {
   startTelemetry,
+  startTelemetryCollection,
   addTelemetryDebug,
   addTelemetryError,
   resetTelemetry,
@@ -55,13 +57,25 @@ export { Observable, BufferedObservable } from './tools/observable'
 export type { SessionManager } from './domain/session/sessionManager'
 export { startSessionManager, stopSessionManager } from './domain/session/sessionManager'
 export {
+  SESSION_EXPIRATION_DELAY,
   SESSION_TIME_OUT_DELAY, // Exposed for tests
   SESSION_NOT_TRACKED,
   SessionPersistence,
 } from './domain/session/sessionConstants'
-export type { BandwidthStats, HttpRequest, HttpRequestEvent, Payload, FlushEvent, FlushReason } from './transport'
+export type {
+  BandwidthStats,
+  HttpRequest,
+  HttpRequestEvent,
+  Payload,
+  FlushEvent,
+  FlushReason,
+  DatadogEventBridge,
+  BrowserWindowWithEventBridge,
+  Batch,
+} from './transport'
 export {
   createHttpRequest,
+  RECOMMENDED_REQUEST_BYTES_LIMIT,
   canUseEventBridge,
   getEventBridge,
   bridgeSupports,

packages/core/src/tools/utils/byteUtils.ts

@@ -1,3 +1,5 @@
+import { globalObject } from '../globalObject'
+
 export const ONE_KIBI_BYTE = 1024
 export const ONE_MEBI_BYTE = 1024 * ONE_KIBI_BYTE
 
@@ -16,8 +18,8 @@ export function computeBytesCount(candidate: string): number {
     return candidate.length
   }
 
-  if (window.TextEncoder !== undefined) {
-    return new TextEncoder().encode(candidate).length
+  if ('TextEncoder' in globalObject) {
+    return new (globalObject as { TextEncoder: typeof TextEncoder }).TextEncoder().encode(candidate).length
   }
 
   return new Blob([candidate]).size

packages/core/src/tools/utils/urlPolyfill.ts

@@ -1,7 +1,8 @@
 import { globalObject } from '../globalObject'
 
 export function normalizeUrl(url: string) {
-  return buildUrl(url, location.href).href
+  const base = typeof location !== 'undefined' ? location.href : undefined
+  return buildUrl(url, base).href
 }
 
 export function isValidUrl(url: string) {

packages/core/src/transport/httpRequest.ts

@@ -73,7 +73,8 @@ export interface RetryInfo {
 export function createHttpRequest<Body extends Payload = Payload>(
   endpointBuilders: EndpointBuilder[],
   reportError: (error: RawError) => void,
-  bytesLimit: number = RECOMMENDED_REQUEST_BYTES_LIMIT
+  bytesLimit: number = RECOMMENDED_REQUEST_BYTES_LIMIT,
+  userAgent?: string
 ): HttpRequest<Body> {
   const observable = new Observable<HttpRequestEvent<Body>>()
   const retryState = newRetryState<Body>()
@@ -87,9 +88,9 @@ export function createHttpRequest<Body extends Payload = Payload>(
           retryState,
           (payload, onResponse) => {
             if (isExperimentalFeatureEnabled(ExperimentalFeature.AVOID_FETCH_KEEPALIVE)) {
-              fetchStrategy(endpointBuilder, payload, onResponse)
+              fetchStrategy(endpointBuilder, payload, onResponse, userAgent)
             } else {
-              fetchKeepAliveStrategy(endpointBuilder, bytesLimit, payload, onResponse)
+              fetchKeepAliveStrategy(endpointBuilder, bytesLimit, payload, onResponse, userAgent)
             }
           },
           endpointBuilder.trackType,
@@ -104,13 +105,18 @@ export function createHttpRequest<Body extends Payload = Payload>(
      */
     sendOnExit: (payload: Body) => {
       for (const endpointBuilder of endpointBuilders) {
-        sendBeaconStrategy(endpointBuilder, bytesLimit, payload)
+        sendBeaconStrategy(endpointBuilder, bytesLimit, payload, userAgent)
       }
     },
   }
 }
 
-function sendBeaconStrategy(endpointBuilder: EndpointBuilder, bytesLimit: number, payload: Payload) {
+function sendBeaconStrategy(
+  endpointBuilder: EndpointBuilder,
+  bytesLimit: number,
+  payload: Payload,
+  userAgent?: string
+) {
   const canUseBeacon = !!navigator.sendBeacon && payload.bytesCount < bytesLimit
   if (canUseBeacon) {
     try {
@@ -125,7 +131,7 @@ function sendBeaconStrategy(endpointBuilder: EndpointBuilder, bytesLimit: number
     }
   }
 
-  fetchStrategy(endpointBuilder, payload)
+  fetchStrategy(endpointBuilder, payload, undefined, userAgent)
 }
 
 let hasReportedBeaconError = false
@@ -141,29 +147,39 @@ export function fetchKeepAliveStrategy(
   endpointBuilder: EndpointBuilder,
   bytesLimit: number,
   payload: Payload,
-  onResponse?: (r: HttpResponse) => void
+  onResponse?: (r: HttpResponse) => void,
+  userAgent?: string
 ) {
   const canUseKeepAlive = isKeepAliveSupported() && payload.bytesCount < bytesLimit
 
   if (canUseKeepAlive) {
     const fetchUrl = endpointBuilder.build('fetch-keepalive', payload)
 
-    fetch(fetchUrl, { method: 'POST', body: payload.data, keepalive: true, mode: 'cors' })
+    const config: RequestInit = { method: 'POST', body: payload.data, keepalive: true, mode: 'cors' }
+    if (userAgent) {
+      config.headers = { 'User-Agent': userAgent }
+    }
+    fetch(fetchUrl, config)
       .then(monitor((response: Response) => onResponse?.({ status: response.status, type: response.type })))
       .catch(monitor(() => fetchStrategy(endpointBuilder, payload, onResponse)))
   } else {
-    fetchStrategy(endpointBuilder, payload, onResponse)
+    fetchStrategy(endpointBuilder, payload, onResponse, userAgent)
   }
 }
 
 export function fetchStrategy(
   endpointBuilder: EndpointBuilder,
   payload: Payload,
-  onResponse?: (r: HttpResponse) => void
+  onResponse?: (r: HttpResponse) => void,
+  userAgent?: string
 ) {
   const fetchUrl = endpointBuilder.build('fetch', payload)
 
-  fetch(fetchUrl, { method: 'POST', body: payload.data, mode: 'cors' })
+  const config: RequestInit = { method: 'POST', body: payload.data, mode: 'cors' }
+  if (userAgent) {
+    config.headers = { 'User-Agent': userAgent }
+  }
+  fetch(fetchUrl, config)
     .then(monitor((response: Response) => onResponse?.({ status: response.status, type: response.type })))
     .catch(monitor(() => onResponse?.({ status: 0 })))
 }

packages/core/src/transport/index.ts

@@ -1,7 +1,8 @@
 export type { BandwidthStats, HttpRequest, HttpRequestEvent, Payload, RetryInfo } from './httpRequest'
-export { createHttpRequest } from './httpRequest'
+export { createHttpRequest, RECOMMENDED_REQUEST_BYTES_LIMIT } from './httpRequest'
 export type { BrowserWindowWithEventBridge, DatadogEventBridge } from './eventBridge'
 export { canUseEventBridge, bridgeSupports, getEventBridge, BridgeCapability } from './eventBridge'
+export type { Batch } from './batch'
 export { createBatch } from './batch'
 export type { FlushController, FlushEvent, FlushReason } from './flushController'
 export { createFlushController, FLUSH_DURATION_LIMIT } from './flushController'

packages/electron/.npmignore

@@ -0,0 +1,9 @@
+*
+!/bundle/**/*.js
+!/cjs/**/*
+!/esm/**/*
+!/src/**/*
+/src/**/*.spec.ts
+/src/**/*.specHelper.ts
+!/internal/*
+!/internal-synthetics/*

packages/electron/.yarnrc

@@ -0,0 +1,2 @@
+save-exact true
+

packages/electron/main/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "main": "../cjs/entries/main.js",
+  "module": "../esm/entries/main.js",
+  "types": "../cjs/entries/main.d.ts"
+}