feat(js-sdk): add script loader to set up Sentry Javascript SDK (#2406)

* update

* update

* updaet

* Update sentry_js_sdk_version.dart

* temporary ci change

* fix test

* fix compilation

* fix compilation

* fix

* fix test

* update

* fix test

* fix test

* update

* update

* update

* fix analyze

* update

* update

* update validation

* update

* update

* update

* rethrow on automated test mode

* update rethrow

* update

* update tests

* update appending

* update web

* add trusted types and add tests

* formatting

* update comment

* add as browser test

* fix min_version

* fix warnings

* add another test file

* update

* update comment

* try out web integration test

* update

* use ubuntu latest for web

* see if it runs

* update

* fix job

* fix job

* run chromedriver in background

* run correct port

* update

* update

* setup chrome action

* update

* run chrome first

* try

* update

* update

* remove file

* update

* update

* fix tests

* update

* update docs and test cases

* add todo

* update

* update

* add doc and fix tests

* update tests

* update

* update

* Update web_sdk_test.dart

* add test with automatedTestMode false

* update

* remove debug

* remove fn

* update restore flutter onError

* fix analyze

* Update flutter.yml

Author: buenaflor

.github/workflows/flutter_test.yml

@@ -166,3 +166,62 @@ jobs:
         if: ${{ matrix.target != 'macos' }}
         working-directory: ./flutter/example/${{ matrix.target }}
         run: xcodebuild test -workspace Runner.xcworkspace -scheme Runner -configuration Debug -destination "platform=${{ steps.device.outputs.platform }}" -allowProvisioningUpdates CODE_SIGNING_ALLOWED=NO
+
+  test-web:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    defaults:
+      run:
+        working-directory: ./flutter/example
+    strategy:
+      fail-fast: false
+      matrix:
+        sdk: [ "stable", "beta" ]
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Install Chrome Browser
+        uses: browser-actions/setup-chrome@facf10a55b9caf92e0cc749b4f82bf8220989148 # [email protected]
+        with:
+          chrome-version: stable
+      - run: chrome --version
+
+      - uses: subosito/flutter-action@44ac965b96f18d999802d4b807e3256d5a3f9fa1 # [email protected]
+        with:
+          channel: ${{ matrix.sdk }}
+
+      - name: flutter upgrade
+        run: flutter upgrade
+
+      - name: flutter pub get
+        run: flutter pub get
+
+      - name: Install Xvfb and dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y xvfb
+          sudo apt-get -y install xorg xvfb gtk2-engines-pixbuf
+          sudo apt-get -y install dbus-x11 xfonts-base xfonts-100dpi xfonts-75dpi xfonts-cyrillic xfonts-scalable
+          sudo apt-get -y install imagemagick x11-apps
+
+      - name: Setup ChromeDriver
+        uses: nanasess/setup-chromedriver@e93e57b843c0c92788f22483f1a31af8ee48db25 # [email protected]
+
+      - name: Start Xvfb and run tests
+        run: |
+          # Start Xvfb with specific screen settings
+          Xvfb -ac :99 -screen 0 1280x1024x16 &
+          export DISPLAY=:99
+          
+          # Start ChromeDriver
+          chromedriver --port=4444 &
+          
+          # Wait for services to start
+          sleep 5
+
+          # Run the tests
+          flutter drive \
+            --driver=integration_test/test_driver/web_driver.dart \
+            --target=integration_test/web_sdk_test.dart \
+            -d chrome

flutter/example/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

flutter/example/integration_test/test_driver/web_driver.dart

@@ -0,0 +1,3 @@
+import 'package:integration_test/integration_test_driver.dart';
+
+Future<void> main() => integrationDriver();

flutter/example/integration_test/utils.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+
+/// Restores the onError to it's original state.
+/// This makes assertion errors readable.
+///
+/// testWidgets override Flutter.onError by default
+/// If a fail happens during integration tests this would complain that
+/// the FlutterError.onError was overwritten and wasn't reset to its
+/// state before asserting.
+///
+/// This function needs to be executed before assertions.
+Future<void> restoreFlutterOnErrorAfter(Future<void> Function() fn) async {
+  final originalOnError = FlutterError.onError;
+  await fn();
+  final overriddenOnError = FlutterError.onError;
+
+  FlutterError.onError = (FlutterErrorDetails details) {
+    if (overriddenOnError != originalOnError) overriddenOnError?.call(details);
+    originalOnError?.call(details);
+  };
+}

flutter/example/integration_test/web_sdk_test.dart

@@ -0,0 +1,64 @@
+// ignore_for_file: invalid_use_of_internal_member, avoid_web_libraries_in_flutter
+
+@TestOn('browser')
+library flutter_test;
+
+import 'dart:async';
+import 'dart:js';
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:sentry_flutter/sentry_flutter.dart';
+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
+
+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());
+        });
+
+        final beforeSendFn = JsFunction.withThis((thisArg, event, hint) {
+          actualMessage = event['message'];
+          completer.complete();
+          return event;
+        });
+
+        final Map<String, dynamic> options = {
+          'dsn': app.exampleDsn,
+          'beforeSend': beforeSendFn,
+          'defaultIntegrations': [],
+        };
+
+        final sentry = context['Sentry'] as JsObject;
+        sentry.callMethod('init', [JsObject.jsify(options)]);
+        sentry.callMethod('captureMessage', [expectedMessage]);
+      });
+
+      await completer.future.timeout(const Duration(seconds: 5), onTimeout: () {
+        fail('beforeSend was not triggered');
+      });
+
+      expect(actualMessage, equals(expectedMessage));
+    });
+  });
+}

flutter/lib/src/integrations/web_sdk_integration.dart

@@ -0,0 +1,43 @@
+import 'dart:async';
+
+import 'package:meta/meta.dart';
+
+import '../../sentry_flutter.dart';
+import '../web/script_loader/sentry_script_loader.dart';
+import '../web/sentry_js_bundle.dart';
+
+class WebSdkIntegration implements Integration<SentryFlutterOptions> {
+  WebSdkIntegration(this._scriptLoader);
+
+  final SentryScriptLoader _scriptLoader;
+
+  @internal
+  static const name = 'webSdkIntegration';
+
+  @override
+  FutureOr<void> call(Hub hub, SentryFlutterOptions options) async {
+    try {
+      final scripts = options.platformChecker.isDebugMode()
+          ? debugScripts
+          : productionScripts;
+      await _scriptLoader.loadWebSdk(scripts);
+
+      options.sdk.addIntegration(name);
+    } catch (exception, stackTrace) {
+      options.logger(
+        SentryLevel.fatal,
+        '$name failed to be installed',
+        exception: exception,
+        stackTrace: stackTrace,
+      );
+      if (options.automatedTestMode) {
+        rethrow;
+      }
+    }
+  }
+
+  @override
+  FutureOr<void> close() {
+    // no-op
+  }
+}

flutter/lib/src/sentry_flutter.dart

@@ -20,13 +20,15 @@ import 'integrations/frames_tracking_integration.dart';
 import 'integrations/integrations.dart';
 import 'integrations/native_app_start_handler.dart';
 import 'integrations/screenshot_integration.dart';
+import 'integrations/web_sdk_integration.dart';
 import 'native/factory.dart';
 import 'native/native_scope_observer.dart';
 import 'native/sentry_native_binding.dart';
 import 'profiling.dart';
 import 'renderer/renderer.dart';
 import 'version.dart';
 import 'view_hierarchy/view_hierarchy_integration.dart';
+import 'web/script_loader/sentry_script_loader.dart';
 
 /// Configuration options callback
 typedef FlutterOptionsConfiguration = FutureOr<void> Function(
@@ -180,6 +182,8 @@ mixin SentryFlutter {
     }
 
     if (platformChecker.isWeb) {
+      final loader = SentryScriptLoader(options);
+      integrations.add(WebSdkIntegration(loader));
       integrations.add(ConnectivityIntegration());
     }
 

flutter/lib/src/web/script_loader/html_script_dom_api.dart

@@ -0,0 +1,59 @@
+import 'dart:async';
+import 'dart:html';
+import 'dart:js_util' as js_util;
+
+import '../../../sentry_flutter.dart';
+import 'sentry_script_loader.dart';
+
+Future<void> loadScript(String src, SentryOptions options,
+    {String? integrity,
+    String trustedTypePolicyName = defaultTrustedPolicyName}) {
+  final completer = Completer<void>();
+
+  final script = ScriptElement()
+    ..crossOrigin = 'anonymous'
+    ..onLoad.listen((_) => completer.complete())
+    ..onError.listen((event) => completer.completeError('Failed to load $src'));
+
+  TrustedScriptUrl? trustedUrl;
+
+  // If TrustedTypes are available, prepare a trusted URL
+  final trustedTypes = js_util.getProperty<dynamic>(window, 'trustedTypes');
+  if (trustedTypes != null) {
+    try {
+      final policy =
+          js_util.callMethod<dynamic>(trustedTypes as Object, 'createPolicy', [
+        trustedTypePolicyName,
+        js_util.jsify({
+          'createScriptURL': (String url) => src,
+        })
+      ]);
+      trustedUrl =
+          js_util.callMethod(policy as Object, 'createScriptURL', [src]);
+    } catch (e) {
+      // will be caught by loadWebSdk
+      throw TrustedTypesException();
+    }
+  }
+
+  if (trustedUrl != null) {
+    js_util.setProperty(script, 'src', trustedUrl);
+  } else {
+    script.src = src;
+  }
+
+  if (integrity != null) {
+    script.integrity = integrity;
+  }
+
+  // JS SDK needs to be loaded before everything else
+  final head = document.head;
+  if (head != null) {
+    if (head.hasChildNodes()) {
+      head.insertBefore(script, head.firstChild);
+    } else {
+      head.append(script);
+    }
+  }
+  return completer.future;
+}

flutter/lib/src/web/script_loader/noop_script_dom_api.dart

@@ -0,0 +1,6 @@
+import '../../../sentry_flutter.dart';
+import 'sentry_script_loader.dart';
+
+Future<void> loadScript(String src, SentryOptions options,
+    {String? integrity,
+    String trustedTypePolicyName = defaultTrustedPolicyName}) async {}

flutter/lib/src/web/script_loader/script_dom_api.dart

@@ -0,0 +1,3 @@
+export 'noop_script_dom_api.dart'
+    if (dart.library.html) 'html_script_dom_api.dart'
+    if (dart.library.js_interop) 'web_script_dom_api.dart';