internal(web): add sdk name for native js errors (#3525)

* Add beforeSend to change sdk name in JS

* Add beforeSend to js

* Review

* Cleanup

* Update factory for creating JsSdkInfo

Author: buenaflor

CHANGELOG.md

@@ -21,6 +21,12 @@
   - [changelog](https://github.com/getsentry/sentry-java/blob/main/CHANGELOG.md#8330)
   - [diff](https://github.com/getsentry/sentry-java/compare/8.32.0...8.33.0)
 
+<summary><b>Internal Changes</b></summary>
+
+- Add `sentry.javascript.browser.flutter` sdk name for native js errors ([#3525](https://github.com/getsentry/sentry-dart/pull/3525))
+
+</details>
+
 ## 9.13.0
 
 ### Features

packages/flutter/lib/src/web/web_sentry_js_binding.dart

@@ -5,6 +5,9 @@ import 'package:meta/meta.dart';
 
 import 'sentry_js_binding.dart';
 
+@visibleForTesting
+const String jsSdkName = 'sentry.javascript.browser.flutter';
+
 SentryJsBinding createJsBinding() {
   return WebSentryJsBinding();
 }
@@ -26,11 +29,18 @@ class WebSentryJsBinding implements SentryJsBinding {
       options['defaultIntegrations'] = options['defaultIntegrations']
           .map((String integration) => _createIntegration(integration));
     }
-    _init(options.jsify());
+    final jsOptions = options.jsify() as JSObject;
+    jsOptions['beforeSend'] = _beforeSend.toJS;
+    _init(jsOptions);
     _client = SentryJsClient();
     _options = _client?.getOptions();
   }
 
+  static _JsErrorEvent? _beforeSend(_JsErrorEvent event, JSAny? _) {
+    (event.sdk ??= _JsSdkInfo()).name = jsSdkName.toJS;
+    return event;
+  }
+
   @override
   void updateSession({int? errors, String? status}) {
     final isolationScope = SentryJsIsolationScope();
@@ -215,3 +225,16 @@ external JSObject _dedupeIntegration();
 @JS('globalThis')
 @internal
 external JSObject get globalThis;
+
+@JS()
+extension type _JsErrorEvent._(JSObject _) implements JSObject {
+  external _JsSdkInfo? get sdk;
+  external set sdk(_JsSdkInfo? value);
+}
+
+@JS()
+extension type _JsSdkInfo._(JSObject _) implements JSObject {
+  external set name(JSString value);
+
+  factory _JsSdkInfo() => _JsSdkInfo._(JSObject());
+}

packages/flutter/test/web/web_sentry_js_binding_test.dart

@@ -1,6 +1,7 @@
 @TestOn('browser')
 library;
 
+import 'dart:async';
 import 'dart:js_interop';
 import 'dart:js_interop_unsafe';
 
@@ -36,6 +37,94 @@ void main() {
       expect(firstResult, cachedResult);
       expect(secondResult, cachedResult);
     });
+
+    test('sets the JS SDK name for native JS errors', () async {
+      final sut = await fixture.getSut();
+      sut.init({'dsn': fakeDsn});
+
+      const expectedMessage = 'native js captureException error';
+      final client = _getClient();
+      if (client == null) {
+        throw StateError('Sentry client is not registered');
+      }
+
+      final interceptedEvent = Completer<Map<dynamic, dynamic>>();
+      void completeFailure(String message) {
+        if (!interceptedEvent.isCompleted) {
+          interceptedEvent.completeError(StateError(message));
+        }
+      }
+
+      final JSFunction beforeSendEventCallback = ((JSAny? event, JSAny? _) {
+        if (interceptedEvent.isCompleted) {
+          return;
+        }
+        if (event == null) {
+          completeFailure('beforeSendEvent callback received a null event.');
+          return;
+        }
+        if (!event.isA<JSObject>()) {
+          completeFailure(
+              'beforeSendEvent callback received a non-JSObject event.');
+          return;
+        }
+
+        final eventMap = (event as JSObject).dartify() as Map<dynamic, dynamic>;
+        final exception = eventMap['exception'];
+        if (exception is! Map) {
+          completeFailure(
+              "beforeSendEvent event is missing an 'exception' map.");
+          return;
+        }
+
+        final values = exception['values'];
+        if (values is! List || values.isEmpty) {
+          completeFailure(
+              "beforeSendEvent event exception map is missing a non-empty 'values' list.");
+          return;
+        }
+
+        final firstValue = values.first;
+        if (firstValue is! Map) {
+          completeFailure(
+              "beforeSendEvent event exception values first item is not a map.");
+          return;
+        }
+
+        final value = firstValue['value'];
+        if (value == null) {
+          completeFailure(
+              "beforeSendEvent event is missing exception 'value'.");
+          return;
+        }
+
+        if (!value.toString().contains(expectedMessage)) {
+          completeFailure(
+            "beforeSendEvent exception value does not contain '$expectedMessage'. Actual: '$value'",
+          );
+          return;
+        }
+
+        interceptedEvent.complete(eventMap);
+      }).toJS;
+      client.on('beforeSendEvent'.toJS, beforeSendEventCallback);
+
+      final sentry = _globalThis['Sentry'] as JSObject?;
+      final jsError =
+          _globalThis.callMethod('Error'.toJS, expectedMessage.toJS);
+      sentry!.callMethod('captureException'.toJS, jsError);
+
+      final processedEvent =
+          await interceptedEvent.future.timeout(const Duration(seconds: 5));
+      final sdk = processedEvent['sdk'] as Map<dynamic, dynamic>?;
+      final exception = processedEvent['exception'] as Map<dynamic, dynamic>?;
+      final values = exception?['values'] as List<dynamic>?;
+      final firstValue = values?.first as Map<dynamic, dynamic>?;
+
+      expect(sdk, isNotNull);
+      expect(sdk!['name'], jsSdkName);
+      expect(firstValue?['value'], contains(expectedMessage));
+    });
   });
 }
 
@@ -51,3 +140,16 @@ class Fixture {
 
 @JS('globalThis')
 external JSObject get _globalThis;
+
+@JS('Sentry.getClient')
+external SentryJsClient? _getClient();
+
+@JS()
+@staticInterop
+class SentryJsClient {
+  external factory SentryJsClient();
+}
+
+extension _SentryJsClientExtension on SentryJsClient {
+  external void on(JSString event, JSFunction callback);
+}