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

.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',
+};