wip

Author: billyvg

package.json

@@ -48,6 +48,7 @@
     "packages/ember",
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
+    "packages/feedback",
     "packages/gatsby",
     "packages/hub",
     "packages/integrations",

packages/feedback/.eslintignore

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

packages/feedback/.eslintrc.js

@@ -0,0 +1,42 @@
+// 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 = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['test/**/*.ts'],
+
+      rules: {
+        // 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/types/deprecated.ts'],
+      rules: {
+        '@typescript-eslint/naming-convention': 'off',
+      },
+    },
+  ],
+};

packages/feedback/.gitignore

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

packages/feedback/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+## Updating the rrweb dependency
+
+When [updating the `rrweb` dependency](https://github.com/getsentry/sentry-javascript/blob/a493aa6a46555b944c8d896a2164bcd8b11caaf5/packages/replay/package.json?plain=1#LL55),
+please be aware that [`@sentry/replay`'s README.md](https://github.com/getsentry/sentry-javascript/blob/a493aa6a46555b944c8d896a2164bcd8b11caaf5/packages/replay/README.md?plain=1#LL204) also needs to be updated.

packages/feedback/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/feedback/MIGRATION.md

@@ -0,0 +1,149 @@
+# End of Replay Beta
+
+Sentry Replay is now out of Beta. This means that the usual stability guarantees apply.
+
+Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since been fixed/improved.
+We **strongly** recommend anyone using Replay in a version before 7.39.0 to update to 7.39.0 or newer, in order to prevent running Replay with known problems that have since been fixed.
+
+Below you can find a list of relevant replay issues that have been resolved until 7.39.0:
+
+## New features / improvements
+
+- Remove `autoplay` attribute from audio/video tags ([#59](https://github.com/getsentry/rrweb/pull/59))
+- Exclude fetching scripts that use `<link rel="modulepreload">` ([#52](https://github.com/getsentry/rrweb/pull/52))
+- With maskAllText, mask the attributes: placeholder, title, `aria-label`
+- Lower the flush max delay from 15 seconds to 5 seconds (#6761)
+- Stop recording when retry fails (#6765)
+- Stop without retry when receiving bad API response (#6773)
+- Send client_report when replay sending fails (#7093)
+- Stop recording when hitting a rate limit (#7018)
+- Allow Replay to be used in Electron renderers with nodeIntegration enabled (#6644)
+- Do not renew session in error mode (#6948)
+- Remove default sample rates for replay (#6878)
+- Add `flush` method to integration (#6776)
+- Improve compression worker & fallback behavior (#6988, #6936, #6827)
+- Improve error handling (#7087, #7094, #7010, getsentry/rrweb#16, #6856)
+- Add more default block filters (#7233)
+
+## Fixes
+
+- Fix masking inputs on change when `maskAllInputs:false` ([#61](https://github.com/getsentry/rrweb/pull/61))
+- More robust `rootShadowHost` check ([#50](https://github.com/getsentry/rrweb/pull/50))
+- Fix duplicated textarea value ([#62](https://github.com/getsentry/rrweb/pull/62))
+- Handle removed attributes ([#65](https://github.com/getsentry/rrweb/pull/65))
+- Change LCP calculation (#7187, #7225)
+- Fix debounced flushes not respecting `maxWait` (#7207, #7208)
+- Fix svgs not getting unblocked  (#7132)
+- Fix missing fetch/xhr requests (#7134)
+- Fix feature detection of PerformanceObserver (#7029)
+- Fix `checkoutEveryNms` (#6722)
+- Fix incorrect uncompressed recording size due to encoding (#6740)
+- Ensure dropping replays works (#6522)
+- Envelope send should be awaited in try/catch (#6625)
+- Improve handling of `maskAllText` selector (#6637)
+
+# Upgrading Replay from 7.34.0 to 7.35.0 - #6645
+
+This release will remove the ability to change the default rrweb recording options (outside of privacy options). The following are the new configuration values all replays will use:
+`slimDOMOptions: 'all'` - Removes `script`, comments, `favicon`, whitespace in `head`, and a few `meta` tags in `head`
+`recordCanvas: false` - This option did not do anything as playback of recorded canvas means we would have to remove the playback sandbox (which is a security concern).
+`inlineStylesheet: true` - Inlines styles into the recording itself instead of attempting to fetch it remotely. This means that styles in the replay will reflect the styles at the time of recording and not the current styles of the remote stylesheet.
+`collectFonts: true` - Attempts to load custom fonts.
+`inlineImages: false` - Does not inline images to recording and instead loads the asset remotely. During playback, images may not load due to CORS (add sentry.io as an origin).
+
+Additionally, we have streamlined the privacy options. The following table lists the deprecated value, and what it is replaced by:
+
+| deprecated key   | replaced by | description                                                                                                                                      |
+| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| maskInputOptions | mask        | Use CSS selectors in `mask` in order to mask all inputs of a certain type. For example, `input[type="address"]`                                  |
+| blockSelector    | block       | The selector(s) can be moved directly in the `block` array.                                                                                      |
+| blockClass       | block       | Convert the class name to a CSS selector and add to `block` array. For example, `first-name` becomes `.first-name`. Regexes can be moved as-is.  |
+| maskClass        | mask        | Convert the class name to a CSS selector and add to `mask` array. For example, `first-name` becomes `.first-name`. Regexes can be moved as-is.   |
+| maskSelector     | mask        | The selector(s) can be moved directly in the `mask` array.                                                                                       |
+| ignoreClass      | ignore      | Convert the class name to a CSS selector and add to `ignore` array. For example, `first-name` becomes `.first-name`. Regexes can be moved as-is. |
+
+# Upgrading Replay from 7.31.0 to 7.32.0
+
+In 7.32.0, we have removed the default values for the replay sample rates.
+Previously, they were:
+
+* `replaysSessionSampleRate: 0.1`
+* `replaysOnErrorSampleRate: 1.0`
+
+Now, you have to explicitly set the sample rates, otherwise they default to 0.
+
+# Upgrading Replay from 0.6.x to 7.24.0
+
+The Sentry Replay integration was moved to the Sentry JavaScript SDK monorepo. Hence we're jumping from version 0.x to the monorepo's 7.x version which is shared across all JS SDK packages.
+
+## Replay sample rates are defined on top level (https://github.com/getsentry/sentry-javascript/issues/6351)
+
+Instead of defining the sample rates on the integration like this:
+
+```js
+Sentry.init({
+  dsn: '__DSN__',
+  integrations: [
+    new Replay({
+      sessionSampleRate: 0.1,
+      errorSampleRate: 1.0,
+    })
+  ],
+  // ...
+});
+```
+
+They are now defined on the top level of the SDK:
+
+```js
+Sentry.init({
+  dsn: '__DSN__',
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [
+    new Replay({
+      // other replay config still goes in here
+    })
+  ],
+});
+```
+
+Note that the sample rate options inside of `new Replay({})` have been deprecated and will be removed in a future update.
+
+## Removed deprecated options (https://github.com/getsentry/sentry-javascript/pull/6370)
+
+Two options, which have been deprecated for some time, have been removed:
+
+* `replaysSamplingRate` - instead use `sessionSampleRate`
+* `captureOnlyOnError` - instead use `errorSampleRate`
+
+## New NPM package structure (https://github.com/getsentry/sentry-javascript/issues/6280)
+
+The internal structure of the npm package has changed. This is unlikely to affect you, unless you have imported something from e.g.:
+
+```js
+import something from '@sentry/replay/submodule';
+```
+
+If you only imported from `@sentry/replay`, this will not affect you.
+
+## Changed type name from `IEventBuffer` to `EventBuffer` (https://github.com/getsentry/sentry-javascript/pull/6416)
+
+It is highly unlikely to affect anybody, but the type `IEventBuffer` was renamed to `EventBuffer` for consistency.
+Unless you manually imported this and used it somewhere in your codebase, this will not affect you.
+
+## Session object is now a plain object (https://github.com/getsentry/sentry-javascript/pull/6417)
+
+The `Session` object exported from Replay is now a plain object, instead of a class.
+This should not affect you unless you specifically accessed this class & did custom things with it.
+
+## Reduce public API of Replay integration (https://github.com/getsentry/sentry-javascript/pull/6407)
+
+The result of `new Replay()` now has a much more limited public API. Only the following methods are exposed:
+
+```js
+const replay = new Replay();
+
+replay.start();
+replay.stop();
+```

packages/feedback/README.md

@@ -0,0 +1,100 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Feedback
+
+[![npm version](https://img.shields.io/npm/v/@sentry/feedback.svg)](https://www.npmjs.com/package/@sentry/feedback)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/feedback.svg)](https://www.npmjs.com/package/@sentry/feedback)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/feedback.svg)](https://www.npmjs.com/package/@sentry/feedback)
+
+## Pre-requisites
+
+`@sentry/feedback` requires Node 12+, and browsers newer than IE11.
+
+## Installation
+
+Feedback can be imported from `@sentry/browser`, or a respective SDK package like `@sentry/react` or `@sentry/vue`.
+You don't need to install anything in order to use Feedback. The minimum version that includes Feedback is <<CHANGEME>>.
+
+For details on using Feedback when using Sentry via the CDN bundles, see [CDN bundle](#loading-feedback-as-a-cdn-bundle).
+
+## 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';
+// or e.g. import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: '__DSN__',
+  integrations: [
+    new Sentry.Feedback({
+      // Additional SDK configuration goes in here, for example:
+      // See below for all available options
+    })
+  ],
+  // ...
+});
+```
+
+### Lazy loading Feedback
+
+Feedback will start automatically when you add the integration.
+If you do not want to start Feedback immediately (e.g. if you want to lazy-load it),
+you can also use `addIntegration` to load it later:
+
+```js
+import * as Sentry from "@sentry/react";
+import { BrowserClient } from "@sentry/browser";
+
+Sentry.init({
+  // Do not load it initially
+  integrations: []
+});
+
+// Sometime later
+const { Feedback } = await import('@sentry/browser');
+const client = Sentry.getCurrentHub().getClient<BrowserClient>();
+
+// Client can be undefined
+client?.addIntegration(new Feedback());
+```
+
+### Identifying Users
+
+If you have only followed the above instructions to setup session feedbacks, you will only see IP addresses in Sentry's UI. In order to associate a user identity to a session feedback, use [`setUser`](https://docs.sentry.io/platforms/javascript/enriching-events/identify-user/).
+
+```javascript
+import * as Sentry from "@sentry/browser";
+
+Sentry.setUser({ email: "[email protected]" });
+```
+
+## Loading Feedback as a CDN Bundle
+
+As an alternative to the NPM package, you can use Feedback as a CDN bundle.
+Please refer to the [Feedback installation guide](https://docs.sentry.io/platforms/javascript/session-feedback/#install) for CDN bundle instructions.
+
+
+## Configuration
+
+### General Integration Configuration
+
+The following options can be configured as options to the integration, in `new Feedback({})`:
+
+| key       | type    | default | description |
+| --------- | ------- | ------- | ----------- |
+| tbd       | boolean | `true`  | tbd         |
+
+
+
+## Manually Sending Feedback Data
+
+Connect your own feedback UI to Sentry's You can use `feedback.flush()` to immediately send all currently captured feedback data.
+When Feedback is currently in buffering mode, this will send up to the last 60 seconds of feedback data,
+and also continue sending afterwards, similar to when an error happens & is recorded.

packages/feedback/jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from '@jest/types';
+import { jsWithTs as jsWithTsPreset } from 'ts-jest/presets';
+
+export default async (): Promise<Config.InitialOptions> => {
+  return {
+    ...jsWithTsPreset,
+    globals: {
+      'ts-jest': {
+        tsconfig: '<rootDir>/tsconfig.test.json',
+      },
+      __DEBUG_BUILD__: true,
+    },
+    setupFilesAfterEnv: ['./jest.setup.ts'],
+    testEnvironment: 'jsdom',
+    testMatch: ['<rootDir>/test/**/*(*.)@(spec|test).ts'],
+  };
+};