ref(feedback): Create stub integrations for feedback modal & screenshot integrations (#11342)

We're planning to split up the modal and screenshot functionality of the
feedback widget into their own integrations, so they can be loaded async
if folks want to do that. Loading async would have the benefit that the
code is only needed when the user interacts with the feedback widget,
and we're actually going to render the modal whether that be with or
without the screenshot input/editor.

This PR sets up some stubs for where the code will live. There's a bunch
of boilerplate for the new integrations inside packages/* and also lots
of exports to setup so that the stubs are available to be imported into
apps.

Currently if someone wanted to setup feedback with screenshots they
would be doing:
```javascript
import * as Sentry from "@sentry/browser";
import {feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration} from '@sentry-internal/feedback';

...
  integrations: [
    feedbackIntegration(),
    feedbackModalIntegration(),
    feedbackScreenshotIntegration(),
  ]
```

**After this PR people will keep doing that.**

In a followup PR we'll move the implementation from
`@sentry-internal/feedback` into the new
`@sentry-internal/feedback-modal` and
`@sentry-internal/feedback-screenshot`, so people will be able to do
this instead:
```diff
  import * as Sentry from "@sentry/browser";
- import {feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration} from '@sentry-internal/feedback';
+ import {feedbackIntegration} from '@sentry-internal/feedback';
+ import {feedbackModalIntegration} from '@sentry-internal/feedback-modal';
+ import {feedbackScreenshotIntegration} from '@sentry-internal/feedback-screenshot';

  ...
    integrations: [
      feedbackIntegration(),
      feedbackModalIntegration(),
      feedbackScreenshotIntegration(),
    ]
```
Equally valid, is people will be able to import everything from
`@sentry/browser` too, ie `import * as Sentry from "@sentry/browser";`
with `Sentry.feedbackScreenshotIntegration()`

Related to #11435

Author: ryan953

.craft.yml

@@ -32,7 +32,15 @@ targets:
   - name: npm
     id: '@sentry-internal/feedback'
     includeNames: /^sentry-internal-feedback-\d.*\.tgz$/
-  ## 1.8 ReplayCanvas package (browser only)
+  ## 1.8 Feedback Modal package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-modal'
+    includeNames: /^sentry-internal-feedback-modal-\d.*\.tgz$/
+  ## 1.9 Feedback Screenshot package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-screenshot'
+    includeNames: /^sentry-internal-feedback-screenshot-\d.*\.tgz$/
+  ## 1.10 ReplayCanvas package (browser only)
   - name: npm
     id: '@sentry-internal/replay-canvas'
     includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/

.github/workflows/build.yml

@@ -105,6 +105,8 @@ jobs:
               - 'packages/replay/**'
               - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
+              - 'packages/feedback-modal/**'
+              - 'packages/feedback-screenshot/**'
               - 'packages/wasm/**'
             browser_integration:
               - *shared

CODEOWNERS

@@ -2,4 +2,6 @@ packages/replay                                   @getsentry/replay-sdk-web
 packages/replay-worker                            @getsentry/replay-sdk-web
 packages/replay-canvas                            @getsentry/replay-sdk-web
 packages/feedback                                 @getsentry/replay-sdk-web
+packages/feedback-modal                           @getsentry/replay-sdk-web
+packages/feedback-screenshot                      @getsentry/replay-sdk-web
 dev-packages/browser-integration-tests/suites/replay  @getsentry/replay-sdk-web

package.json

@@ -56,6 +56,8 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
+    "packages/feedback-modal",
+    "packages/feedback-screenshot",
     "packages/gatsby",
     "packages/google-cloud-serverless",
     "packages/integration-shims",

packages/browser/package.json

@@ -43,6 +43,8 @@
   },
   "dependencies": {
     "@sentry-internal/browser-utils": "8.0.0-alpha.9",
+    "@sentry-internal/feedback-modal": "8.0.0-alpha.9",
+    "@sentry-internal/feedback-screenshot": "8.0.0-alpha.9",
     "@sentry-internal/feedback": "8.0.0-alpha.9",
     "@sentry-internal/replay": "8.0.0-alpha.9",
     "@sentry-internal/replay-canvas": "8.0.0-alpha.9",

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

@@ -1,5 +1,7 @@
 // This is exported so the loader does not fail when switching off Replay/Tracing
 import { feedbackIntegration, getFeedback } from '@sentry-internal/feedback';
+import { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+import { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
@@ -12,6 +14,8 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   replayIntegrationShim as replayIntegration,
   feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
   getFeedback,
 };
 // 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

@@ -3,6 +3,8 @@ import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
   feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
 } from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry-internal/replay';
 
@@ -12,5 +14,7 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   replayIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
 };
 // 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

@@ -4,6 +4,8 @@ import {
   startBrowserTracingPageLoadSpan,
 } from '@sentry-internal/browser-utils';
 import { feedbackIntegration, getFeedback } from '@sentry-internal/feedback';
+import { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+import { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 import { replayIntegration } from '@sentry-internal/replay';
 import { addTracingExtensions } from '@sentry/core';
 
@@ -23,6 +25,8 @@ export {
 
 export {
   feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
   replayIntegration,
   browserTracingIntegration,
   addTracingExtensions,

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

@@ -3,7 +3,11 @@ import {
   startBrowserTracingNavigationSpan,
   startBrowserTracingPageLoadSpan,
 } from '@sentry-internal/browser-utils';
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry-internal/replay';
 import { addTracingExtensions } from '@sentry/core';
 
@@ -24,6 +28,8 @@ export {
 export {
   replayIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   browserTracingIntegration,
   addTracingExtensions,
   startBrowserTracingNavigationSpan,

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

@@ -4,7 +4,12 @@ import {
   startBrowserTracingPageLoadSpan,
 } from '@sentry-internal/browser-utils';
 // This is exported so the loader does not fail when switching off Replay
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { addTracingExtensions } from '@sentry/core';
 
 // We are patching the global object with our hub extension methods
@@ -23,6 +28,8 @@ export {
 
 export {
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   replayIntegrationShim as replayIntegration,
   browserTracingIntegration,
   addTracingExtensions,

packages/browser/src/index.bundle.ts

@@ -3,6 +3,8 @@ import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
   feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
   replayIntegrationShim,
 } from '@sentry-internal/integration-shims';
 
@@ -11,6 +13,8 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   browserTracingIntegrationShim as browserTracingIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   replayIntegrationShim as replayIntegration,
 };
 // 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

@@ -35,6 +35,8 @@ export {
   getFeedback,
   sendFeedback,
 } from '@sentry-internal/feedback';
+export { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+export { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 
 export {
   defaultRequestInstrumentationOptions,

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

@@ -1,11 +1,13 @@
 import { replayIntegrationShim } from '@sentry-internal/integration-shims';
-import { feedbackIntegration } from '@sentry/browser';
+import { feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration } from '@sentry/browser';
 
-import * as TracingReplayBundle from '../../src/index.bundle.feedback';
+import * as FeedbackBundle from '../../src/index.bundle.feedback';
 
 describe('index.bundle.feedback', () => {
   it('has correct exports', () => {
-    expect(TracingReplayBundle.replayIntegration).toBe(replayIntegrationShim);
-    expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegration);
+    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,11 +1,17 @@
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry/browser';
 
-import * as TracingReplayBundle from '../../src/index.bundle.replay';
+import * as ReplayBundle from '../../src/index.bundle.replay';
 
 describe('index.bundle.replay', () => {
   it('has correct exports', () => {
-    expect(TracingReplayBundle.replayIntegration).toBe(replayIntegration);
-    expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    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,10 +1,17 @@
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 
-import * as TracingBundle from '../../src/index.bundle';
+import * as Bundle from '../../src/index.bundle';
 
 describe('index.bundle', () => {
   it('has correct exports', () => {
-    expect(TracingBundle.replayIntegration).toBe(replayIntegrationShim);
-    expect(TracingBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    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,5 +1,10 @@
 import { browserTracingIntegration } from '@sentry-internal/browser-utils';
-import { feedbackIntegration, replayIntegration } from '@sentry/browser';
+import {
+  feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
+  replayIntegration,
+} from '@sentry/browser';
 
 import * as TracingReplayFeedbackBundle from '../../src/index.bundle.tracing.replay.feedback';
 
@@ -8,5 +13,7 @@ describe('index.bundle.tracing.replay.feedback', () => {
     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,5 +1,9 @@
 import { browserTracingIntegration } from '@sentry-internal/browser-utils';
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry/browser';
 
 import * as TracingReplayBundle from '../../src/index.bundle.tracing.replay';
@@ -11,5 +15,7 @@ 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,5 +1,10 @@
 import { browserTracingIntegration } from '@sentry-internal/browser-utils';
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 
 import * as TracingBundle from '../../src/index.bundle.tracing';
 
@@ -8,5 +13,7 @@ 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-modal/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+build/

packages/feedback-modal/.eslintrc.js

@@ -0,0 +1,16 @@
+// 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'],
+      },
+    },
+  ],
+};

packages/feedback-modal/.gitignore

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

packages/feedback-modal/LICENSE

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

@@ -0,0 +1,14 @@
+<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 integration supports our browser feedback SDK allowing us to code-split heavy UI components as needed.
+
+For the primary Feedback Integration see
+[Sentry Feedback SDK](https://github.com/getsentry/sentry-javascript/tree/develop/packages/feedback)
+
+Note: This package is only meant to be used internally.

packages/feedback-modal/jest.config.js

@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};