feat(feedback): Bootstrap feedback integration

package.json

@@ -50,6 +50,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,2 @@
+node_modules/
+build/

packages/feedback/.eslintrc.js

@@ -0,0 +1,36 @@
+// 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: ['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/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2023 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/README.md

@@ -0,0 +1,99 @@
+<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 Integration for Feedback
+
+This SDK is **considered experimental and in an alpha state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
+[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
+
+## Pre-requisites
+
+`@sentry/feedback` currently can only be used by browsers with [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) support.
+
+## 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: "jane.doe@example.com" });
+```
+
+## 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.js

@@ -0,0 +1 @@
+module.exports = require('../../jest/jest.config.js');

packages/feedback/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@sentry-internal/feedback",
+  "version": "7.70.0",
+  "description": "Sentry SDK integration for user feedback",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.70.0",
+    "@sentry/types": "7.70.0",
+    "@sentry/utils": "7.70.0",
+    "tslib": "^2.4.1 || ^1.9.3"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.js",
+    "build:bundle": "rollup -c rollup.bundle.config.js",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-replay-*.tgz",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:eslint": "eslint . --format stylish --fix",
+    "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.ts\"",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:eslint": "eslint . --format stylish",
+    "lint:prettier": "prettier --check \"{src,test,scripts}/**/*.ts\"",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}

packages/feedback/rollup.bundle.config.js

@@ -0,0 +1,13 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';
+
+const baseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/index.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry-internal/feedback',
+  outputFileBase: () => 'bundles/feedback',
+});
+
+const builds = makeBundleConfigVariants(baseBundleConfig);
+
+export default builds;

packages/feedback/rollup.npm.config.js

@@ -0,0 +1,16 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for feedback we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+  }),
+);

packages/feedback/src/index.ts

@@ -0,0 +1 @@
+export { sendFeedbackRequest } from './util/sendFeedbackRequest';

packages/feedback/src/types/index.ts

@@ -0,0 +1,29 @@
+import type { Event, Primitive } from '@sentry/types';
+
+export type SentryTags = { [key: string]: Primitive } | undefined;
+
+/**
+ * NOTE: These types are still considered Beta and subject to change.
+ * @hidden
+ */
+export interface FeedbackEvent extends Event {
+  feedback: {
+    message: string;
+    url: string;
+    contact_email?: string;
+    name?: string;
+    replay_id?: string;
+  };
+  // TODO: Add this event type to Event
+  // type: 'feedback_event';
+}
+
+export interface SendFeedbackData {
+  feedback: {
+    message: string;
+    url: string;
+    email?: string;
+    replay_id?: string;
+    name?: string;
+  };
+}

packages/feedback/src/util/prepareFeedbackEvent.ts

@@ -0,0 +1,52 @@
+import type { Scope } from '@sentry/core';
+import { prepareEvent } from '@sentry/core';
+import type { Client } from '@sentry/types';
+
+import type { FeedbackEvent } from '../types';
+
+interface PrepareFeedbackEventParams {
+  client: Client;
+  event: FeedbackEvent;
+  scope: Scope;
+}
+/**
+ * Prepare a feedback event & enrich it with the SDK metadata.
+ */
+export async function prepareFeedbackEvent({
+  client,
+  scope,
+  event,
+}: PrepareFeedbackEventParams): Promise<FeedbackEvent | null> {
+  const eventHint = { integrations: undefined };
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
+
+  const preparedEvent = (await prepareEvent(
+    client.getOptions(),
+    event,
+    { integrations: undefined },
+    scope,
+  )) as FeedbackEvent | null;
+
+  // If e.g. a global event processor returned null
+  if (!preparedEvent) {
+    return null;
+  }
+
+  // This normally happens in browser client "_prepareEvent"
+  // but since we do not use this private method from the client, but rather the plain import
+  // we need to do this manually.
+  preparedEvent.platform = preparedEvent.platform || 'javascript';
+
+  // extract the SDK name because `client._prepareEvent` doesn't add it to the event
+  const metadata = client.getSdkMetadata && client.getSdkMetadata();
+  const { name, version } = (metadata && metadata.sdk) || {};
+
+  preparedEvent.sdk = {
+    ...preparedEvent.sdk,
+    name: name || 'sentry.javascript.unknown',
+    version: version || '0.0.0',
+  };
+  return preparedEvent;
+}