feat(feedback): Show feedback widget on device shake

CHANGELOG.md

@@ -8,6 +8,11 @@
 
 ## Unreleased
 
+### Features
+
+- Show feedback widget on device shake ([#5729](https://github.com/getsentry/sentry-react-native/pull/5729))
+  - Use `Sentry.showFeedbackOnShake()` / `Sentry.hideFeedbackOnShake()` or set `feedbackIntegration({ enableShakeToReport: true })`
+
 ### Fixes
 
 - Resolve relative `SOURCEMAP_FILE` paths against the project root in the Xcode build script ([#5730](https://github.com/getsentry/sentry-react-native/pull/5730))

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryTests.m

@@ -1014,7 +1014,7 @@ - (void)testCreateUserWithPartialGeoDataCreatesSentryGeoObject
     NSDictionary *userKeys =
         @{ @"id" : @"456", @"geo" : @ { @"city" : @"New York", @"country_code" : @"US" } };
 
-    NSDictionary *userDataKeys = @{};
+    NSDictionary *userDataKeys = @{ };
 
     SentryUser *user = [RNSentry userFrom:userKeys otherUserKeys:userDataKeys];
 
@@ -1031,9 +1031,9 @@ - (void)testCreateUserWithPartialGeoDataCreatesSentryGeoObject
 
 - (void)testCreateUserWithEmptyGeoDataCreatesSentryGeoObject
 {
-    NSDictionary *userKeys = @{ @"id" : @"789", @"geo" : @ {} };
+    NSDictionary *userKeys = @{ @"id" : @"789", @"geo" : @ { } };
 
-    NSDictionary *userDataKeys = @{};
+    NSDictionary *userDataKeys = @{ };
 
     SentryUser *user = [RNSentry userFrom:userKeys otherUserKeys:userDataKeys];
 
@@ -1052,7 +1052,7 @@ - (void)testCreateUserWithoutGeoDataDoesNotCreateGeoObject
 {
     NSDictionary *userKeys = @{ @"id" : @"999", @"email" : @"test@example.com" };
 
-    NSDictionary *userDataKeys = @{};
+    NSDictionary *userDataKeys = @{ };
 
     SentryUser *user = [RNSentry userFrom:userKeys otherUserKeys:userDataKeys];
 

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryUserTests.m

@@ -51,9 +51,9 @@ - (void)testNullUser
 - (void)testEmptyUser
 {
     SentryUser *expected = [[SentryUser alloc] init];
-    [expected setData:@{}];
+    [expected setData:@{ }];
 
-    SentryUser *actual = [RNSentry userFrom:@{} otherUserKeys:@{}];
+    SentryUser *actual = [RNSentry userFrom:@{ } otherUserKeys:@{ }];
     XCTAssertTrue([actual isEqualToUser:expected]);
 }
 
@@ -63,9 +63,9 @@ - (void)testInvalidUser
 
     SentryUser *actual = [RNSentry userFrom:@{
         @"id" : @123,
-        @"ip_address" : @ {},
-        @"email" : @ {},
-        @"username" : @ {},
+        @"ip_address" : @ { },
+        @"email" : @ { },
+        @"username" : @ { },
     }
                               otherUserKeys:nil];
 
@@ -79,9 +79,9 @@ - (void)testPartiallyInvalidUser
 
     SentryUser *actual = [RNSentry userFrom:@{
         @"id" : @"123",
-        @"ip_address" : @ {},
-        @"email" : @ {},
-        @"username" : @ {},
+        @"ip_address" : @ { },
+        @"email" : @ { },
+        @"username" : @ { },
     }
                               otherUserKeys:nil];
 
@@ -156,7 +156,7 @@ - (void)testUserWithEmptyGeo
     SentryGeo *expectedGeo = [SentryGeo alloc];
     [expected setGeo:expectedGeo];
 
-    SentryUser *actual = [RNSentry userFrom:@{ @"id" : @"123", @"geo" : @ {} } otherUserKeys:nil];
+    SentryUser *actual = [RNSentry userFrom:@{ @"id" : @"123", @"geo" : @ { } } otherUserKeys:nil];
 
     XCTAssertTrue([actual isEqualToUser:expected]);
 }

packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java

@@ -46,6 +46,7 @@
 import io.sentry.android.core.InternalSentrySdk;
 import io.sentry.android.core.SentryAndroidDateProvider;
 import io.sentry.android.core.SentryAndroidOptions;
+import io.sentry.android.core.SentryShakeDetector;
 import io.sentry.android.core.ViewHierarchyEventProcessor;
 import io.sentry.android.core.internal.debugmeta.AssetsDebugMetaLoader;
 import io.sentry.android.core.internal.util.SentryFrameMetricsCollector;
@@ -122,6 +123,10 @@ public class RNSentryModuleImpl {
 
   private final @NotNull Runnable emitNewFrameEvent;
 
+  private static final String ON_SHAKE_EVENT = "rn_sentry_on_shake";
+  private @Nullable SentryShakeDetector shakeDetector;
+  private int shakeListenerCount = 0;
+
   /** Max trace file size in bytes. */
   private long maxTraceFileSize = 5 * 1024 * 1024;
 
@@ -192,16 +197,61 @@ public void crash() {
   }
 
   public void addListener(String eventType) {
+    if (ON_SHAKE_EVENT.equals(eventType)) {
+      shakeListenerCount++;
+      if (shakeListenerCount == 1) {
+        startShakeDetection();
+      }
+      return;
+    }
     // Is must be defined otherwise the generated interface from TS won't be
     // fulfilled
     logger.log(SentryLevel.ERROR, "addListener of NativeEventEmitter can't be used on Android!");
   }
 
   public void removeListeners(double id) {
-    // Is must be defined otherwise the generated interface from TS won't be
-    // fulfilled
-    logger.log(
-        SentryLevel.ERROR, "removeListeners of NativeEventEmitter can't be used on Android!");
+    shakeListenerCount = Math.max(0, shakeListenerCount - (int) id);
+    if (shakeListenerCount == 0) {
+      stopShakeDetection();
+    }
+  }
+
+  private void startShakeDetection() {
+    if (shakeDetector != null) {
+      return;
+    }
+
+    final ReactApplicationContext context = getReactApplicationContext();
+    shakeDetector = new SentryShakeDetector(logger);
+    shakeDetector.start(
+        context,
+        () -> {
+          final ReactApplicationContext ctx = getReactApplicationContext();
+          if (ctx.hasActiveReactInstance()) {
+            ctx.getJSModule(
+                    com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter
+                        .class)
+                .emit(ON_SHAKE_EVENT, null);
+          }
+        });
+  }
+
+  private void stopShakeDetection() {
+    if (shakeDetector != null) {
+      shakeDetector.stop();
+      shakeDetector = null;
+    }
+  }
+
+  public void enableShakeDetection() {
+    // On Android, shake detection is started via addListener. This method is a no-op
+    // because it exists to satisfy the cross-platform spec (on iOS, the NativeEventEmitter
+    // addListener does not reliably dispatch to native, so an explicit call is needed).
+  }
+
+  public void disableShakeDetection() {
+    // On Android, shake detection is stopped via removeListeners. This method is a no-op
+    // for the same reason as enableShakeDetection.
   }
 
   public void fetchModules(Promise promise) {

packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java

@@ -212,4 +212,14 @@ public void popTimeToDisplayFor(String key, Promise promise) {
   public boolean setActiveSpanId(String spanId) {
     return this.impl.setActiveSpanId(spanId);
   }
+
+  @Override
+  public void enableShakeDetection() {
+    this.impl.enableShakeDetection();
+  }
+
+  @Override
+  public void disableShakeDetection() {
+    this.impl.disableShakeDetection();
+  }
 }

packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java

@@ -212,4 +212,14 @@ public void popTimeToDisplayFor(String key, Promise promise) {
   public boolean setActiveSpanId(String spanId) {
     return this.impl.setActiveSpanId(spanId);
   }
+
+  @ReactMethod
+  public void enableShakeDetection() {
+    this.impl.enableShakeDetection();
+  }
+
+  @ReactMethod
+  public void disableShakeDetection() {
+    this.impl.disableShakeDetection();
+  }
 }

packages/core/ios/RNSentry.mm

@@ -39,6 +39,7 @@
 
 #import "RNSentryDependencyContainer.h"
 #import "RNSentryEvents.h"
+#import <Sentry/SentryShakeDetector.h>
 
 #if SENTRY_TARGET_REPLAY_SUPPORTED
 #    import "RNSentryReplay.h"
@@ -292,9 +293,42 @@ - (void)stopObserving
     hasListeners = NO;
 }
 
+- (void)handleShakeDetected
+{
+    if (hasListeners) {
+        [self sendEventWithName:RNSentryOnShakeEvent body:@{ }];
+    }
+}
+
+// Explicit method to start shake detection.
+// NativeEventEmitter.addListener does not reliably dispatch to native addListener: on iOS
+// with New Architecture (TurboModules), so we expose explicit enable/disable methods
+// that JS calls directly from startShakeListener/stopShakeListener.
+RCT_EXPORT_METHOD(enableShakeDetection)
+{
+    // Remove any existing observer first to avoid duplicate notifications
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                                    name:SentryShakeDetectedNotification
+                                                  object:nil];
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleShakeDetected)
+                                                 name:SentryShakeDetectedNotification
+                                               object:nil];
+    [SentryShakeDetector enable];
+    hasListeners = YES;
+}
+
+RCT_EXPORT_METHOD(disableShakeDetection)
+{
+    [SentryShakeDetector disable];
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                                    name:SentryShakeDetectedNotification
+                                                  object:nil];
+}
+
 - (NSArray<NSString *> *)supportedEvents
 {
-    return @[ RNSentryNewFrameEvent ];
+    return @[ RNSentryNewFrameEvent, RNSentryOnShakeEvent ];
 }
 
 RCT_EXPORT_METHOD(

packages/core/ios/RNSentryEvents.h

@@ -1,3 +1,4 @@
 #import <Foundation/Foundation.h>
 
 extern NSString *const RNSentryNewFrameEvent;
+extern NSString *const RNSentryOnShakeEvent;

packages/core/ios/RNSentryEvents.m

@@ -1,3 +1,4 @@
 #import "RNSentryEvents.h"
 
 NSString *const RNSentryNewFrameEvent = @"rn_sentry_new_frame";
+NSString *const RNSentryOnShakeEvent = @"rn_sentry_on_shake";

packages/core/ios/RNSentryReplay.mm

@@ -23,7 +23,7 @@ + (BOOL)updateOptions:(NSMutableDictionary *)options
     }
 
     NSLog(@"Setting up session replay");
-    NSDictionary *replayOptions = options[@"mobileReplayOptions"] ?: @{};
+    NSDictionary *replayOptions = options[@"mobileReplayOptions"] ?: @{ };
 
     NSString *qualityString = options[@"replaysSessionQuality"];
 

packages/core/ios/RNSentrySDK.m

@@ -60,7 +60,7 @@ + (void)start:(NSString *)path configureOptions:(void (^)(SentryOptions *options
     if (options == nil) {
         // Fallback in case that options file could not be parsed.
         NSError *fallbackError = nil;
-        options = [PrivateSentrySDKOnly optionsWithDictionary:@{} didFailWithError:&fallbackError];
+        options = [PrivateSentrySDKOnly optionsWithDictionary:@{ } didFailWithError:&fallbackError];
         if (fallbackError != nil) {
             NSLog(@"[RNSentry] Failed to create fallback options with error: %@",
                 fallbackError.localizedDescription);

packages/core/src/js/NativeRNSentry.ts

@@ -54,6 +54,8 @@ export interface Spec extends TurboModule {
   popTimeToDisplayFor(key: string): Promise<number | undefined | null>;
   setActiveSpanId(spanId: string): boolean;
   encodeToBase64(data: number[]): Promise<string | undefined | null>;
+  enableShakeDetection(): void;
+  disableShakeDetection(): void;
 }
 
 export type NativeStackFrame = {

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

@@ -1,6 +1,7 @@
 import { debug } from '@sentry/core';
 import { isWeb  } from '../utils/environment';
 import { lazyLoadAutoInjectFeedbackButtonIntegration,lazyLoadAutoInjectFeedbackIntegration, lazyLoadAutoInjectScreenshotButtonIntegration } from './lazy';
+import { startShakeListener, stopShakeListener } from './ShakeToReportBug';
 
 export const PULL_DOWN_CLOSE_THRESHOLD = 200;
 export const SLIDE_ANIMATION_DURATION = 200;
@@ -132,4 +133,13 @@ const resetScreenshotButtonManager = (): void => {
   ScreenshotButtonManager.reset();
 };
 
-export { showFeedbackButton, hideFeedbackButton, showFeedbackWidget, showScreenshotButton, hideScreenshotButton, resetFeedbackButtonManager, resetFeedbackWidgetManager, resetScreenshotButtonManager };
+const showFeedbackOnShake = (): void => {
+  lazyLoadAutoInjectFeedbackIntegration();
+  startShakeListener(showFeedbackWidget);
+};
+
+const hideFeedbackOnShake = (): void => {
+  stopShakeListener();
+};
+
+export { showFeedbackButton, hideFeedbackButton, showFeedbackWidget, showFeedbackOnShake, hideFeedbackOnShake, showScreenshotButton, hideScreenshotButton, resetFeedbackButtonManager, resetFeedbackWidgetManager, resetScreenshotButtonManager };

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

@@ -13,10 +13,12 @@ import {
   FeedbackWidgetManager,
   PULL_DOWN_CLOSE_THRESHOLD,
   ScreenshotButtonManager,
+  showFeedbackWidget,
   SLIDE_ANIMATION_DURATION,
 } from './FeedbackWidgetManager';
-import { getFeedbackButtonOptions, getFeedbackOptions, getScreenshotButtonOptions } from './integration';
+import { getFeedbackButtonOptions, getFeedbackOptions, getScreenshotButtonOptions, isShakeToReportEnabled } from './integration';
 import { ScreenshotButton } from './ScreenshotButton';
+import { startShakeListener, stopShakeListener } from './ShakeToReportBug';
 import { isModalSupported, isNativeDriverSupportedForColorAnimations } from './utils';
 
 const useNativeDriverForColorAnimations = isNativeDriverSupportedForColorAnimations();
@@ -92,21 +94,27 @@ export class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProvid
   }
 
   /**
-   * Add a listener to the theme change event.
+   * Add a listener to the theme change event and start shake detection if configured.
    */
   public componentDidMount(): void {
     this._themeListener = Appearance.addChangeListener(() => {
       this.forceUpdate();
     });
+
+    if (isShakeToReportEnabled()) {
+      startShakeListener(showFeedbackWidget);
+    }
   }
 
   /**
-   * Clean up the theme listener.
+   * Clean up the theme listener and stop shake detection.
    */
   public componentWillUnmount(): void {
     if (this._themeListener) {
       this._themeListener.remove();
     }
+
+    stopShakeListener();
   }
 
   /**