feat: sentry web api (#2489)

* update

* update

* update test

* update

* update

* update

* update

* update doc

* update

* update

* update

* update test

* update

* update tests

* use tryCatchSync

* formatting

* fix sentry_flutter_test

* fix analyze

* update test

* fix tests

* update test

* update test

* update scripts

* ignore sentry_web in coverage

* update test

* temporary

* update

* test

* update tests

* update test with mocks

* fix analyze

* update

* update names

* fix test

* update

* update integration

* update comment

* update flutter enricher

* update test

* update

* update flag name

* update

* update binding creation condition

* update

* update integration test

* fix tests

Author: buenaflor

.github/workflows/flutter_test.yml

@@ -222,6 +222,6 @@ jobs:
 
           # Run the tests
           flutter drive \
-            --driver=integration_test/test_driver/web_driver.dart \
+            --driver=integration_test/test_driver/driver.dart \
             --target=integration_test/web_sdk_test.dart \
             -d chrome

dart/lib/src/platform_checker.dart

@@ -40,20 +40,13 @@ class PlatformChecker {
   }
 
   /// Indicates whether a native integration is available.
-  bool get hasNativeIntegration {
-    if (isWeb) {
-      return false;
-    }
-    // We need to check the platform after we checked for web, because
-    // the OS checks return true when the browser runs on the checked platform.
-    // Example: platform.isAndroid return true if the browser is used on an
-    // Android device.
-    return platform.isAndroid ||
-        platform.isIOS ||
-        platform.isMacOS ||
-        platform.isWindows ||
-        platform.isLinux;
-  }
+  bool get hasNativeIntegration =>
+      isWeb ||
+      platform.isAndroid ||
+      platform.isIOS ||
+      platform.isMacOS ||
+      platform.isWindows ||
+      platform.isLinux;
 
   static bool _isWebWithWasmSupport() {
     if (const bool.hasEnvironment(_jsUtil)) {

flutter/example/integration_test/test_driver/web_driver.dart

@@ -20,3 +20,5 @@ FutureOr<void> restoreFlutterOnErrorAfter(FutureOr<void> Function() fn) async {
     originalOnError?.call(details);
   };
 }
+
+const fakeDsn = 'https://[email protected]/1234567';

flutter/example/integration_test/utils.dart

@@ -3,8 +3,8 @@
 @TestOn('browser')
 library flutter_test;
 
-import 'dart:async';
-import 'dart:js';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
@@ -13,52 +13,56 @@ import 'package:sentry_flutter_example/main.dart' as app;
 
 import 'utils.dart';
 
-// We can use dart:html, this is meant to be tested on Flutter Web and not WASM
-// This integration test can be changed later when we actually do support WASM
+@JS('globalThis')
+external JSObject get globalThis;
+
+@JS('Sentry.getClient')
+external JSObject? _getClient();
 
 void main() {
   group('Web SDK Integration', () {
     IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-    tearDown(() async {
-      await Sentry.close();
-    });
-
-    testWidgets('Sentry JS SDK is callable', (tester) async {
-      final completer = Completer();
-      const expectedMessage = 'test message';
-      String actualMessage = '';
-
-      await restoreFlutterOnErrorAfter(() async {
-        await SentryFlutter.init((options) {
-          options.dsn = app.exampleDsn;
-          options.automatedTestMode = false;
-        }, appRunner: () async {
-          await tester.pumpWidget(const app.MyApp());
+    group('enabled', () {
+      testWidgets('Sentry JS SDK initialized', (tester) async {
+        await restoreFlutterOnErrorAfter(() async {
+          await SentryFlutter.init((options) {
+            options.enableSentryJs = true;
+            options.dsn = fakeDsn;
+          }, appRunner: () async {
+            await tester.pumpWidget(const app.MyApp());
+          });
         });
 
-        final beforeSendFn = JsFunction.withThis((thisArg, event, hint) {
-          actualMessage = event['message'];
-          completer.complete();
-          return event;
-        });
+        expect(globalThis['Sentry'], isNotNull);
 
-        final Map<String, dynamic> options = {
-          'dsn': app.exampleDsn,
-          'beforeSend': beforeSendFn,
-          'defaultIntegrations': [],
-        };
+        final client = _getClient()!;
+        final options = client.callMethod('getOptions'.toJS)! as JSObject;
 
-        final sentry = context['Sentry'] as JsObject;
-        sentry.callMethod('init', [JsObject.jsify(options)]);
-        sentry.callMethod('captureMessage', [expectedMessage]);
-      });
+        final dsn = options.getProperty('dsn'.toJS).toString();
+        final defaultIntegrations = options
+            .getProperty('defaultIntegrations'.toJS)
+            .dartify() as List<Object?>;
 
-      await completer.future.timeout(const Duration(seconds: 5), onTimeout: () {
-        fail('beforeSend was not triggered');
+        expect(dsn, fakeDsn);
+        expect(defaultIntegrations, isEmpty);
       });
+    });
 
-      expect(actualMessage, equals(expectedMessage));
+    group('disabled', () {
+      testWidgets('Sentry JS SDK is not initialized', (tester) async {
+        await restoreFlutterOnErrorAfter(() async {
+          await SentryFlutter.init((options) {
+            options.enableSentryJs = false;
+            options.dsn = fakeDsn;
+          }, appRunner: () async {
+            await tester.pumpWidget(const app.MyApp());
+          });
+        });
+
+        expect(globalThis['Sentry'], isNull);
+        expect(() => _getClient(), throwsA(anything));
+      });
     });
   });
 }

flutter/example/integration_test/web_sdk_test.dart

@@ -83,6 +83,7 @@ Future<void> setupSentry(
       options.spotlight = Spotlight(enabled: true);
       options.enableTimeToFullDisplayTracing = true;
       options.enableMetrics = true;
+      options.enableSentryJs = true;
 
       options.maxRequestBodySize = MaxRequestBodySize.always;
       options.maxResponseBodySize = MaxResponseBodySize.always;

flutter/example/lib/main.dart

@@ -37,8 +37,11 @@ class FlutterEnricherEventProcessor implements EventProcessor {
   ) async {
     // If there's a native integration available, it probably has better
     // information available than Flutter.
-    final device =
-        _hasNativeIntegration ? null : _getDevice(event.contexts.device);
+    // TODO: while we have a native integration with JS SDK, it's currently opt in and we dont gather contexts yet
+    // so for web it's still better to rely on the information of Flutter.
+    final device = _hasNativeIntegration && !_checker.isWeb
+        ? null
+        : _getDevice(event.contexts.device);
 
     final contexts = event.contexts.copyWith(
       device: device,

flutter/lib/src/event_processor/flutter_enricher_event_processor.dart

@@ -4,7 +4,7 @@ export 'load_contexts_integration.dart';
 export 'load_image_list_integration.dart';
 export 'load_release_integration.dart';
 export 'native_app_start_integration.dart';
-export 'native_sdk_integration.dart';
 export 'on_error_integration.dart';
+export 'sdk_integration.dart';
 export 'widgets_binding_integration.dart';
 export 'widgets_flutter_binding_integration.dart';

flutter/lib/src/integrations/integrations.dart

@@ -1,9 +1,15 @@
 import 'dart:async';
 
 import 'package:sentry/sentry.dart';
+
 import '../native/sentry_native_binding.dart';
 import '../sentry_flutter_options.dart';
 
+Integration<SentryFlutterOptions> createSdkIntegration(
+    SentryNativeBinding native) {
+  return NativeSdkIntegration(native);
+}
+
 /// Enables Sentry's native SDKs (Android and iOS) with options.
 class NativeSdkIntegration implements Integration<SentryFlutterOptions> {
   NativeSdkIntegration(this._native);

flutter/lib/src/integrations/native_sdk_integration.dart

@@ -0,0 +1,3 @@
+export 'native_sdk_integration.dart'
+    if (dart.library.html) 'web_sdk_integration.dart'
+    if (dart.library.js_interop) 'web_sdk_integration.dart';