Merge branch 'main' into aymeric/page-lifecycle

.gitlab-ci.yml

@@ -1,13 +1,13 @@
 variables:
-  CURRENT_STAGING: staging-19
+  CURRENT_STAGING: staging-20
   APP: 'browser-sdk'
-  CURRENT_CI_IMAGE: 45
+  CURRENT_CI_IMAGE: 46
   BUILD_STABLE_REGISTRY: '486234852809.dkr.ecr.us-east-1.amazonaws.com'
   CI_IMAGE: '$BUILD_STABLE_REGISTRY/ci/$APP:$CURRENT_CI_IMAGE'
   GIT_REPOSITORY: '[email protected]:DataDog/browser-sdk.git'
   MAIN_BRANCH: 'main'
-  CHROME_PACKAGE_VERSION: 112.0.5615.49-1
-  CHROME_DRIVER_VERSION: 112.0.5615.28
+  CHROME_PACKAGE_VERSION: 113.0.5672.92-1
+  CHROME_DRIVER_VERSION: 113.0.5672.63
 
 cache:
   key:
@@ -271,7 +271,7 @@ deploy-prod-canary:
     - node ./scripts/deploy/deploy.js prod canary root
     - node ./scripts/deploy/upload-source-maps.js canary root
 
-deploy-prod-all-dcs:
+.deploy-prod:
   stage: deploy
   extends:
     - .base-configuration
@@ -283,25 +283,28 @@ deploy-prod-all-dcs:
     - VERSION=$(node -p -e "require('./lerna.json').version")
     - yarn
     - yarn build:bundle
-    - node ./scripts/deploy/deploy.js prod v${VERSION%%.*} us1,eu1,us3,us5,ap1
-    - node ./scripts/deploy/upload-source-maps.js v${VERSION%%.*} us1,eu1,us3,us5,ap1
+    - node ./scripts/deploy/deploy.js prod v${VERSION%%.*} $UPLOAD_PATH
+    - node ./scripts/deploy/upload-source-maps.js v${VERSION%%.*} $UPLOAD_PATH
 
-deploy-prod-root:
-  stage: deploy
+step-1_deploy-prod-minor-dcs:
   extends:
-    - .base-configuration
-    - .tags
-  when: manual
-  allow_failure: false
-  script:
-    - export BUILD_MODE=release
-    - VERSION=$(node -p -e "require('./lerna.json').version")
-    - yarn
-    - yarn build:bundle
-    - node ./scripts/deploy/deploy.js prod v${VERSION%%.*} root
-    - node ./scripts/deploy/upload-source-maps.js v${VERSION%%.*} root
+    - .deploy-prod
+  variables:
+    UPLOAD_PATH: eu1,us3,us5,ap1
+
+step-2_deploy-prod-us1:
+  extends:
+    - .deploy-prod
+  variables:
+    UPLOAD_PATH: us1
 
-publish-npm:
+step-3_deploy-prod-root:
+  extends:
+    - .deploy-prod
+  variables:
+    UPLOAD_PATH: root
+
+step-4_publish-npm:
   stage: deploy
   extends:
     - .base-configuration
@@ -489,6 +492,7 @@ bump-chrome-version-scheduled:
   before_script:
     - eval $(ssh-agent -s)
   script:
+    - yarn
     - node scripts/test/bump-chrome-driver-version.js
   artifacts:
     reports:

CHANGELOG.md

@@ -16,6 +16,24 @@
 
 ---
 
+## v4.42.2
+
+- 🐛 Fix TypeError when document.cookie is empty ([#2216](https://github.com/DataDog/browser-sdk/pull/2216))
+- 🐛 [RUMF-1583][recorder] do not ignore empty text node during serialization ([#2237](https://github.com/DataDog/browser-sdk/pull/2237))
+- 🐛 Fix `use_excluded_activity_urls` telemetry ([#2236](https://github.com/DataDog/browser-sdk/pull/2236))
+- 🐛 when bridge is present, send a final view update on page exit ([#2234](https://github.com/DataDog/browser-sdk/pull/2234))
+- 📝 Update FCP browser support ([#2187](https://github.com/DataDog/browser-sdk/pull/2187))
+- 👷 use a separate job to deploy US1 ([#2228](https://github.com/DataDog/browser-sdk/pull/2228))
+
+## v4.42.1
+
+- 🐛 fix isolatedModules support ([#2209](https://github.com/DataDog/browser-sdk/pull/2209))
+- 🐛 [RUMF-1576] fix support for tools that removes console.\* references ([#2210](https://github.com/DataDog/browser-sdk/pull/2210))
+- 📦👷 include webpack, typescript and @types/express in common upgrades ([#2222](https://github.com/DataDog/browser-sdk/pull/2222))
+- ⚡ remove spec files from npm packages ([#2224](https://github.com/DataDog/browser-sdk/pull/2224))
+- 📦 [RUMF-1532] update webpack-related dependencies ([#2212](https://github.com/DataDog/browser-sdk/pull/2212))
+- 📦 update vulnerable subdependency engine.io ([#2211](https://github.com/DataDog/browser-sdk/pull/2211))
+
 ## v4.42.0
 
 - ✨[RUMF-1573] Allow to provide custom fingerprint to RUM errors ([#2189](https://github.com/DataDog/browser-sdk/pull/2189))

developer-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datadog/browser-sdk-developer-extension",
-  "version": "4.42.0",
+  "version": "4.42.2",
   "private": true,
   "scripts": {
     "build": "rm -rf dist && webpack --mode production",

developer-extension/src/panel/components/alert.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import { Alert as MantineAlert, Center, Group, MantineProvider, Space } from '@mantine/core'
+
+export function Alert({
+  level,
+  title,
+  message,
+  button,
+}: {
+  level: 'warning' | 'error'
+  title?: string
+  message: string
+  button?: ReactNode
+}) {
+  const color = level === 'warning' ? ('orange' as const) : ('red' as const)
+  return (
+    <Center mt="xl">
+      <MantineAlert color={color} title={title}>
+        {message}
+        {button && (
+          <>
+            <Space h="sm" />
+            <MantineProvider theme={{ components: { Button: { defaultProps: { color } } } }}>
+              <Group position="right">{button}</Group>
+            </MantineProvider>
+          </>
+        )}
+      </MantineAlert>
+    </Center>
+  )
+}

developer-extension/src/panel/components/app.tsx

@@ -1,7 +1,8 @@
-import { Alert, Button, Center, Group, MantineProvider } from '@mantine/core'
+import { Button, MantineProvider } from '@mantine/core'
 import { useColorScheme } from '@mantine/hooks'
 import React, { Suspense, useState } from 'react'
 import { listenDisconnectEvent } from '../disconnectEvent'
+import { Alert } from './alert'
 
 import { Panel } from './panel'
 
@@ -30,19 +31,15 @@ export function App() {
 
 function DisconnectAlert() {
   return (
-    <Center
-      sx={{
-        height: '100vh',
-      }}
-    >
-      <Alert title="Extension disconnected!" color="red">
-        The extension has been disconnected. This can happen after an update.
-        <Group position="right">
-          <Button onClick={() => location.reload()} color="red">
-            Reload extension
-          </Button>
-        </Group>
-      </Alert>
-    </Center>
+    <Alert
+      level="error"
+      title="Extension disconnected!"
+      message="The extension has been disconnected. This can happen after an update."
+      button={
+        <Button onClick={() => location.reload()} color="red">
+          Reload extension
+        </Button>
+      }
+    />
   )
 }

developer-extension/src/panel/components/columns.tsx

@@ -2,7 +2,11 @@ import { Grid, Space, Title } from '@mantine/core'
 import React from 'react'
 
 export function Columns({ children }: { children: React.ReactNode }) {
-  return <Grid>{children}</Grid>
+  return (
+    <Grid mt="sm" mx="sm">
+      {children}
+    </Grid>
+  )
 }
 
 function Column({ children, title }: { children: React.ReactNode; title: string }) {

developer-extension/src/panel/components/panel.tsx

@@ -8,11 +8,13 @@ import type { Settings } from './tabs/settingsTab'
 import { SettingsTab } from './tabs/settingsTab'
 import { InfosTab } from './tabs/infosTab'
 import { EventTab } from './tabs/eventsTab'
+import { ReplayTab } from './tabs/replayTab'
 
 const enum PanelTabs {
   Events = 'events',
   Infos = 'infos',
   Settings = 'settings',
+  Replay = 'replay',
 }
 
 export function Panel() {
@@ -42,6 +44,9 @@ export function Panel() {
         <Tabs.Tab value={PanelTabs.Infos}>
           <Text>Infos</Text>
         </Tabs.Tab>
+        <Tabs.Tab value={PanelTabs.Replay}>
+          <Text>Live replay</Text>
+        </Tabs.Tab>
         <Tabs.Tab
           value={PanelTabs.Settings}
           rightSection={
@@ -61,6 +66,9 @@ export function Panel() {
       <Tabs.Panel value={PanelTabs.Infos} sx={{ flex: 1, minHeight: 0 }}>
         <InfosTab />
       </Tabs.Panel>
+      <Tabs.Panel value={PanelTabs.Replay} sx={{ flex: 1, minHeight: 0 }}>
+        <ReplayTab />
+      </Tabs.Panel>
       <Tabs.Panel value={PanelTabs.Settings} sx={{ flex: 1, minHeight: 0 }}>
         <SettingsTab
           settings={settings}

developer-extension/src/panel/components/tabBase.tsx

@@ -26,8 +26,7 @@ export function TabBase({ top, children }: TabBaseProps) {
           </Container>
         </>
       )}
-      <Container fluid sx={{ flex: 1, overflowY: 'auto', margin: 0 }}>
-        {!top && <Space h="sm" />}
+      <Container fluid sx={{ flex: 1, overflowY: 'auto', padding: 0, margin: 0 }}>
         {children}
       </Container>
     </Flex>

developer-extension/src/panel/components/tabs/replayTab.tsx

@@ -0,0 +1,81 @@
+import { Box, Button } from '@mantine/core'
+import React, { useEffect, useRef, useState } from 'react'
+import { TabBase } from '../tabBase'
+import type { SessionReplayPlayerStatus } from '../../sessionReplayPlayer/startSessionReplayPlayer'
+import { startSessionReplayPlayer } from '../../sessionReplayPlayer/startSessionReplayPlayer'
+import { evalInWindow } from '../../evalInWindow'
+import { createLogger } from '../../../common/logger'
+import { Alert } from '../alert'
+import { useSdkInfos } from '../../hooks/useSdkInfos'
+
+const logger = createLogger('replayTab')
+
+export function ReplayTab() {
+  const infos = useSdkInfos()
+  if (!infos) {
+    return <Alert level="error" message="No RUM SDK present in the page." />
+  }
+
+  if (!infos.cookie?.rum) {
+    return <Alert level="error" message="No RUM session." />
+  }
+
+  if (infos.cookie.rum === '0') {
+    return <Alert level="error" message="RUM session sampled out." />
+  }
+
+  if (infos.cookie.rum === '2') {
+    return <Alert level="error" message="RUM session plan does not include replay." />
+  }
+
+  return <Player />
+}
+
+function Player() {
+  const frameRef = useRef<HTMLIFrameElement | null>(null)
+  const [playerStatus, setPlayerStatus] = useState<SessionReplayPlayerStatus>('loading')
+
+  useEffect(() => {
+    startSessionReplayPlayer(frameRef.current!, setPlayerStatus)
+  }, [])
+
+  return (
+    <TabBase>
+      <Box
+        component="iframe"
+        ref={frameRef}
+        sx={{
+          height: '100%',
+          width: '100%',
+          display: playerStatus === 'ready' ? 'block' : 'none',
+          border: 'none',
+        }}
+      ></Box>
+      {playerStatus === 'waiting-for-full-snapshot' && <WaitingForFullSnapshot />}
+    </TabBase>
+  )
+}
+
+function WaitingForFullSnapshot() {
+  return (
+    <Alert
+      level="warning"
+      message="Waiting for a full snapshot to be generated..."
+      button={
+        <Button onClick={generateFullSnapshot} color="orange">
+          Generate Full Snapshot
+        </Button>
+      }
+    />
+  )
+}
+
+function generateFullSnapshot() {
+  // Restart to make sure we have a fresh Full Snapshot
+  evalInWindow(`
+    DD_RUM.stopSessionReplayRecording()
+    DD_RUM.startSessionReplayRecording()
+  `).catch((error) => {
+    logger.error('While restarting recording:', error)
+  })
+}

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

@@ -50,7 +50,7 @@ async function getInfos(): Promise<SdkInfos> {
       `
         const cookieRawValue = document.cookie
           .split(';')
-          .map(cookie => cookie.match(/(\\S*?)=(.*)/).slice(1))
+          .map(cookie => cookie.match(/(\\S*?)=(.*)/)?.slice(1) || [])
           .find(([name, _]) => name === '_dd_s')
           ?.[1]