feat(feedback): Include Feedback package in browser SDK (#9586)

Add feedback to craft publish list, and export `Feedback` integration
from browser SDK

Depends on

- [x] #9588 
- [x] #9604

Relates to: getsentry/team-replay#273

Author: billyvg

.craft.yml

@@ -28,6 +28,10 @@ targets:
   - name: npm
     id: '@sentry/opentelemetry'
     includeNames: /^sentry-opentelemetry-\d.*\.tgz$/
+  ## 1.7 Feedback package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback'
+    includeNames: /^sentry-internal-feedback-\d.*\.tgz$/
 
   ## 2. Browser & Node SDKs
   - name: npm

.size-limit.js

@@ -1,18 +1,25 @@
 module.exports = [
   // Main browser webpack builds
+  {
+    name: '@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, Replay, BrowserTracing, Feedback }',
+    gzip: true,
+    limit: '90 KB',
+  },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, Replay, BrowserTracing }',
     gzip: true,
-    limit: '90 KB',
+    limit: '75 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, Replay, BrowserTracing }',
     gzip: true,
-    limit: '90 KB',
+    limit: '75 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
       config.plugins.push(
@@ -33,6 +40,13 @@ module.exports = [
     gzip: true,
     limit: '35 KB',
   },
+  {
+    name: '@sentry/browser (incl. Feedback) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, Feedback }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
@@ -42,11 +56,17 @@ module.exports = [
   },
 
   // Browser CDN bundles (ES6)
+  {
+    name: '@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped)',
+    path: 'packages/browser/build/bundles/bundle.tracing.replay.feedback.min.js',
+    gzip: true,
+    limit: '75 KB',
+  },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)',
     path: 'packages/browser/build/bundles/bundle.tracing.replay.min.js',
     gzip: true,
-    limit: '90 KB',
+    limit: '75 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)',
@@ -96,7 +116,7 @@ module.exports = [
     path: 'packages/react/build/esm/index.js',
     import: '{ init, BrowserTracing, Replay }',
     gzip: true,
-    limit: '90 KB',
+    limit: '75 KB',
   },
   {
     name: '@sentry/react - Webpack (gzipped)',
@@ -126,6 +146,6 @@ module.exports = [
     path: 'packages/feedback/build/npm/esm/index.js',
     import: '{ Feedback }',
     gzip: true,
-    limit: '35 KB',
+    limit: '25 KB',
   },
 ];

packages/browser/package.json

@@ -23,6 +23,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@sentry-internal/feedback": "0.0.1-alpha.17",
     "@sentry-internal/tracing": "7.84.0",
     "@sentry/core": "7.84.0",
     "@sentry/replay": "7.84.0",

packages/browser/rollup.bundle.config.js

@@ -29,7 +29,7 @@ targets.forEach(jsVersion => {
 });
 
 if (targets.includes('es6')) {
-  // Replay bundles only available for es6
+  // Replay/Feedback bundles only available for es6
   const replayBaseBundleConfig = makeBaseBundleConfig({
     bundleType: 'standalone',
     entrypoints: ['src/index.bundle.replay.ts'],
@@ -38,6 +38,14 @@ if (targets.includes('es6')) {
     outputFileBase: () => 'bundles/bundle.replay',
   });
 
+  const feedbackBaseBundleConfig = makeBaseBundleConfig({
+    bundleType: 'standalone',
+    entrypoints: ['src/index.bundle.feedback.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry/browser & @sentry/feedback',
+    outputFileBase: () => 'bundles/bundle.feedback',
+  });
+
   const tracingReplayBaseBundleConfig = makeBaseBundleConfig({
     bundleType: 'standalone',
     entrypoints: ['src/index.bundle.tracing.replay.ts'],
@@ -46,9 +54,19 @@ if (targets.includes('es6')) {
     outputFileBase: () => 'bundles/bundle.tracing.replay',
   });
 
+  const tracingReplayFeedbackBaseBundleConfig = makeBaseBundleConfig({
+    bundleType: 'standalone',
+    entrypoints: ['src/index.bundle.tracing.replay.feedback.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry/browser & @sentry/tracing & @sentry/replay & @sentry/feedback',
+    outputFileBase: () => 'bundles/bundle.tracing.replay.feedback',
+  });
+
   builds.push(
     ...makeBundleConfigVariants(replayBaseBundleConfig),
+    ...makeBundleConfigVariants(feedbackBaseBundleConfig),
     ...makeBundleConfigVariants(tracingReplayBaseBundleConfig),
+    ...makeBundleConfigVariants(tracingReplayFeedbackBaseBundleConfig),
   );
 }
 

packages/browser/src/index.bundle.feedback.ts

@@ -0,0 +1,14 @@
+// This is exported so the loader does not fail when switching off Replay/Tracing
+import { Feedback } from '@sentry-internal/feedback';
+import { BrowserTracing, Replay, addTracingExtensions } from '@sentry-internal/integration-shims';
+
+import * as Sentry from './index.bundle.base';
+
+// TODO (v8): Remove this as it was only needed for backwards compatibility
+Sentry.Integrations.Replay = Replay;
+
+Sentry.Integrations.BrowserTracing = BrowserTracing;
+
+export * from './index.bundle.base';
+export { BrowserTracing, addTracingExtensions, Replay, Feedback };
+// Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.bundle.replay.ts

@@ -1,5 +1,5 @@
 // This is exported so the loader does not fail when switching off Replay/Tracing
-import { BrowserTracing, addTracingExtensions } from '@sentry-internal/integration-shims';
+import { BrowserTracing, Feedback, addTracingExtensions } from '@sentry-internal/integration-shims';
 import { Replay } from '@sentry/replay';
 
 import * as Sentry from './index.bundle.base';
@@ -10,5 +10,5 @@ Sentry.Integrations.Replay = Replay;
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 export * from './index.bundle.base';
-export { BrowserTracing, addTracingExtensions, Replay };
+export { BrowserTracing, addTracingExtensions, Replay, Feedback };
 // Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.bundle.tracing.replay.feedback.ts

@@ -0,0 +1,18 @@
+import { Feedback } from '@sentry-internal/feedback';
+import { BrowserTracing, Span, addExtensionMethods } from '@sentry-internal/tracing';
+import { Replay } from '@sentry/replay';
+
+import * as Sentry from './index.bundle.base';
+
+// TODO (v8): Remove this as it was only needed for backwards compatibility
+// We want replay to be available under Sentry.Replay, to be consistent
+// with the NPM package version.
+Sentry.Integrations.Replay = Replay;
+
+Sentry.Integrations.BrowserTracing = BrowserTracing;
+
+// We are patching the global object with our hub extension methods
+addExtensionMethods();
+
+export { Feedback, Replay, BrowserTracing, Span, addExtensionMethods };
+export * from './index.bundle.base';

packages/browser/src/index.bundle.tracing.replay.ts

@@ -1,3 +1,4 @@
+import { Feedback } from '@sentry-internal/integration-shims';
 import { BrowserTracing, Span, addExtensionMethods } from '@sentry-internal/tracing';
 import { Replay } from '@sentry/replay';
 
@@ -13,5 +14,5 @@ Sentry.Integrations.BrowserTracing = BrowserTracing;
 // We are patching the global object with our hub extension methods
 addExtensionMethods();
 
-export { Replay, BrowserTracing, Span, addExtensionMethods };
+export { Feedback, Replay, BrowserTracing, Span, addExtensionMethods };
 export * from './index.bundle.base';

packages/browser/src/index.bundle.tracing.ts

@@ -1,5 +1,5 @@
 // This is exported so the loader does not fail when switching off Replay
-import { Replay } from '@sentry-internal/integration-shims';
+import { Feedback, Replay } from '@sentry-internal/integration-shims';
 import { BrowserTracing, Span, addExtensionMethods } from '@sentry-internal/tracing';
 
 import * as Sentry from './index.bundle.base';
@@ -14,5 +14,5 @@ Sentry.Integrations.BrowserTracing = BrowserTracing;
 // We are patching the global object with our hub extension methods
 addExtensionMethods();
 
-export { Replay, BrowserTracing, Span, addExtensionMethods };
+export { Feedback, Replay, BrowserTracing, Span, addExtensionMethods };
 export * from './index.bundle.base';

packages/browser/src/index.bundle.ts

@@ -1,5 +1,5 @@
 // This is exported so the loader does not fail when switching off Replay/Tracing
-import { BrowserTracing, Replay, addTracingExtensions } from '@sentry-internal/integration-shims';
+import { BrowserTracing, Feedback, Replay, addTracingExtensions } from '@sentry-internal/integration-shims';
 
 import * as Sentry from './index.bundle.base';
 
@@ -9,5 +9,5 @@ Sentry.Integrations.Replay = Replay;
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 export * from './index.bundle.base';
-export { BrowserTracing, addTracingExtensions, Replay };
+export { BrowserTracing, addTracingExtensions, Replay, Feedback };
 // Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.ts

@@ -33,6 +33,8 @@ export type {
   ReplaySpanFrameEvent,
 } from '@sentry/replay';
 
+export { Feedback } from '@sentry-internal/feedback';
+
 export {
   BrowserTracing,
   defaultRequestInstrumentationOptions,

packages/browser/test/unit/index.bundle.feedback.test.ts

@@ -0,0 +1,25 @@
+import { BrowserTracing as BrowserTracingShim, Replay as ReplayShim } from '@sentry-internal/integration-shims';
+import { Feedback } from '@sentry/browser';
+
+import * as TracingReplayBundle from '../../src/index.bundle.feedback';
+
+describe('index.bundle.feedback', () => {
+  it('has correct exports', () => {
+    Object.keys(TracingReplayBundle.Integrations).forEach(key => {
+      // Skip BrowserTracing because it doesn't have a static id field.
+      if (key === 'BrowserTracing') {
+        return;
+      }
+
+      expect((TracingReplayBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
+    });
+
+    expect(TracingReplayBundle.Integrations.Replay).toBe(ReplayShim);
+    expect(TracingReplayBundle.Replay).toBe(ReplayShim);
+
+    expect(TracingReplayBundle.Integrations.BrowserTracing).toBe(BrowserTracingShim);
+    expect(TracingReplayBundle.BrowserTracing).toBe(BrowserTracingShim);
+
+    expect(TracingReplayBundle.Feedback).toBe(Feedback);
+  });
+});

packages/browser/test/unit/index.bundle.replay.test.ts

@@ -1,4 +1,4 @@
-import { BrowserTracing as BrowserTracingShim } from '@sentry-internal/integration-shims';
+import { BrowserTracing as BrowserTracingShim, Feedback as FeedbackShim } from '@sentry-internal/integration-shims';
 import { Replay } from '@sentry/browser';
 
 import * as TracingReplayBundle from '../../src/index.bundle.replay';
@@ -19,5 +19,7 @@ describe('index.bundle.replay', () => {
 
     expect(TracingReplayBundle.Integrations.BrowserTracing).toBe(BrowserTracingShim);
     expect(TracingReplayBundle.BrowserTracing).toBe(BrowserTracingShim);
+
+    expect(TracingReplayBundle.Feedback).toBe(FeedbackShim);
   });
 });

packages/browser/test/unit/index.bundle.test.ts

@@ -1,4 +1,8 @@
-import { BrowserTracing as BrowserTracingShim, Replay as ReplayShim } from '@sentry-internal/integration-shims';
+import {
+  BrowserTracing as BrowserTracingShim,
+  Feedback as FeedbackShim,
+  Replay as ReplayShim,
+} from '@sentry-internal/integration-shims';
 
 import * as TracingBundle from '../../src/index.bundle';
 
@@ -18,5 +22,7 @@ describe('index.bundle', () => {
 
     expect(TracingBundle.Integrations.BrowserTracing).toBe(BrowserTracingShim);
     expect(TracingBundle.BrowserTracing).toBe(BrowserTracingShim);
+
+    expect(TracingBundle.Feedback).toBe(FeedbackShim);
   });
 });

packages/browser/test/unit/index.bundle.tracing.replay.feedback.test.ts

@@ -0,0 +1,25 @@
+import { BrowserTracing } from '@sentry-internal/tracing';
+import { Feedback, Replay } from '@sentry/browser';
+
+import * as TracingReplayFeedbackBundle from '../../src/index.bundle.tracing.replay.feedback';
+
+describe('index.bundle.tracing.replay.feedback', () => {
+  it('has correct exports', () => {
+    Object.keys(TracingReplayFeedbackBundle.Integrations).forEach(key => {
+      // Skip BrowserTracing because it doesn't have a static id field.
+      if (key === 'BrowserTracing') {
+        return;
+      }
+
+      expect((TracingReplayFeedbackBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
+    });
+
+    expect(TracingReplayFeedbackBundle.Integrations.Replay).toBe(Replay);
+    expect(TracingReplayFeedbackBundle.Replay).toBe(Replay);
+
+    expect(TracingReplayFeedbackBundle.Integrations.BrowserTracing).toBe(BrowserTracing);
+    expect(TracingReplayFeedbackBundle.BrowserTracing).toBe(BrowserTracing);
+
+    expect(TracingReplayFeedbackBundle.Feedback).toBe(Feedback);
+  });
+});

packages/browser/test/unit/index.bundle.tracing.replay.test.ts

@@ -1,3 +1,4 @@
+import { Feedback as FeedbackShim } from '@sentry-internal/integration-shims';
 import { BrowserTracing } from '@sentry-internal/tracing';
 import { Replay } from '@sentry/browser';
 
@@ -19,5 +20,7 @@ describe('index.bundle.tracing.replay', () => {
 
     expect(TracingReplayBundle.Integrations.BrowserTracing).toBe(BrowserTracing);
     expect(TracingReplayBundle.BrowserTracing).toBe(BrowserTracing);
+
+    expect(TracingReplayBundle.Feedback).toBe(FeedbackShim);
   });
 });

packages/browser/test/unit/index.bundle.tracing.test.ts

@@ -1,4 +1,4 @@
-import { Replay as ReplayShim } from '@sentry-internal/integration-shims';
+import { Feedback as FeedbackShim, Replay as ReplayShim } from '@sentry-internal/integration-shims';
 import { BrowserTracing } from '@sentry-internal/tracing';
 
 import * as TracingBundle from '../../src/index.bundle.tracing';
@@ -19,5 +19,7 @@ describe('index.bundle.tracing', () => {
 
     expect(TracingBundle.Integrations.BrowserTracing).toBe(BrowserTracing);
     expect(TracingBundle.BrowserTracing).toBe(BrowserTracing);
+
+    expect(TracingBundle.Feedback).toBe(FeedbackShim);
   });
 });

packages/feedback/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback",
-  "version": "7.84.0",
+  "version": "0.0.1-alpha.17",
   "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",
@@ -42,7 +42,7 @@
     "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",
+    "clean": "rimraf build sentry-feedback-*.tgz",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",
     "test": "jest",

packages/feedback/src/integration.ts

@@ -155,7 +155,7 @@ export class Feedback implements Integration {
   }
 
   /**
-   * Setup and initialize replay container
+   * Setup and initialize feedback container
    */
   public setupOnce(): void {
     if (!isBrowser()) {