feat(feedback): Create async bundles and code to resolve helper integrations (#11621)

Author: ryan953

.size-limit.js

@@ -52,35 +52,28 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '83 KB',
+    limit: '86 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'feedbackIntegration'),
     gzip: true,
-    limit: '37 KB',
-  },
-  {
-    name: '@sentry/browser (incl. Feedback, Feedback Modal)',
-    path: 'packages/browser/build/npm/esm/index.js',
-    import: createImport('init', 'feedbackIntegration', 'feedbackModalIntegration'),
-    gzip: true,
-    limit: '37 KB',
+    limit: '40 KB',
   },
   {
-    name: '@sentry/browser (incl. Feedback, Feedback Modal, Feedback Screenshot)',
+    name: '@sentry/browser (incl. sendFeedback)',
     path: 'packages/browser/build/npm/esm/index.js',
-    import: createImport('init', 'feedbackIntegration', 'feedbackModalIntegration', 'feedbackScreenshotIntegration'),
+    import: createImport('init', 'sendFeedback'),
     gzip: true,
-    limit: '40 KB',
+    limit: '28 KB',
   },
   {
-    name: '@sentry/browser (incl. sendFeedback)',
+    name: '@sentry/browser (incl. FeedbackAsync)',
     path: 'packages/browser/build/npm/esm/index.js',
-    import: createImport('init', 'sendFeedback'),
+    import: createImport('init', 'feedbackAsyncIntegration'),
     gzip: true,
-    limit: '30 KB',
+    limit: '33 KB',
   },
   // React SDK (ESM)
   {
@@ -167,6 +160,13 @@ module.exports = [
     brotli: false,
     limit: '220 KB',
   },
+  {
+    name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',
+    path: createCDNPath('bundle.tracing.replay.feedback.min.js'),
+    gzip: false,
+    brotli: false,
+    limit: '261 KB',
+  },
   // Next.js SDK (ESM)
   {
     name: '@sentry/nextjs (client)',

packages/browser/src/feedback.ts

@@ -0,0 +1,13 @@
+import {
+  buildFeedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
+} from '@sentry-internal/feedback';
+import { lazyLoadIntegration } from './utils/lazyLoadIntegration';
+
+// The full feedback widget, with everything pre-loaded
+export const feedbackIntegration = buildFeedbackIntegration({
+  lazyLoadIntegration,
+  getModalIntegration: () => feedbackModalIntegration,
+  getScreenshotIntegration: () => feedbackScreenshotIntegration,
+});

packages/browser/src/feedbackAsync.ts

@@ -0,0 +1,7 @@
+import { buildFeedbackIntegration } from '@sentry-internal/feedback';
+import { lazyLoadIntegration } from './utils/lazyLoadIntegration';
+
+// This is for users who want to have a lazy-loaded feedback widget
+export const feedbackAsyncIntegration = buildFeedbackIntegration({
+  lazyLoadIntegration,
+});

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

@@ -2,11 +2,7 @@ import { browserTracingIntegrationShim, replayIntegrationShim } from '@sentry-in
 
 export * from './index.bundle.base';
 
-export {
-  feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
-  getFeedback,
-} from '@sentry-internal/feedback';
+export { feedbackIntegration } from './feedback';
+export { getFeedback } from '@sentry-internal/feedback';
 
 export { browserTracingIntegrationShim as browserTracingIntegration, replayIntegrationShim as replayIntegration };

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

@@ -1,17 +1,7 @@
-import {
-  browserTracingIntegrationShim,
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { browserTracingIntegrationShim, feedbackIntegrationShim } from '@sentry-internal/integration-shims';
 
 export * from './index.bundle.base';
 
 export { replayIntegration } from '@sentry-internal/replay';
 
-export {
-  browserTracingIntegrationShim as browserTracingIntegration,
-  feedbackIntegrationShim as feedbackIntegration,
-  feedbackModalIntegrationShim as feedbackModalIntegration,
-  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
-};
+export { browserTracingIntegrationShim as browserTracingIntegration, feedbackIntegrationShim as feedbackIntegration };

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

@@ -15,12 +15,8 @@ export {
   setMeasurement,
 } from '@sentry/core';
 
-export {
-  feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
-  getFeedback,
-} from '@sentry-internal/feedback';
+export { feedbackIntegration } from './feedback';
+export { getFeedback } from '@sentry-internal/feedback';
 
 export {
   browserTracingIntegration,

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

@@ -1,8 +1,4 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
 import { registerSpanErrorInstrumentation } from '@sentry/core';
 
 registerSpanErrorInstrumentation();
@@ -26,10 +22,6 @@ export {
   startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
 
-export {
-  feedbackIntegrationShim as feedbackIntegration,
-  feedbackModalIntegrationShim as feedbackModalIntegration,
-  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
-};
+export { feedbackIntegrationShim as feedbackIntegration };
 
 export { replayIntegration } from '@sentry-internal/replay';

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

@@ -1,9 +1,4 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-  replayIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
 import { registerSpanErrorInstrumentation } from '@sentry/core';
 
 registerSpanErrorInstrumentation();
@@ -27,9 +22,4 @@ export {
   startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
 
-export {
-  feedbackIntegrationShim as feedbackIntegration,
-  feedbackModalIntegrationShim as feedbackModalIntegration,
-  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
-  replayIntegrationShim as replayIntegration,
-};
+export { feedbackIntegrationShim as feedbackIntegration, replayIntegrationShim as replayIntegration };

packages/browser/src/index.bundle.ts

@@ -1,8 +1,6 @@
 import {
   browserTracingIntegrationShim,
   feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
   replayIntegrationShim,
 } from '@sentry-internal/integration-shims';
 
@@ -11,7 +9,5 @@ export * from './index.bundle.base';
 export {
   browserTracingIntegrationShim as browserTracingIntegration,
   feedbackIntegrationShim as feedbackIntegration,
-  feedbackModalIntegrationShim as feedbackModalIntegration,
-  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   replayIntegrationShim as replayIntegration,
 };

packages/browser/src/index.ts

@@ -30,10 +30,9 @@ export type {
 
 export { replayCanvasIntegration } from '@sentry-internal/replay-canvas';
 
+export { feedbackIntegration } from './feedback';
+export { feedbackAsyncIntegration } from './feedbackAsync';
 export {
-  feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
   getFeedback,
   sendFeedback,
 } from '@sentry-internal/feedback';

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

@@ -1,13 +1,12 @@
-import { replayIntegrationShim } from '@sentry-internal/integration-shims';
-import { feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration } from '@sentry/browser';
+import { browserTracingIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import { feedbackIntegration } from '../../src';
 
 import * as FeedbackBundle from '../../src/index.bundle.feedback';
 
 describe('index.bundle.feedback', () => {
   it('has correct exports', () => {
+    expect(FeedbackBundle.browserTracingIntegration).toBe(browserTracingIntegrationShim);
     expect(FeedbackBundle.replayIntegration).toBe(replayIntegrationShim);
     expect(FeedbackBundle.feedbackIntegration).toBe(feedbackIntegration);
-    expect(FeedbackBundle.feedbackModalIntegration).toBe(feedbackModalIntegration);
-    expect(FeedbackBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegration);
   });
 });

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

@@ -1,8 +1,4 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry/browser';
 
 import * as ReplayBundle from '../../src/index.bundle.replay';
@@ -11,7 +7,5 @@ describe('index.bundle.replay', () => {
   it('has correct exports', () => {
     expect(ReplayBundle.replayIntegration).toBe(replayIntegration);
     expect(ReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
-    expect(ReplayBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
-    expect(ReplayBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

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

@@ -1,17 +1,10 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-  replayIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
 
 import * as Bundle from '../../src/index.bundle';
 
 describe('index.bundle', () => {
   it('has correct exports', () => {
     expect(Bundle.replayIntegration).toBe(replayIntegrationShim);
     expect(Bundle.feedbackIntegration).toBe(feedbackIntegrationShim);
-    expect(Bundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
-    expect(Bundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

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

@@ -1,18 +1,10 @@
-import {
-  browserTracingIntegration,
-  feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
-  replayIntegration,
-} from '../../src';
+import { browserTracingIntegration, feedbackIntegration, replayIntegration } from '../../src';
 import * as TracingReplayFeedbackBundle from '../../src/index.bundle.tracing.replay.feedback';
 
 describe('index.bundle.tracing.replay.feedback', () => {
   it('has correct exports', () => {
     expect(TracingReplayFeedbackBundle.replayIntegration).toBe(replayIntegration);
     expect(TracingReplayFeedbackBundle.browserTracingIntegration).toBe(browserTracingIntegration);
     expect(TracingReplayFeedbackBundle.feedbackIntegration).toBe(feedbackIntegration);
-    expect(TracingReplayFeedbackBundle.feedbackModalIntegration).toBe(feedbackModalIntegration);
-    expect(TracingReplayFeedbackBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegration);
   });
 });

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

@@ -1,8 +1,4 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
 
 import { browserTracingIntegration, replayIntegration } from '../../src';
 import * as TracingReplayBundle from '../../src/index.bundle.tracing.replay';
@@ -14,7 +10,5 @@ describe('index.bundle.tracing.replay', () => {
     expect(TracingReplayBundle.browserTracingIntegration).toBe(browserTracingIntegration);
 
     expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
-    expect(TracingReplayBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
-    expect(TracingReplayBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

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

@@ -1,9 +1,4 @@
-import {
-  feedbackIntegrationShim,
-  feedbackModalIntegrationShim,
-  feedbackScreenshotIntegrationShim,
-  replayIntegrationShim,
-} from '@sentry-internal/integration-shims';
+import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
 
 import { browserTracingIntegration } from '../../src';
 import * as TracingBundle from '../../src/index.bundle.tracing';
@@ -13,7 +8,5 @@ describe('index.bundle.tracing', () => {
     expect(TracingBundle.replayIntegration).toBe(replayIntegrationShim);
     expect(TracingBundle.browserTracingIntegration).toBe(browserTracingIntegration);
     expect(TracingBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
-    expect(TracingBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
-    expect(TracingBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

packages/feedback/rollup.bundle.config.mjs

@@ -4,7 +4,7 @@ export default [
   ...makeBundleConfigVariants(
     makeBaseBundleConfig({
       bundleType: 'addon',
-      entrypoints: ['src/index.bundle.ts'],
+      entrypoints: ['src/index.ts'],
       jsVersion: 'es6',
       licenseTitle: '@sentry-internal/feedback',
       outputFileBase: () => 'bundles/feedback',

packages/feedback/src/core/getFeedback.test.ts

@@ -1,6 +1,6 @@
 import { getCurrentScope } from '@sentry/core';
 import { getFeedback } from './getFeedback';
-import { feedbackIntegration } from './integration';
+import { buildFeedbackIntegration } from './integration';
 import { mockSdk } from './mockSdk';
 
 describe('getFeedback', () => {
@@ -25,16 +25,19 @@ describe('getFeedback', () => {
   });
 
   it('works with a client with Feedback', () => {
-    const feedback = feedbackIntegration();
+    const feedbackIntegration = buildFeedbackIntegration({
+      lazyLoadIntegration: jest.fn(),
+    });
 
+    const configuredIntegration = feedbackIntegration({});
     mockSdk({
       sentryOptions: {
-        integrations: [feedback],
+        integrations: [configuredIntegration],
       },
     });
 
     const actual = getFeedback();
     expect(actual).toBeDefined();
-    expect(actual === feedback).toBe(true);
+    expect(actual === configuredIntegration).toBe(true);
   });
 });

packages/feedback/src/core/getFeedback.ts

@@ -1,10 +1,12 @@
 import { getClient } from '@sentry/core';
-import type { feedbackIntegration } from './integration';
+import type { buildFeedbackIntegration } from './integration';
+
+type FeedbackIntegration = ReturnType<typeof buildFeedbackIntegration>;
 
 /**
  * This is a small utility to get a type-safe instance of the Feedback integration.
  */
-export function getFeedback(): ReturnType<typeof feedbackIntegration> | undefined {
+export function getFeedback(): ReturnType<FeedbackIntegration> | undefined {
   const client = getClient();
-  return client && client.getIntegrationByName<ReturnType<typeof feedbackIntegration>>('Feedback');
+  return client && client.getIntegrationByName('Feedback');
 }