feat(replay): Migrate sentry-replay into monorepo

.craft.yml

@@ -21,7 +21,9 @@ targets:
           cacheControl: 'public, max-age=31536000'
   - name: github
     includeNames: /^sentry-.*$/
+    excludeNames: /^sentry-replay-.*$/
   - name: npm
+    excludeNames: /^sentry-replay-.*$/
   - name: registry
     sdks:
       'npm:@sentry/browser':

package.json

@@ -49,6 +49,7 @@
     "packages/opentelemetry-node",
     "packages/react",
     "packages/remix",
+    "packages/replay",
     "packages/serverless",
     "packages/svelte",
     "packages/tracing",
@@ -63,6 +64,7 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-sucrase": "^4.0.3",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@size-limit/preset-small-lib": "^4.5.5",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@types/chai": "^4.1.3",

packages/e2e-tests/verdaccio-config/config.yaml

@@ -104,6 +104,12 @@ packages:
     unpublish: $all
     # proxy: npmjs # Don't proxy for E2E tests!
 
+  '@sentry/replay':
+    access: $all
+    publish: $all
+    unpublish: $all
+    # proxy: npmjs # Don't proxy for E2E tests!
+
   '@sentry/serverless':
     access: $all
     publish: $all

packages/replay/.craft.yml

@@ -0,0 +1,16 @@
+minVersion: '0.0.1'
+github:
+  owner: getsentry
+  repo: sentry-replay
+changelogPolicy: none
+preReleaseCommand: bash scripts/craft-pre-release.sh
+targets:
+  - name: npm
+    access: public
+  - name: github
+    tagPrefix: v
+    access: public
+statusProvider:
+  name: github
+artifactProvider:
+  name: github

packages/replay/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+build/
+demo/build/
+# TODO: Check if we can re-introduce linting in demo
+demo

packages/replay/.eslintrc.js

@@ -0,0 +1,124 @@
+// TODO: Remove this file after migration!
+// TODO: Remove Sentry ESLint config package from package.json
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
+  extends: ['@sentry-internal/sdk'],
+  ignorePatterns: [
+    'coverage/**',
+    'build/**',
+    'dist/**',
+    'cjs/**',
+    'esm/**',
+    'examples/**',
+    'test/manual/**',
+    'types/**',
+    // TODO: Remove these after migration
+    'scripts/**',
+    'config/**',
+    'config/**',
+    '__mocks__/**',
+  ],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.d.ts'],
+      parserOptions: {
+        project: ['tsconfig.json'],
+      },
+    },
+    // TODO: Extract this to package-specific config after mgiration
+    {
+      files: ['worker/**/*.ts'],
+      parserOptions: {
+        project: ['config/tsconfig.worker.json'],
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx', '*.d.ts'],
+      rules: {
+        // TODO (high-prio): Go through console logs and figure out which ones should be replaced with the SDK logger
+        'no-console': 'off',
+        // TODO (high-pio): Re-enable this after migration
+        'no-restricted-globals': 'off',
+        // TODO (high-prio): Re-enable this after migration
+        '@typescript-eslint/explicit-member-accessibility': 'off',
+        // TODO (high-prio): Remove this exception from naming convention after migration
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'memberLike',
+            modifiers: ['private'],
+            format: ['camelCase'],
+            leadingUnderscore: 'allow',
+          },
+          {
+            selector: 'memberLike',
+            modifiers: ['protected'],
+            format: ['camelCase'],
+            leadingUnderscore: 'allow',
+          },
+        ],
+        // TODO (high-prio): Re-enable this after migration
+        '@sentry-internal/sdk/no-async-await': 'off',
+        // TODO (high-prio): Re-enable this after migration
+        '@typescript-eslint/no-floating-promises': 'off',
+        // TODO (medium-prio): Re-enable this after migration
+        'jsdoc/require-jsdoc': 'off',
+        // TODO: Do we even want to turn this on? Why not enable ++?
+        'no-plusplus': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['test/**/*.ts'],
+      rules: {
+        // TODO: decide if we want to keep our '@test' import paths
+        'import/no-unresolved': 'off',
+        // most of these errors come from `new Promise(process.nextTick)`
+        '@typescript-eslint/unbound-method': 'off',
+        // TODO: decide if we want to enable this again after the migration
+        // We can take the freedom to be a bit more lenient with tests
+        '@typescript-eslint/no-floating-promises': 'off',
+      },
+    },
+    {
+      files: ['src/worker/**/*.js'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
+    // ----------------
+    {
+      files: ['*.tsx'],
+      rules: {
+        // Turn off jsdoc on tsx files until jsdoc is fixed for tsx files
+        // See: https://github.com/getsentry/sentry-javascript/issues/3871
+        'jsdoc/require-jsdoc': 'off',
+      },
+    },
+    {
+      files: ['scenarios/**', 'rollup/**'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};

packages/replay/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+/*.tgz
+.eslintcache
+dist
+build

packages/replay/.npmignore

@@ -0,0 +1,3 @@
+# TODO after we migrated, we should revisit this file and check if we can use the monorepo's master
+# .npmigore file or if we should add custom entries here.
+# For the time being, this can stay empty.

packages/replay/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2022 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/replay/README.md

@@ -0,0 +1,155 @@
+# sentry-replay
+
+Note: Session Replay is currently in beta.
+
+## Pre-requisites
+
+For the sentry-replay integration to work, you must have the [Sentry browser SDK package](https://www.npmjs.com/package/@sentry/browser), or an equivalent framework SDK (e.g. [@sentry/react](https://www.npmjs.com/package/@sentry/react)) installed. The minimum version required for the SDK is `7.x`.
+
+
+`@sentry/replay` requires Node 12+, and browsers newer than IE11.
+
+## Installation
+
+with npm:
+
+```shell
+npm install --save @sentry/browser @sentry/replay
+```
+
+with yarn:
+
+```shell
+yarn add @sentry/browser @sentry/replay
+```
+
+## Setup
+
+To set up the integration, add the following to your Sentry initialization. Several options are supported and passable via the integration constructor.
+See the [configuration section](#configuration) below for more details.
+
+```javascript
+import * as Sentry from '@sentry/browser';
+import { Replay } from '@sentry/replay';
+
+Sentry.init({
+  dsn: '__DSN__',
+  integrations: [
+    new Replay({
+      // This sets the sample rate to be 10%. You may want this to be 100% while
+      // in development and sample at a lower rate in production
+      sessionSampleRate: 0.1,
+
+      // If the entire session is not sampled, use the below sample rate to sample
+      // sessions when an error occurs.
+      errorSampleRate: 1.0,
+
+      // Mask all text content with asterisks (*). Passes text
+      // content through to `maskTextFn` before sending to server.
+      //
+      // Defaults to true, uncomment to change
+      // maskAllText: true,
+
+      // Block all media elements (img, svg, video, object,
+      // picture, embed, map, audio)
+      //
+      // Defaults to true, uncomment to change
+      // blockAllMedia: true,
+    })
+  ],
+  // ...
+});
+```
+
+### Identifying Users
+
+If you have only followed the above instructions to setup session replays, you will only see IP addresses in Sentry's UI. In order to associate a user identity to a session replay, use [`setUser`](https://docs.sentry.io/platforms/javascript/enriching-events/identify-user/).
+
+```javascript
+import * as Sentry from "@sentry/browser";
+Sentry.setUser({ email: "[email protected]" });
+```
+
+### Start and Stop Recording
+
+Replay recording only starts automatically when it is included in the `integrations` key when calling `Sentry.init`. Otherwise you can initialize the plugin and manually call the `start()` method on the integration instance. To stop recording you can call the `stop()`.
+
+```javascript
+const replay = new Replay(); // This will *NOT* begin recording replays
+
+replay.start(); // Start recording
+
+replay.stop(); // Stop recording
+```
+
+## Sessions
+
+A session starts when the Session Replay SDK is first loaded and initialized. The session will continue until 5 minutes passes without any user interactions[^1] with the application *OR* until a maximum of 30 minutes have elapsed. Closing the browser tab will end the session immediately according to the rules for [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
+
+[^1]: An 'interaction' refers to either a mouse click or a browser navigation event.
+
+### Replay Captures Only on Errors
+
+Alternatively, rather than recording an entire session, you can capture a replay only when an error occurs. In this case, the integration will buffer up to one minute worth of events prior to the error being thrown. It will continue to record the session following the rules above regarding session life and activity. Read the [sampling](#Sampling) section for configuration options.
+
+## Sampling
+
+Sampling allows you to control how much of your website's traffic will result in a Session Replay. There are two sample rates you can adjust to get the replays more relevant to your interests:
+
+- `sessionSampleRate` - The sample rate for replays that begin recording immediately and last the entirety of the user's session.
+- `errorSampleRate` - The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends.
+
+Sampling occurs when the session is first started. `sessionSampleRate` is evaluated first. If it is sampled, then the replay recording begins. Otherwise, `errorSampleRate` is evaluated and if it is sampled, the integration will begin buffering the replay and will only upload a replay to Sentry when an error occurs. The remainder of the replay will behave similarly to a whole-session replay.
+
+
+## Configuration
+
+### General Configuration
+
+| key                 | type    | default | description                                                                                                                                                                                                                     |
+| ------------------- | ------- | ------- | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------   |
+| sessionSampleRate   | number  | `0.1`   | The sample rate for all sessions, which will capture the entirety from when a user begins a session until the session ends. (1.0 will collect all replays, 0 will collect no replays)                                           |
+| errorSampleRate     | number  | `1.0`   | If a session isn't already being recorded via `sessionSampleRate`, based on `errorSampleRate` the SDK will send the captured replay when an error occurs. (1.0 capturing all sessions with an error, and 0 capturing none).     |
+| stickySession       | boolean | `true`  | Keep track of the user across page loads. Note a single user using multiple tabs will result in multiple sessions. Closing a tab will result in the session being closed as well.                                               |
+
+### Privacy Configuration
+
+| key              | type                     | default                             | description                                                                                                                                                                                         |
+| ---------------- | ------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| maskAllText      | boolean                  | `true`                              | Mask _all_ text content. Will pass text content through `maskTextFn` before sending to server.                                                                                                       |
+| blockAllMedia    | boolean                  | `true`                              | Block _all_ media elements (`img, svg, video, object, picture, embed, map, audio`)
+| maskTextFn       | (text: string) => string | `(text) => '*'.repeat(text.length)` | Function to customize how text content is masked before sending to server. By default, masks text with `*`.                                                                                         |
+| maskAllInputs    | boolean                  | `true`                              | Mask values of `<input>` elements. Passes input values through `maskInputFn` before sending to server.                                                                                               |
+| maskInputOptions | Record<string, boolean>  | `{ password: true }`                | Customize which inputs `type` to mask. <br /> Available `<input>` types: `color, date, datetime-local, email, month, number, range, search, tel, text, time, url, week, textarea, select, password`. |
+| maskInputFn      | (text: string) => string | `(text) => '*'.repeat(text.length)` | Function to customize how form input values are masked before sending to server. By default, masks values with `*`.                                                                                 |
+| blockClass       | string \| RegExp         | `'sentry-block'`                    | Redact all elements that match the class name. See [privacy](#blocking) section for an example.                                                                                                                                                      |
+| blockSelector    | string                   | `'[data-sentry-block]'`               | Redact all elements that match the DOM selector. See [privacy](#blocking) section for an example.                                                                                                                                                     |
+| ignoreClass      | string \| RegExp         | `'sentry-ignore'`                   | Ignores all events on the matching input field. See [privacy](#ignoring) section for an example.                                                                                                                                                     |
+| maskTextClass    | string \| RegExp         | `'sentry-mask'`                     | Mask all elements that match the class name. See [privacy](#masking) section for an example.                                                                                                                                                        |
+
+### Optimization Configuration
+
+| key              | type                    | default | description                                                                                                                                                                                                                  |
+| ---------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| collectFonts     | boolean                 | `false` | Should collect fonts used on the website                                                                                                                                                                                     |
+| inlineImages     | boolean                 | `false` | Should inline `<image>` content                                                                                                                                                                                              |
+| inlineStylesheet | boolean                 | `true`  | Should inline stylesheets used in the recording                                                                                                                                                                              |
+| recordCanvas     | boolean                 | `false` | Should record `<canvas>` elements                                                                                                                                                                                            |
+| slimDOMOptions   | Record<string, boolean> | `{}`    | Remove unnecessary parts of the DOM <br /> Available keys: `script, comment, headFavicon, headWhitespace, headMetaDescKeywords, headMetaSocial, headMetaRobots, headMetaHttpEquiv, headMetaAuthorship, headMetaVerification` |
+
+## Privacy
+There are several ways to deal with PII. By default, the integration will mask all text content with `*` and block all media elements (`img, svg, video, object, picture, embed, map, audio`). This can be disabled by setting `maskAllText` to `false`. It is also possible to add the following CSS classes to specific DOM elements to prevent recording its contents: `sentry-block`, `sentry-ignore`, and `sentry-mask`. The following sections will show examples of how content is handled by the differing methods.
+
+### Masking
+Masking replaces the text content with something else. The default masking behavior is to replace each character with a `*`. In this example the relevant html code is: `<table class="sentry-mask">...</table>`.
+![Masking example](https://user-images.githubusercontent.com/79684/193118192-dee1d3d8-5813-47e8-b532-f9ee1c8714b3.png)
+
+### Blocking
+Blocking replaces the element with a placeholder that has the same dimensions. The recording will show an empty space where the content was. In this example the relevant html code is: `<table data-sentry-block>...</table>`.
+![Blocking example](https://user-images.githubusercontent.com/79684/193118084-51a589fc-2160-476a-a8dc-b681eddb136c.png)
+
+### Ignoring
+Ignoring only applies to form inputs. Events will be ignored on the input element so that the replay does not show what occurs inside of the input. In the below example, notice how the results in the table below the input changes, but no text is visible in the input.
+
+https://user-images.githubusercontent.com/79684/192815134-a6451c3f-d3cb-455f-a699-7c3fe04d0a2e.mov
+

packages/replay/__mocks__/@sentry/browser/index.ts

@@ -0,0 +1,12 @@
+const captureEvent = jest.fn();
+const getCurrentHub = jest.fn(() => ({
+  captureEvent,
+  getClient: jest.fn(() => ({
+    getDsn: jest.fn(),
+  })),
+}));
+
+const addGlobalEventProcessor = jest.fn();
+const configureScope = jest.fn();
+
+export { getCurrentHub, addGlobalEventProcessor, configureScope };