feat: migrates to package:web and js_interop

dart/example_web/pubspec.yaml

@@ -9,6 +9,7 @@ environment:
 dependencies:
   sentry:
     path: ../../dart/
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.2

dart/example_web/web/main.dart

@@ -1,5 +1,5 @@
 import 'dart:async';
-import 'dart:html';
+import 'package:web/web.dart';
 
 import 'package:sentry/sentry.dart';
 import 'package:sentry/src/version.dart';
@@ -24,7 +24,7 @@ Future<void> main() async {
 Future<void> runApp() async {
   print('runApp');
 
-  querySelector('#output')?.text = 'Your Dart app is running.';
+  document.querySelector('#output')?.text = 'Your Dart app is running.';
 
   await Sentry.addBreadcrumb(
     Breadcrumb(
@@ -57,12 +57,12 @@ Future<void> runApp() async {
     );
   });
 
-  querySelector('#btEvent')
+  document.querySelector('#btEvent')
       ?.onClick
       .listen((event) => captureCompleteExampleEvent());
-  querySelector('#btMessage')?.onClick.listen((event) => captureMessage());
-  querySelector('#btException')?.onClick.listen((event) => captureException());
-  querySelector('#btUnhandledException')
+  document.querySelector('#btMessage')?.onClick.listen((event) => captureMessage());
+  document.querySelector('#btException')?.onClick.listen((event) => captureException());
+  document.querySelector('#btUnhandledException')
       ?.onClick
       .listen((event) => captureUnhandledException());
 }
@@ -76,7 +76,7 @@ Future<void> captureMessage() async {
   );
   print('capture message result : $sentryId');
   if (sentryId != SentryId.empty()) {
-    querySelector('#messageResult')?.style.display = 'block';
+    (document.querySelector('#messageResult') as HTMLElement?)?.style.display = 'block';
   }
 }
 
@@ -93,13 +93,13 @@ Future<void> captureException() async {
     print('Capture exception : SentryId: $sentryId');
 
     if (sentryId != SentryId.empty()) {
-      querySelector('#exceptionResult')?.style.display = 'block';
+      (document.querySelector('#exceptionResult') as HTMLElement?)?.style.display = 'block';
     }
   }
 }
 
 Future<void> captureUnhandledException() async {
-  querySelector('#unhandledResult')?.style.display = 'block';
+  (document.querySelector('#unhandledResult') as HTMLElement?)?.style.display = 'block';
 
   await buildCard();
 }
@@ -111,7 +111,7 @@ Future<void> captureCompleteExampleEvent() async {
   print('Response SentryId: $sentryId');
 
   if (sentryId != SentryId.empty()) {
-    querySelector('#eventResult')?.style.display = 'block';
+    (document.querySelector('#eventResult') as HTMLElement?)?.style.display = 'block';
   }
 }
 

dart/lib/src/environment/environment_variables.dart

@@ -1,6 +1,6 @@
 import '../platform_checker.dart';
 import '_io_environment_variables.dart'
-    if (dart.library.html) '_web_environment_variables.dart' as env;
+    if (dart.library.js_interop) '_web_environment_variables.dart' as env;
 
 /// Reads environment variables from the system.
 /// In an Flutter environment these can be set via

dart/lib/src/event_processor/enricher/enricher_event_processor.dart

@@ -1,7 +1,7 @@
 import '../../event_processor.dart';
 import '../../sentry_options.dart';
 import 'io_enricher_event_processor.dart'
-    if (dart.library.html) 'web_enricher_event_processor.dart';
+    if (dart.library.js_interop) 'web_enricher_event_processor.dart';
 
 abstract class EnricherEventProcessor implements EventProcessor {
   factory EnricherEventProcessor(SentryOptions options) =>

dart/lib/src/event_processor/enricher/web_enricher_event_processor.dart

@@ -1,11 +1,11 @@
-import 'dart:html' as html show window, Window;
+import 'package:web/web.dart' as web show window, Window, Navigator;
 
 import '../../../sentry.dart';
 import 'enricher_event_processor.dart';
 
 EnricherEventProcessor enricherEventProcessor(SentryOptions options) {
   return WebEnricherEventProcessor(
-    html.window,
+    web.window,
     options,
   );
 }
@@ -16,7 +16,7 @@ class WebEnricherEventProcessor implements EnricherEventProcessor {
     this._options,
   );
 
-  final html.Window _window;
+  final web.Window _window;
 
   final SentryOptions _options;
 
@@ -42,29 +42,22 @@ class WebEnricherEventProcessor implements EnricherEventProcessor {
   // https://github.com/getsentry/sentry-javascript/blob/a6f8dc26a4c7ae2146ae64995a2018c8578896a6/packages/browser/src/integrations/useragent.ts
   SentryRequest _getRequest(SentryRequest? request) {
     final requestHeader = request?.headers;
-    final header = requestHeader == null
-        ? <String, String>{}
-        : Map<String, String>.from(requestHeader);
+    final header = requestHeader == null ? <String, String>{} : Map<String, String>.from(requestHeader);
 
     header.putIfAbsent('User-Agent', () => _window.navigator.userAgent);
 
     final url = request?.url ?? _window.location.toString();
-    return (request ?? SentryRequest(url: url))
-        .copyWith(headers: header)
-        .sanitized();
+    return (request ?? SentryRequest(url: url)).copyWith(headers: header).sanitized();
   }
 
   SentryDevice _getDevice(SentryDevice? device) {
     return (device ?? SentryDevice()).copyWith(
       online: device?.online ?? _window.navigator.onLine,
       memorySize: device?.memorySize ?? _getMemorySize(),
       orientation: device?.orientation ?? _getScreenOrientation(),
-      screenHeightPixels: device?.screenHeightPixels ??
-          _window.screen?.available.height.toInt(),
-      screenWidthPixels:
-          device?.screenWidthPixels ?? _window.screen?.available.width.toInt(),
-      screenDensity:
-          device?.screenDensity ?? _window.devicePixelRatio.toDouble(),
+      screenHeightPixels: device?.screenHeightPixels ?? _window.screen.availHeight,
+      screenWidthPixels: device?.screenWidthPixels ?? _window.screen.availWidth,
+      screenDensity: device?.screenDensity ?? _window.devicePixelRatio.toDouble(),
     );
   }
 
@@ -77,14 +70,12 @@ class WebEnricherEventProcessor implements EnricherEventProcessor {
 
   SentryOrientation? _getScreenOrientation() {
     // https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
-    final screenOrientation = _window.screen?.orientation;
-    if (screenOrientation != null) {
-      if (screenOrientation.type?.startsWith('portrait') ?? false) {
-        return SentryOrientation.portrait;
-      }
-      if (screenOrientation.type?.startsWith('landscape') ?? false) {
-        return SentryOrientation.landscape;
-      }
+    final screenOrientation = _window.screen.orientation;
+    if (screenOrientation.type.startsWith('portrait')) {
+      return SentryOrientation.portrait;
+    }
+    if (screenOrientation.type.startsWith('landscape')) {
+      return SentryOrientation.landscape;
     }
     return null;
   }
@@ -101,3 +92,7 @@ class WebEnricherEventProcessor implements EnricherEventProcessor {
     );
   }
 }
+
+extension on web.Navigator {
+  external double? get deviceMemory;
+}

dart/lib/src/event_processor/exception/exception_event_processor.dart

@@ -1,7 +1,7 @@
 import '../../event_processor.dart';
 import '../../sentry_options.dart';
 import 'io_exception_event_processor.dart'
-    if (dart.library.html) 'web_exception_event_processor.dart';
+    if (dart.library.js_interop) 'web_exception_event_processor.dart';
 
 abstract class ExceptionEventProcessor implements EventProcessor {
   factory ExceptionEventProcessor(SentryOptions options) =>

dart/lib/src/origin.dart

@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'package:web/web.dart';
 
 /// request origin, used for browser stacktrace
 String get eventOrigin => '${window.location.origin}/';

dart/lib/src/platform/_web_platform.dart

@@ -1,9 +1,10 @@
-import 'dart:html' as html;
+import 'package:web/web.dart' as web;
+
 import 'platform.dart';
 
 const Platform instance = WebPlatform();
 
-/// [Platform] implementation that delegates to `dart:html`.
+/// [Platform] implementation that delegates to `dart:js_interop`.
 class WebPlatform extends Platform {
   /// Creates a new [Platform].
   const WebPlatform();
@@ -15,11 +16,11 @@ class WebPlatform extends Platform {
   String get operatingSystemVersion => 'unknown';
 
   @override
-  String get localHostname => html.window.location.hostname ?? 'unknown';
+  String get localHostname => web.window.location.hostname;
 
   String _browserPlatform() {
     final navigatorPlatform =
-        html.window.navigator.platform?.toLowerCase() ?? '';
+        web.window.navigator.platform.toLowerCase();
     if (navigatorPlatform.startsWith('mac')) {
       return 'macos';
     }
@@ -43,7 +44,7 @@ class WebPlatform extends Platform {
     // indicates that a device has a "fine pointer" (mouse) as the primary
     // pointing device, then we'll assume desktop linux, and otherwise we'll
     // assume Android.
-    if (html.window.matchMedia('only screen and (pointer: fine)').matches) {
+    if (web.window.matchMedia('only screen and (pointer: fine)').matches) {
       return 'linux';
     }
     return 'android';

dart/lib/src/platform/platform.dart

@@ -1,4 +1,4 @@
-import '_io_platform.dart' if (dart.library.html) '_web_platform.dart'
+import '_io_platform.dart' if (dart.library.js_interop) '_web_platform.dart'
     as platform;
 
 const Platform instance = platform.instance;

dart/lib/src/sentry_client_stub.dart

@@ -8,4 +8,4 @@ import 'sentry_options.dart';
 /// Implemented in `sentry_browser_client.dart` and `sentry_io_client.dart`.
 SentryClient createSentryClient(SentryOptions options) =>
     throw UnsupportedError(
-        'Cannot create a client without dart:html or dart:io.');
+        'Cannot create a client without dart:js_interop or dart:io.');

dart/lib/src/sentry_stack_trace_factory.dart

@@ -1,7 +1,7 @@
 import 'package:meta/meta.dart';
 import 'package:stack_trace/stack_trace.dart';
 
-import 'noop_origin.dart' if (dart.library.html) 'origin.dart';
+import 'noop_origin.dart' if (dart.library.js_interop) 'origin.dart';
 import 'protocol.dart';
 import 'sentry_options.dart';
 

dart/lib/src/utils/isolate_utils.dart

@@ -1,7 +1,7 @@
 import 'package:meta/meta.dart';
 
 import '_io_get_isolate_name.dart'
-    if (dart.library.html) '_web_get_isolate_name.dart' as isolate_getter;
+    if (dart.library.js_interop) '_web_get_isolate_name.dart' as isolate_getter;
 
 @internal
 String? getIsolateName() => isolate_getter.getIsolateName();

dart/pubspec.yaml

@@ -24,6 +24,7 @@ dependencies:
   meta: ^1.3.0
   stack_trace: ^1.10.0
   uuid: '>=3.0.0 <5.0.0'
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.2

dart/test/event_processor/enricher/web_enricher_test.dart

@@ -1,7 +1,7 @@
 @TestOn('browser')
 library dart_test;
 
-import 'dart:html' as html;
+import 'package:web/web.dart' as web;
 
 import 'package:sentry/sentry.dart';
 import 'package:sentry/src/event_processor/enricher/web_enricher_event_processor.dart';
@@ -208,7 +208,7 @@ class Fixture {
         checker: MockPlatformChecker(hasNativeIntegration: false));
 
     return WebEnricherEventProcessor(
-      html.window,
+      web.window,
       options,
     );
   }

dart/test/stack_trace_test.dart

@@ -4,7 +4,7 @@
 
 import 'package:sentry/sentry.dart';
 import 'package:sentry/src/noop_origin.dart'
-    if (dart.library.html) 'package:sentry/src/origin.dart';
+    if (dart.library.js_interop) 'package:sentry/src/origin.dart';
 import 'package:sentry/src/sentry_stack_trace_factory.dart';
 import 'package:stack_trace/stack_trace.dart';
 import 'package:test/test.dart';

file/lib/src/sentry_file_extension.dart

@@ -1,6 +1,6 @@
 // ignore_for_file: invalid_use_of_internal_member
 
-import 'dart:io' if (dart.library.html) 'dart:html';
+import 'dart:io' if (dart.library.js_interop) 'dart:js_interop';
 
 import 'package:meta/meta.dart';
 import 'package:sentry/sentry.dart';

flutter/lib/src/integrations/connectivity/connectivity_provider.dart

@@ -1,5 +1,5 @@
 import 'noop_connectivity_provider.dart'
-    if (dart.library.html) 'web_connectivity_provider.dart';
+    if (dart.library.js_interop) 'web_connectivity_provider.dart';
 
 abstract class ConnectivityProvider {
   factory ConnectivityProvider() => connectivityProvider();

flutter/lib/src/integrations/connectivity/web_connectivity_provider.dart

@@ -1,5 +1,5 @@
 import 'dart:async';
-import 'dart:html' as html;
+import 'package:web/web.dart' as web;
 
 import 'connectivity_provider.dart';
 
@@ -8,15 +8,19 @@ ConnectivityProvider connectivityProvider() {
 }
 
 class WebConnectivityProvider implements ConnectivityProvider {
-  StreamSubscription<html.Event>? _onOnlineSub;
-  StreamSubscription<html.Event>? _onOfflineSub;
+  StreamSubscription<web.Event>? _onOnlineSub;
+  StreamSubscription<web.Event>? _onOfflineSub;
 
   @override
   void listen(void Function(String connectivity) onChange) {
-    _onOnlineSub = html.window.onOnline.listen((_) {
+    _onOnlineSub = web.EventStreamProviders.onlineEvent
+        .forElement(web.document.body!)
+        .listen((_) {
       onChange('wifi');
     });
-    _onOfflineSub = html.window.onOffline.listen((_) {
+    _onOfflineSub = web.EventStreamProviders.offlineEvent
+        .forElement(web.document.body!)
+        .listen((_) {
       onChange('none');
     });
   }

flutter/lib/src/native/factory.dart

@@ -1 +1 @@
-export 'factory_real.dart' if (dart.library.html) 'factory_web.dart';
+export 'factory_real.dart' if (dart.library.js_interop) 'factory_web.dart';

flutter/lib/src/renderer/html_renderer.dart

@@ -1,4 +1,4 @@
-import 'dart:js' as js;
+import 'dart:js_interop';
 
 import 'renderer.dart';
 
@@ -7,6 +7,9 @@ FlutterRenderer? getRenderer() {
 }
 
 bool get isCanvasKitRenderer {
-  final flutterCanvasKit = js.context['flutterCanvasKit'];
-  return flutterCanvasKit != null;
+  return _windowFlutterCanvasKit != null;
 }
+
+// See https://github.com/flutter/flutter/blob/414d9238720a3cde85475f49ce0ba313f95046f7/packages/flutter/lib/src/foundation/_capabilities_web.dart#L10
+@JS('window.flutterCanvasKit')
+external JSAny? get _windowFlutterCanvasKit;

flutter/lib/src/renderer/renderer.dart

@@ -1,7 +1,7 @@
 import 'package:meta/meta.dart';
 
 import 'unknown_renderer.dart'
-    if (dart.library.html) 'html_renderer.dart'
+    if (dart.library.js_interop) 'html_renderer.dart'
     if (dart.library.io) 'io_renderer.dart' as implementation;
 
 @internal

flutter/pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
   package_info_plus: '>=1.0.0'
   meta: ^1.3.0
   ffi: ^2.0.0
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.2

hive/lib/src/sentry_box_collection.dart

@@ -9,7 +9,7 @@ import 'package:hive/src/box_collection/box_collection_stub.dart' as stub;
 
 // ignore: implementation_imports
 import 'package:hive/src/box_collection/box_collection_stub.dart'
-    if (dart.library.html) 'package:hive/src/box_collection/box_collection_indexed_db.dart'
+    if (dart.library.js_interop) 'package:hive/src/box_collection/box_collection_indexed_db.dart'
     if (dart.library.io) 'package:hive/src/box_collection/box_collection.dart'
     as impl;
 

hive/test/mocks/mocks.dart

@@ -3,7 +3,7 @@ import 'package:mockito/annotations.dart';
 import 'package:sentry/sentry.dart';
 
 import 'package:hive/src/box_collection/box_collection_stub.dart'
-    if (dart.library.html) 'package:hive/src/box_collection/box_collection_indexed_db.dart'
+    if (dart.library.js_interop) 'package:hive/src/box_collection/box_collection_indexed_db.dart'
     if (dart.library.io) 'package:hive/src/box_collection/box_collection.dart'
     as impl;