feat(feedback): Add integrations to client to allow for usage tracking (#4580)

Author: krystofwoldrich

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -18,6 +18,7 @@ import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackWidget.styles';
 import type { FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, ImagePickerConfiguration } from './FeedbackWidget.types';
+import { lazyLoadFeedbackIntegration } from './lazy';
 import { base64ToUint8Array, feedbackAlertDialog, isValidEmail  } from './utils';
 
 /**
@@ -59,6 +60,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
       attachment: FeedbackWidget._savedState.attachment || undefined,
       attachmentUri: FeedbackWidget._savedState.attachmentUri || undefined,
     };
+
+    lazyLoadFeedbackIntegration();
   }
 
   public handleFeedbackSubmit: () => void = () => {

packages/core/src/js/feedback/FeedbackWidgetManager.tsx

@@ -8,6 +8,7 @@ import { FeedbackWidget } from './FeedbackWidget';
 import { modalSheetContainer, modalWrapper, topSpacer } from './FeedbackWidget.styles';
 import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 import { getFeedbackOptions } from './integration';
+import { lazyLoadAutoInjectFeedbackIntegration } from './lazy';
 import { isModalSupported } from './utils';
 
 const PULL_DOWN_CLOSE_THRESHOLD = 200;
@@ -224,6 +225,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
 }
 
 const showFeedbackWidget = (): void => {
+  lazyLoadAutoInjectFeedbackIntegration();
   FeedbackWidgetManager.show();
 };
 

packages/core/src/js/feedback/integration.ts

@@ -1,22 +1,27 @@
-import type { Integration } from '@sentry/core';
+import { type Integration, getClient } from '@sentry/core';
 
 import type { FeedbackWidgetProps } from './FeedbackWidget.types';
 
-export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback';
+export const MOBILE_FEEDBACK_INTEGRATION_NAME = 'MobileFeedback';
 
 type FeedbackIntegration = Integration & {
   options: Partial<FeedbackWidgetProps>;
 };
 
-let savedOptions: Partial<FeedbackWidgetProps> = {};
-
 export const feedbackIntegration = (initOptions: FeedbackWidgetProps = {}): FeedbackIntegration => {
-  savedOptions = initOptions;
-
   return {
-    name: FEEDBACK_FORM_INTEGRATION_NAME,
-    options: savedOptions,
+    name: MOBILE_FEEDBACK_INTEGRATION_NAME,
+    options: initOptions,
   };
 };
 
-export const getFeedbackOptions = (): Partial<FeedbackWidgetProps> => savedOptions;
+export const getFeedbackOptions = (): Partial<FeedbackWidgetProps> => {
+  const integration = getClient()?.getIntegrationByName<ReturnType<typeof feedbackIntegration>>(
+    MOBILE_FEEDBACK_INTEGRATION_NAME,
+  );
+  if (!integration) {
+    return {};
+  }
+
+  return integration.options;
+};

packages/core/src/js/feedback/lazy.ts

@@ -0,0 +1,27 @@
+import { getClient } from '@sentry/core';
+
+import { feedbackIntegration, MOBILE_FEEDBACK_INTEGRATION_NAME } from './integration';
+
+/**
+ * Lazy loads the feedback integration if it is not already loaded.
+ */
+export function lazyLoadFeedbackIntegration(): void {
+  const integration = getClient()?.getIntegrationByName(MOBILE_FEEDBACK_INTEGRATION_NAME);
+  if (!integration) {
+    // Lazy load the integration to track usage
+    getClient()?.addIntegration(feedbackIntegration());
+  }
+}
+
+export const AUTO_INJECT_FEEDBACK_INTEGRATION_NAME = 'AutoInjectMobileFeedback';
+
+/**
+ * Lazy loads the auto inject feedback integration if it is not already loaded.
+ */
+export function lazyLoadAutoInjectFeedbackIntegration(): void {
+  const integration = getClient()?.getIntegrationByName(AUTO_INJECT_FEEDBACK_INTEGRATION_NAME);
+  if (!integration) {
+    // Lazy load the integration to track usage
+    getClient()?.addIntegration({ name: AUTO_INJECT_FEEDBACK_INTEGRATION_NAME });
+  }
+}

packages/core/test/feedback/FeedbackWidget.test.tsx

@@ -1,10 +1,12 @@
-import { captureFeedback } from '@sentry/core';
+import { captureFeedback, getClient, setCurrentClient } from '@sentry/core';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
 import { Alert } from 'react-native';
 
 import { FeedbackWidget } from '../../src/js/feedback/FeedbackWidget';
 import type { FeedbackWidgetProps, FeedbackWidgetStyles, ImagePicker } from '../../src/js/feedback/FeedbackWidget.types';
+import { MOBILE_FEEDBACK_INTEGRATION_NAME } from '../../src/js/feedback/integration';
+import { getDefaultTestClientOptions,TestClient } from '../mocks/client';
 
 const mockOnFormClose = jest.fn();
 const mockOnAddScreenshot = jest.fn();
@@ -369,7 +371,7 @@ describe('FeedbackWidget', () => {
     expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');
     expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('This is a feedback message.');
   });
-  
+
   it('onCancel the input is saved and restored when the form reopens', async () => {
     const { getByPlaceholderText, getByText, unmount } = render(<FeedbackWidget {...defaultProps} />);
 
@@ -401,4 +403,14 @@ describe('FeedbackWidget', () => {
     expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');
     expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('');
   });
+
+  it('lazyLoadFeedbackIntegration is called when the FeedbackWidget is rendered', () => {
+    const client = new TestClient(getDefaultTestClientOptions());
+    setCurrentClient(client);
+    client.init();
+
+    render(<FeedbackWidget {...defaultProps} />);
+
+    expect(getClient().getIntegrationByName(MOBILE_FEEDBACK_INTEGRATION_NAME)).toBeDefined();
+  });
 });

packages/core/test/feedback/FeedbackWidgetManager.test.tsx

@@ -1,12 +1,14 @@
-import { logger } from '@sentry/core';
+import { getClient, logger, setCurrentClient } from '@sentry/core';
 import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import { defaultConfiguration } from '../../src/js/feedback/defaults';
 import { FeedbackWidgetProvider, resetFeedbackWidgetManager, showFeedbackWidget } from '../../src/js/feedback/FeedbackWidgetManager';
 import { feedbackIntegration } from '../../src/js/feedback/integration';
+import { AUTO_INJECT_FEEDBACK_INTEGRATION_NAME } from '../../src/js/feedback/lazy';
 import { isModalSupported } from '../../src/js/feedback/utils';
+import { getDefaultTestClientOptions, TestClient } from '../mocks/client';
 
 jest.mock('../../src/js/feedback/utils', () => ({
   isModalSupported: jest.fn(),
@@ -23,6 +25,9 @@ beforeEach(() => {
 describe('FeedbackWidgetManager', () => {
 
   beforeEach(() => {
+    const client = new TestClient(getDefaultTestClientOptions());
+    setCurrentClient(client);
+    client.init();
     consoleWarnSpy.mockReset();
     resetFeedbackWidgetManager();
   });
@@ -72,10 +77,11 @@ describe('FeedbackWidgetManager', () => {
       </FeedbackWidgetProvider>
     );
 
-    feedbackIntegration({
+    const integration = feedbackIntegration({
       messagePlaceholder: 'Custom Message Placeholder',
       submitButtonLabel: 'Custom Submit Button',
     });
+    getClient()?.addIntegration(integration);
 
     showFeedbackWidget();
 
@@ -91,9 +97,10 @@ describe('FeedbackWidgetManager', () => {
       </FeedbackWidgetProvider>
     );
 
-    feedbackIntegration({
+    const integration = feedbackIntegration({
       submitButtonLabel: 'Custom Submit Button',
-    }),
+    });
+    getClient()?.addIntegration(integration);
 
     showFeedbackWidget();
 
@@ -123,4 +130,12 @@ describe('FeedbackWidgetManager', () => {
 
     expect(consoleWarnSpy).not.toHaveBeenCalled();
   });
+  
+  it('showFeedbackWidget adds the feedbackIntegration to the client', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+
+    showFeedbackWidget();
+
+    expect(getClient().getIntegrationByName(AUTO_INJECT_FEEDBACK_INTEGRATION_NAME)).toBeDefined();
+  });
 });