Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[rum] Inject browser sdk #119

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,12 @@ module.exports = {
},
},
{
files: ['rollup.config.mjs', 'packages/core/**/*', 'packages/published/**/*'],
files: [
'rollup.config.mjs',
'packages/core/**/*',
'packages/published/**/*',
'packages/plugins/**/built/*',
],
rules: {
'import/no-extraneous-dependencies': 'off',
},
Expand Down
4 changes: 4 additions & 0 deletions .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,7 @@ packages/tests/src/plugins/telemetry @DataDog/f
# Error Tracking
packages/plugins/error-tracking @yoannmoinet
packages/tests/src/plugins/error-tracking @yoannmoinet

# Rum
packages/plugins/rum @yoannmoinet
packages/tests/src/plugins/rum @yoannmoinet
2 changes: 0 additions & 2 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,6 @@ jobs:
if: steps.cache-build.outputs.cache-hit != 'true'
run: yarn build:all

- run: yarn typecheck:all

- run: yarn cli integrity

- run: git diff --exit-code && git diff --cached --exit-code || (echo "Please run 'yarn cli integrity' and commit the result." && exit 1)
Binary file not shown.
Binary file not shown.
Binary file not shown.
3 changes: 3 additions & 0 deletions LICENSES-3rdparty.csv
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ Component,Origin,Licence,Copyright
@babel/types,npm,MIT,The Babel Team (https://babel.dev/docs/en/next/babel-types)
@bcoe/v8-coverage,npm,MIT,Charles Samborski (https://demurgos.github.io/v8-coverage)
@cspotcode/source-map-support,npm,MIT,(https://www.npmjs.com/package/@cspotcode/source-map-support)
@datadog/browser-core,npm,Apache-2.0,(https://www.npmjs.com/package/@datadog/browser-core)
@datadog/browser-rum,virtual,Apache-2.0,(https://www.npmjs.com/package/@datadog/browser-rum)
@datadog/browser-rum-core,npm,Apache-2.0,(https://www.npmjs.com/package/@datadog/browser-rum-core)
@esbuild/darwin-arm64,npm,MIT,(https://www.npmjs.com/package/@esbuild/darwin-arm64)
@esbuild/linux-x64,npm,MIT,(https://www.npmjs.com/package/@esbuild/linux-x64)
@eslint-community/eslint-utils,virtual,MIT,Toru Nagashima (https://github.com/eslint-community/eslint-utils#readme)
Expand Down
82 changes: 82 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ To interact with Datadog directly from your builds.
- [`customPlugins`](#customplugins)
- [Features](#features)
- [Error Tracking](#error-tracking-----)
- [RUM](#rum-----)
- [Telemetry](#telemetry-----)
- [Contributing](#contributing)
- [License](#license)
Expand Down Expand Up @@ -103,6 +104,38 @@ Follow the specific documentation for each bundler:
service: string;
};
};
rum?: {
disabled?: boolean;
sdk?: {
actionNameAttribute?: string;
allowedTracingUrls?: string[];
allowUntrustedEvents?: boolean;
applicationId: string;
clientToken?: string;
compressIntakeRequests?: boolean;
defaultPrivacyLevel?: 'mask' | 'mask-user-input' | 'allow';
enablePrivacyForActionName?: boolean;
env?: string;
excludedActivityUrls?: string[];
proxy?: string;
service?: string;
sessionReplaySampleRate?: number;
sessionSampleRate?: number;
silentMultipleInit?: boolean;
site?: string;
startSessionReplayRecordingManually?: boolean;
storeContextsAcrossPages?: boolean;
telemetrySampleRate?: number;
traceSampleRate?: number;
trackingConsent?: 'granted' | 'not_granted';
trackLongTasks?: boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few of these options were removed from the browser sdk config in v6. I guess this works still as it will work for v5 and prior and just do nothing for v6+ but just a heads up.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know which ones? Because they all are still in the doc.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah you're right, they're still there. They just default to true so we removed them from the default config. You can keep them!

trackResources?: boolean;
trackUserInteractions?: boolean;
trackViewsManually?: boolean;
version?: string;
workerUrl?: string;
};
};
telemetry?: {
disabled?: boolean;
enableTracing?: boolean;
Expand Down Expand Up @@ -246,6 +279,55 @@ datadogWebpackPlugin({

</details>

### RUM <img src="packages/assets/src/esbuild.svg" alt="ESBuild" width="17" /> <img src="packages/assets/src/rollup.svg" alt="Rollup" width="17" /> <img src="packages/assets/src/rspack.svg" alt="Rspack" width="17" /> <img src="packages/assets/src/vite.svg" alt="Vite" width="17" /> <img src="packages/assets/src/webpack.svg" alt="Webpack" width="17" />

> Interact with Real User Monitoring (RUM) directly from your build system.

#### [📝 Full documentation ➡️](/packages/plugins/rum#readme)

<details>

<summary>Configuration</summary>

```typescript
datadogWebpackPlugin({
rum?: {
disabled?: boolean,
sdk?: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could use the RUM type directly here, no?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a very good idea, I'll check if I can.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I put that on the wrong file, oops, this is the README, not the source types

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah nice Idea!

actionNameAttribute?: string,
allowedTracingUrls?: string[],
allowUntrustedEvents?: boolean,
applicationId: string,
clientToken?: string,
compressIntakeRequests?: boolean,
defaultPrivacyLevel?: 'mask' | 'mask-user-input' | 'allow',
enablePrivacyForActionName?: boolean,
env?: string,
excludedActivityUrls?: string[],
proxy?: string,
service?: string,
sessionReplaySampleRate?: number,
sessionSampleRate?: number,
silentMultipleInit?: boolean,
site?: string,
startSessionReplayRecordingManually?: boolean,
storeContextsAcrossPages?: boolean,
telemetrySampleRate?: number,
traceSampleRate?: number,
trackingConsent?: 'granted' | 'not_granted',
trackLongTasks?: boolean,
trackResources?: boolean,
trackUserInteractions?: boolean,
trackViewsManually?: boolean,
version?: string,
workerUrl?: string,
},
}
});
```

</details>

### Telemetry <img src="packages/assets/src/esbuild.svg" alt="ESBuild" width="17" /> <img src="packages/assets/src/rollup.svg" alt="Rollup" width="17" /> <img src="packages/assets/src/rspack.svg" alt="Rspack" width="17" /> <img src="packages/assets/src/vite.svg" alt="Vite" width="17" /> <img src="packages/assets/src/webpack.svg" alt="Webpack" width="17" />

> Display and send telemetry data as metrics to Datadog.
Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import type { TrackedFilesMatcher } from '@dd/internal-git-plugin/trackedFilesMa
// #imports-injection-marker
import type { ErrorTrackingOptions } from '@dd/error-tracking-plugin/types';
import type * as errorTracking from '@dd/error-tracking-plugin';
import type { RumOptions } from '@dd/rum-plugin/types';
import type * as rum from '@dd/rum-plugin';
import type { TelemetryOptions } from '@dd/telemetry-plugin/types';
import type * as telemetry from '@dd/telemetry-plugin';
// #imports-injection-marker
Expand Down Expand Up @@ -144,6 +146,7 @@ export interface Options extends BaseOptions {
// Each product should have a unique entry.
// #types-injection-marker
[errorTracking.CONFIG_KEY]?: ErrorTrackingOptions;
[rum.CONFIG_KEY]?: RumOptions;
[telemetry.CONFIG_KEY]?: TelemetryOptions;
// #types-injection-marker
customPlugins?: GetCustomPlugins;
Expand Down
1 change: 1 addition & 0 deletions packages/factory/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@dd/internal-bundler-report-plugin": "workspace:*",
"@dd/internal-git-plugin": "workspace:*",
"@dd/internal-injection-plugin": "workspace:*",
"@dd/rum-plugin": "workspace:*",
"@dd/telemetry-plugin": "workspace:*",
"chalk": "2.3.1",
"unplugin": "1.16.0"
Expand Down
6 changes: 6 additions & 0 deletions packages/factory/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import { getContext, validateOptions } from './helpers';
// #imports-injection-marker
import type { OptionsWithErrorTracking } from '@dd/error-tracking-plugin/types';
import * as errorTracking from '@dd/error-tracking-plugin';
import type { OptionsWithRum } from '@dd/rum-plugin/types';
import * as rum from '@dd/rum-plugin';
import type { OptionsWithTelemetry } from '@dd/telemetry-plugin/types';
import * as telemetry from '@dd/telemetry-plugin';
import { getBuildReportPlugins } from '@dd/internal-build-report-plugin';
Expand All @@ -38,6 +40,7 @@ import { getInjectionPlugins } from '@dd/internal-injection-plugin';
// #imports-injection-marker
// #types-export-injection-marker
export type { types as ErrorTrackingTypes } from '@dd/error-tracking-plugin';
export type { types as RumTypes } from '@dd/rum-plugin';
export type { types as TelemetryTypes } from '@dd/telemetry-plugin';
// #types-export-injection-marker

Expand Down Expand Up @@ -102,6 +105,9 @@ export const buildPluginFactory = ({
) {
plugins.push(...errorTracking.getPlugins(options as OptionsWithErrorTracking, context));
}
if (options[rum.CONFIG_KEY] && options[rum.CONFIG_KEY].disabled !== true) {
plugins.push(...rum.getPlugins(options as OptionsWithRum, context));
}
if (options[telemetry.CONFIG_KEY] && options[telemetry.CONFIG_KEY].disabled !== true) {
plugins.push(...telemetry.getPlugins(options as OptionsWithTelemetry, context));
}
Expand Down
90 changes: 90 additions & 0 deletions packages/plugins/rum/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
# RUM Plugin <!-- #omit in toc -->

Interact with Real User Monitoring (RUM) directly from your build system.

<!-- The title and the following line will both be added to the root README.md -->

## Table of content <!-- #omit in toc -->

<!-- This is auto generated with yarn cli integrity -->

<!-- #toc -->
- [Configuration](#configuration)
- [Browser SDK Injection](#browser-sdk-injection)
- [rum.sdk.applicationId](#rumsdkapplicationid)
- [rum.sdk.clientToken](#rumsdkclienttoken)
<!-- #toc -->

## Configuration

<details>
<summary>Full configuration</summary>

```ts
rum?: {
disabled?: boolean;
sdk?: {
actionNameAttribute?: string;
allowedTracingUrls?: string[];
allowUntrustedEvents?: boolean;
applicationId: string;
clientToken?: string;
compressIntakeRequests?: boolean;
defaultPrivacyLevel?: 'mask' | 'mask-user-input' | 'allow';
enablePrivacyForActionName?: boolean;
env?: string;
excludedActivityUrls?: string[];
proxy?: string;
service?: string;
sessionReplaySampleRate?: number;
sessionSampleRate?: number;
silentMultipleInit?: boolean;
site?: string;
startSessionReplayRecordingManually?: boolean;
storeContextsAcrossPages?: boolean;
telemetrySampleRate?: number;
traceSampleRate?: number;
trackingConsent?: 'granted' | 'not_granted';
trackLongTasks?: boolean;
trackResources?: boolean;
trackUserInteractions?: boolean;
trackViewsManually?: boolean;
version?: string;
workerUrl?: string;
};
}
```

</details>

**Minimal configuration**:

```ts
rum: {
sdk: {
applicationId: 'your_application_id',
}
}
```

## Browser SDK Injection

Automatically inject the RUM SDK into your application.

Full documentation can be found in the [Datadog documentation](https://docs.datadoghq.com/real_user_monitoring/browser/setup/client?tab=rum#configuration).

### rum.sdk.applicationId

> required

The RUM application ID. [Create a new application if necessary](https://app.datadoghq.com/rum/list/create).

### rum.sdk.clientToken

> optional, will be fetched if missing

A [Datadog client token](https://docs.datadoghq.com/account_management/api-app-keys/#client-tokens).

> [!NOTE]
> If not provided, the plugin will attempt to fetch the client token using the API.
> You need to provide both `auth.apiKey` and `auth.appKey` with the `rum_apps_read` permission.
34 changes: 34 additions & 0 deletions packages/plugins/rum/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "@dd/rum-plugin",
"packageManager": "[email protected]",
"license": "MIT",
"private": true,
"author": "Datadog",
"description": "Interact with Real User Monitoring (RUM) directly from your build system.",
"homepage": "https://github.com/DataDog/build-plugins/tree/main/packages/plugins/rum#readme",
"repository": {
"type": "git",
"url": "https://github.com/DataDog/build-plugins",
"directory": "packages/plugins/rum"
},
"main": "./src/index.ts",
"toBuild": {
"rum-browser-sdk": {
"entry": "./src/built/rum-browser-sdk.ts"
}
},
"exports": {
".": "./src/index.ts",
"./*": "./src/*.ts"
},
"scripts": {
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@dd/core": "workspace:*",
"chalk": "2.3.1"
},
"devDependencies": {
"@datadog/browser-rum": "6.0.0"
}
}
13 changes: 13 additions & 0 deletions packages/plugins/rum/src/built/rum-browser-sdk.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Unless explicitly stated otherwise all files in this repository are licensed under the MIT License.
// This product includes software developed at Datadog (https://www.datadoghq.com/).
// Copyright 2019-Present Datadog, Inc.

/* global globalThis */

import { datadogRum } from '@datadog/browser-rum';

// To please TypeScript.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂

const globalAny: any = globalThis;

// Also them to the global DD_RUM object.
globalAny.DD_RUM = datadogRum;
8 changes: 8 additions & 0 deletions packages/plugins/rum/src/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Unless explicitly stated otherwise all files in this repository are licensed under the MIT License.
// This product includes software developed at Datadog (https://www.datadoghq.com/).
// Copyright 2019-Present Datadog, Inc.

import type { PluginName } from '@dd/core/types';

export const CONFIG_KEY = 'rum' as const;
export const PLUGIN_NAME: PluginName = 'datadog-rum-plugin' as const;
Loading