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

.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.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.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/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,7 +25,9 @@ describe('getFeedback', () => {
   });
 
   it('works with a client with Feedback', () => {
-    const feedback = feedbackIntegration();
+    const feedback = buildFeedbackIntegration({
+      lazyLoadIntegration: jest.fn(),
+    });
 
     mockSdk({
       sentryOptions: {

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');
 }