🔉[developer-extension] bootstrap monitoring

.gitlab-ci.yml

@@ -126,6 +126,7 @@ typecheck:
   interruptible: true
   script:
     - yarn
+    - yarn build
     - yarn typecheck
 
 build-and-lint:

developer-extension/package.json

@@ -16,6 +16,8 @@
     "webpack": "5.88.1"
   },
   "dependencies": {
+    "@datadog/browser-logs": "workspace:*",
+    "@datadog/browser-rum": "workspace:*",
     "@emotion/react": "11.11.1",
     "@mantine/core": "6.0.16",
     "@mantine/hooks": "6.0.16",

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

@@ -15,7 +15,7 @@ export function Alert({
 }) {
   const color = level === 'warning' ? ('orange' as const) : ('red' as const)
   return (
-    <Center mt="xl">
+    <Center mt="xl" className={'dd-privacy-allow'}>
       <MantineAlert color={color} title={title}>
         {message}
         {button && (

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

@@ -32,7 +32,7 @@ export function Panel() {
       defaultValue={PanelTabs.Events}
       sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
     >
-      <Tabs.List>
+      <Tabs.List className={'dd-privacy-allow'}>
         <Tabs.Tab value={PanelTabs.Events}>Events</Tabs.Tab>
         <Tabs.Tab value={PanelTabs.Infos}>
           <Text>Infos</Text>

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

@@ -35,7 +35,7 @@ export function EventTab({ events, filters, onFiltered, clear }: EventTabProps)
   return (
     <TabBase
       top={
-        <Group>
+        <Group className={'dd-privacy-allow'}>
           <Chip.Group
             multiple
             value={filters.sdk}
@@ -49,6 +49,7 @@ export function EventTab({ events, filters, onFiltered, clear }: EventTabProps)
             value={filters.query}
             style={{ flexGrow: 1 }}
             onChange={(event) => onFiltered({ ...filters, query: event.currentTarget.value })}
+            className={'dd-privacy-mask'}
           />
 
           <Button color="violet" variant="light" onClick={flushEvents}>

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

@@ -37,7 +37,7 @@ export function InfosTab() {
               <Entry name="Created" value={formatDate(Number(infos.cookie.created))} />
               <Entry name="Expire" value={formatDate(Number(infos.cookie.expire))} />
               <Space h="sm" />
-              <Button color="violet" variant="light" onClick={endSession}>
+              <Button color="violet" variant="light" onClick={endSession} className={'dd-privacy-allow'}>
                 End current session
               </Button>
             </>
@@ -47,7 +47,7 @@ export function InfosTab() {
           {infos.rum && (
             <>
               {sessionId && (
-                <Group>
+                <Group className={'dd-privacy-allow'}>
                   <AppLink
                     config={infos.rum.config}
                     path="rum/explorer"
@@ -76,15 +76,17 @@ export function InfosTab() {
           {infos.logs && (
             <>
               {sessionId && (
-                <AppLink
-                  config={infos.logs.config}
-                  path="logs"
-                  params={{
-                    query: `source:browser @session_id:${sessionId}`,
-                  }}
-                >
-                  Explorer
-                </AppLink>
+                <div className={'dd-privacy-allow'}>
+                  <AppLink
+                    config={infos.logs.config}
+                    path="logs"
+                    params={{
+                      query: `source:browser @session_id:${sessionId}`,
+                    }}
+                  >
+                    Explorer
+                  </AppLink>
+                </div>
               )}
               <Entry name="Version" value={infos.logs.version} />
               <Entry name="Configuration" value={infos.logs.config} />

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

@@ -13,121 +13,123 @@ export function SettingsTab() {
 
   return (
     <TabBase>
-      <Columns>
-        <Columns.Column title="Request interception">
-          <SettingItem
-            input={
-              <Group align="start">
+      <div className={'dd-privacy-allow'}>
+        <Columns>
+          <Columns.Column title="Request interception">
+            <SettingItem
+              input={
+                <Group align="start">
+                  <Checkbox
+                    label="Use development bundles"
+                    checked={useDevBundles}
+                    onChange={(e) => setSetting('useDevBundles', isChecked(e.target))}
+                    color="violet"
+                  />
+                  {devServerStatus === DevServerStatus.AVAILABLE ? (
+                    <Badge color="green">Available</Badge>
+                  ) : devServerStatus === DevServerStatus.CHECKING ? (
+                    <Badge color="yellow">Checking...</Badge>
+                  ) : (
+                    <Badge color="red">Unavailable</Badge>
+                  )}
+                </Group>
+              }
+              description={
+                <>
+                  Use the local development bundles served by the Browser SDK development server. To start the
+                  development server, run <Code>yarn dev</Code> in the Browser SDK root folder.
+                </>
+              }
+            />
+
+            <SettingItem
+              input={
                 <Checkbox
-                  label="Use development bundles"
-                  checked={useDevBundles}
-                  onChange={(e) => setSetting('useDevBundles', isChecked(e.target))}
+                  label="Use RUM Slim"
+                  checked={useRumSlim}
+                  onChange={(e) => setSetting('useRumSlim', isChecked(e.target))}
                   color="violet"
                 />
-                {devServerStatus === DevServerStatus.AVAILABLE ? (
-                  <Badge color="green">Available</Badge>
-                ) : devServerStatus === DevServerStatus.CHECKING ? (
-                  <Badge color="yellow">Checking...</Badge>
-                ) : (
-                  <Badge color="red">Unavailable</Badge>
-                )}
-              </Group>
-            }
-            description={
-              <>
-                Use the local development bundles served by the Browser SDK development server. To start the development
-                server, run <Code>yarn dev</Code> in the Browser SDK root folder.
-              </>
-            }
-          />
+              }
+              description={
+                <>If the page is using the RUM CDN bundle, this bundle will be replaced by the RUM Slim CDN bundle.</>
+              }
+            />
 
-          <SettingItem
-            input={
-              <Checkbox
-                label="Use RUM Slim"
-                checked={useRumSlim}
-                onChange={(e) => setSetting('useRumSlim', isChecked(e.target))}
-                color="violet"
-              />
-            }
-            description={
-              <>If the page is using the RUM CDN bundle, this bundle will be replaced by the RUM Slim CDN bundle.</>
-            }
-          />
+            <SettingItem
+              input={
+                <Checkbox
+                  label="Block intake requests"
+                  checked={blockIntakeRequests}
+                  onChange={(e) => setSetting('blockIntakeRequests', isChecked(e.target))}
+                  color="violet"
+                />
+              }
+              description={<>Block requests made to the intake, preventing any data to be sent to Datadog.</>}
+            />
+          </Columns.Column>
 
-          <SettingItem
-            input={
-              <Checkbox
-                label="Block intake requests"
-                checked={blockIntakeRequests}
-                onChange={(e) => setSetting('blockIntakeRequests', isChecked(e.target))}
-                color="violet"
-              />
-            }
-            description={<>Block requests made to the intake, preventing any data to be sent to Datadog.</>}
-          />
-        </Columns.Column>
+          <Columns.Column title="Events list">
+            <SettingItem
+              input={
+                <Checkbox
+                  label="Preserve events"
+                  checked={preserveEvents}
+                  onChange={(e) => setSetting('preserveEvents', isChecked(e.target))}
+                  color="violet"
+                />
+              }
+              description={<>Don't clear events when reloading the page or navigating away.</>}
+            />
 
-        <Columns.Column title="Events list">
-          <SettingItem
-            input={
-              <Checkbox
-                label="Preserve events"
-                checked={preserveEvents}
-                onChange={(e) => setSetting('preserveEvents', isChecked(e.target))}
-                color="violet"
-              />
-            }
-            description={<>Don't clear events when reloading the page or navigating away.</>}
-          />
+            <SettingItem
+              input={
+                <Group>
+                  <Text size="sm">Events source:</Text>
+                  <Select
+                    data={[
+                      { label: 'Requests', value: 'requests' },
+                      { label: 'SDK', value: 'sdk' },
+                    ]}
+                    value={eventSource}
+                    onChange={(value) => setSetting('eventSource', value as EventSource)}
+                    color="violet"
+                    sx={{ flex: 1 }}
+                  />
+                </Group>
+              }
+              description={
+                <>
+                  {eventSource === 'requests' && (
+                    <>
+                      Collect events by listening to intake HTTP requests: events need to be flushed to be collected.
+                      Any SDK setup is supported.
+                    </>
+                  )}
+                  {eventSource === 'sdk' && (
+                    <>
+                      Collect events by listening to messages sent from the SDK: events are available as soon as they
+                      happen. Only newer versions of the SDK are supported.
+                    </>
+                  )}
+                </>
+              }
+            />
 
-          <SettingItem
-            input={
-              <Group>
-                <Text size="sm">Events source:</Text>
-                <Select
-                  data={[
-                    { label: 'Requests', value: 'requests' },
-                    { label: 'SDK', value: 'sdk' },
-                  ]}
-                  value={eventSource}
-                  onChange={(value) => setSetting('eventSource', value as EventSource)}
+            <SettingItem
+              input={
+                <Checkbox
+                  label="Auto Flush"
+                  checked={autoFlush}
+                  onChange={(e) => setSetting('autoFlush', isChecked(e.target))}
                   color="violet"
-                  sx={{ flex: 1 }}
                 />
-              </Group>
-            }
-            description={
-              <>
-                {eventSource === 'requests' && (
-                  <>
-                    Collect events by listening to intake HTTP requests: events need to be flushed to be collected. Any
-                    SDK setup is supported.
-                  </>
-                )}
-                {eventSource === 'sdk' && (
-                  <>
-                    Collect events by listening to messages sent from the SDK: events are available as soon as they
-                    happen. Only newer versions of the SDK are supported.
-                  </>
-                )}
-              </>
-            }
-          />
-
-          <SettingItem
-            input={
-              <Checkbox
-                label="Auto Flush"
-                checked={autoFlush}
-                onChange={(e) => setSetting('autoFlush', isChecked(e.target))}
-                color="violet"
-              />
-            }
-            description={<>Force the SDK to flush events periodically.</>}
-          />
-        </Columns.Column>
-      </Columns>
+              }
+              description={<>Force the SDK to flush events periodically.</>}
+            />
+          </Columns.Column>
+        </Columns>
+      </div>
     </TabBase>
   )
 }

developer-extension/src/panel/index.tsx

@@ -2,8 +2,10 @@ import { createRoot } from 'react-dom/client'
 import React from 'react'
 
 import { App } from './components/app'
+import { initMonitoring } from './monitoring'
 
 const main = document.createElement('main')
 document.body.append(main)
 const root = createRoot(main)
 root.render(<App />)
+initMonitoring()

developer-extension/src/panel/monitoring.ts

@@ -0,0 +1,37 @@
+import { datadogRum } from '@datadog/browser-rum'
+import { datadogLogs } from '@datadog/browser-logs'
+import packageJson from '../../package.json'
+
+export function initMonitoring() {
+  datadogRum.init({
+    applicationId: '235202fa-3da1-4aeb-abc4-d01b10ca1539',
+    clientToken: 'pub74fd472504982beb427b647893758040',
+    site: 'datadoghq.com',
+    service: 'browser-sdk-developer-extension',
+    env: 'prod',
+    version: packageJson.version,
+    allowFallbackToLocalStorage: true,
+    sessionSampleRate: 100,
+    sessionReplaySampleRate: 100,
+    telemetrySampleRate: 100,
+    trackUserInteractions: true,
+    trackResources: true,
+    trackLongTasks: true,
+    defaultPrivacyLevel: 'mask',
+  })
+  datadogRum.startSessionReplayRecording()
+
+  datadogLogs.init({
+    clientToken: 'pub74fd472504982beb427b647893758040',
+    site: 'datadoghq.com',
+    service: 'browser-sdk-developer-extension',
+    env: 'prod',
+    version: packageJson.version,
+    allowFallbackToLocalStorage: true,
+    forwardErrorsToLogs: true,
+    forwardConsoleLogs: 'all',
+    forwardReports: 'all',
+    sessionSampleRate: 100,
+    telemetrySampleRate: 100,
+  })
+}