feat(feedback): Add warning when auto injected widget can't be shown (#4578)

Author: krystofwoldrich

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

@@ -22,17 +22,33 @@ class FeedbackWidgetManager {
     this._setVisibility = setVisibility;
   }
 
+  /**
+   * For testing purposes only.
+   */
+  public static reset(): void {
+    this._isVisible = false;
+    this._setVisibility = undefined;
+  }
+
   public static show(): void {
     if (this._setVisibility) {
       this._isVisible = true;
       this._setVisibility(true);
+    } else {
+      // This message should be always shown otherwise it's not possible to use the widget.
+      // eslint-disable-next-line no-console
+      console.warn('[Sentry] FeedbackWidget requires `Sentry.wrap(RootComponent)` to be called before `showFeedbackWidget()`.');
     }
   }
 
   public static hide(): void {
     if (this._setVisibility) {
       this._isVisible = false;
       this._setVisibility(false);
+    } else {
+      // This message should be always shown otherwise it's not possible to use the widget.
+      // eslint-disable-next-line no-console
+      console.warn('[Sentry] FeedbackWidget requires `Sentry.wrap(RootComponent)` before interacting with the widget.');
     }
   }
 
@@ -211,4 +227,8 @@ const showFeedbackWidget = (): void => {
   FeedbackWidgetManager.show();
 };
 
-export { showFeedbackWidget, FeedbackWidgetProvider };
+const resetFeedbackWidgetManager = (): void => {
+  FeedbackWidgetManager.reset();
+};
+
+export { showFeedbackWidget, FeedbackWidgetProvider, resetFeedbackWidgetManager };

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

@@ -4,21 +4,29 @@ import * as React from 'react';
 import { Text } from 'react-native';
 
 import { defaultConfiguration } from '../../src/js/feedback/defaults';
-import { FeedbackWidgetProvider, showFeedbackWidget } from '../../src/js/feedback/FeedbackWidgetManager';
+import { FeedbackWidgetProvider, resetFeedbackWidgetManager, showFeedbackWidget } from '../../src/js/feedback/FeedbackWidgetManager';
 import { feedbackIntegration } from '../../src/js/feedback/integration';
 import { isModalSupported } from '../../src/js/feedback/utils';
 
 jest.mock('../../src/js/feedback/utils', () => ({
   isModalSupported: jest.fn(),
 }));
 
+const consoleWarnSpy = jest.spyOn(console, 'warn');
+
 const mockedIsModalSupported = isModalSupported as jest.MockedFunction<typeof isModalSupported>;
 
 beforeEach(() => {
   logger.error = jest.fn();
 });
 
 describe('FeedbackWidgetManager', () => {
+
+  beforeEach(() => {
+    consoleWarnSpy.mockReset();
+    resetFeedbackWidgetManager();
+  });
+
   it('showFeedbackWidget displays the form when FeedbackWidgetProvider is used', () => {
     mockedIsModalSupported.mockReturnValue(true);
     const { getByText, getByTestId } = render(
@@ -93,4 +101,26 @@ describe('FeedbackWidgetManager', () => {
     expect(getByText('Custom Submit Button')).toBeTruthy(); // overridden value
     expect(getByPlaceholderText(defaultConfiguration.messagePlaceholder)).toBeTruthy(); // default configuration value
   });
+
+  it('showFeedbackWidget warns about missing feedback provider', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+
+    showFeedbackWidget();
+
+    expect(consoleWarnSpy).toHaveBeenLastCalledWith('[Sentry] FeedbackWidget requires `Sentry.wrap(RootComponent)` to be called before `showFeedbackWidget()`.');
+  });
+
+  it('showFeedbackWidget does not warn about missing feedback provider when FeedbackWidgetProvider is used', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+
+    render(
+      <FeedbackWidgetProvider>
+        <Text>App Components</Text>
+      </FeedbackWidgetProvider>
+    );
+
+    showFeedbackWidget();
+
+    expect(consoleWarnSpy).not.toHaveBeenCalled();
+  });
 });