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

.github/workflows/flutter.yml

@@ -4,6 +4,7 @@ on:
     branches:
       - main
       - release/**
+      - feat/**
   pull_request:
     paths:
       - '.github/workflows/flutter.yml'

.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 # pin@v1.7.2
+        with:
+          chrome-version: stable
+      - run: chrome --version
+
+      - uses: subosito/flutter-action@44ac965b96f18d999802d4b807e3256d5a3f9fa1 # pin@v2.16.0
+        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 # pin@2.3.0
+
+      - 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/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,9 @@
+import 'package:sentry_flutter/sentry_flutter.dart';
+
+const fakeDsn = 'https://abc@def.ingest.sentry.io/1234567';
+
+void defaultTestOptionsInitializer(SentryFlutterOptions options) {
+  options.dsn = fakeDsn;
+  // ignore: invalid_use_of_internal_member
+  options.automatedTestMode = true;
+}

flutter/example/integration_test/web_sdk_test.dart

@@ -0,0 +1,54 @@
+// ignore_for_file: invalid_use_of_internal_member
+
+@TestOn('browser')
+library flutter_test;
+
+// ignore: avoid_web_libraries_in_flutter
+import 'dart:js';
+import 'dart:js_interop';
+
+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 {
+      await SentryFlutter.init(defaultTestOptionsInitializer,
+          appRunner: () async {
+        await tester.pumpWidget(const app.MyApp());
+      });
+
+      const expectedMessage = 'test message';
+      final beforeSendFn = JsFunction.withThis((thisArg, event, hint) {
+        final actualMessage = event['message'];
+        expect(actualMessage, equals(expectedMessage));
+
+        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.toJS]);
+    });
+  });
+}

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';

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

@@ -0,0 +1,60 @@
+import 'dart:async';
+
+import 'package:meta/meta.dart';
+
+import '../../../sentry_flutter.dart';
+import 'script_dom_api.dart';
+
+@internal
+const String defaultTrustedPolicyName = 'sentry-dart';
+
+class SentryScriptLoader {
+  SentryScriptLoader(this._options);
+
+  final SentryFlutterOptions _options;
+  bool _scriptLoaded = false;
+
+  /// Loads the scripts into the web page with support for Trusted Types security policy.
+  ///
+  /// The function handles three Trusted Types scenarios:
+  /// 1. No Trusted Types configured - Scripts load normally
+  /// 2. Custom Trusted Types policy - Uses provided policy name to create trusted URLs
+  /// 3. Trusted Types forbidden - Scripts are not loaded
+  ///
+  /// The function is only executed successfully once and will be guarded by a flag afterwards.
+  ///
+  /// TrustedTypes implementation inspired by https://pub.dev/packages/google_identity_services_web
+  Future<void> loadWebSdk(List<Map<String, String>> scripts,
+      {String trustedTypePolicyName = defaultTrustedPolicyName}) async {
+    if (_scriptLoaded) return;
+
+    try {
+      await Future.forEach(scripts, (Map<String, String> script) async {
+        final url = script['url'];
+        final integrity = script['integrity'];
+
+        if (url != null) {
+          await loadScript(url, _options,
+              integrity: integrity,
+              trustedTypePolicyName: trustedTypePolicyName);
+        }
+      });
+
+      _scriptLoaded = true;
+      _options.logger(SentryLevel.debug,
+          'JS SDK integration: all Sentry scripts loaded successfully.');
+    } catch (e) {
+      _options.logger(SentryLevel.error, 'Failed to load Sentry scripts: $e');
+      if (_options.automatedTestMode) {
+        rethrow;
+      }
+    }
+  }
+}
+
+/// Exception thrown if the Trusted Types feature is supported, enabled, and it
+/// has prevented this loader from injecting the Sentry JS SDK
+@internal
+class TrustedTypesException implements Exception {
+  TrustedTypesException();
+}