Migrate analytics code to dart:js_interop

[kenzieschmoll]

Fixes #6606.

@srujzs are there any differences under the hood or is this migration as simple as switching the imports?

[kenzieschmoll]

Looks like this migration is not so simple:

Target dart2js failed: ProcessException: Process exited abnormally with exit code 1:
lib/src/shared/analytics/_analytics_web.dart:54:7:
Error: The '@JS' annotation from 'dart:js_interop' can only be used for static
interop, either through extension types or '@staticInterop' classes.
class GtagEventDevTools extends GtagEvent {
      ^
lib/src/shared/analytics/_analytics_web.dart:323:7:
Error: The '@JS' annotation from 'dart:js_interop' can only be used for static
interop, either through extension types or '@staticInterop' classes.
class GtagExceptionDevTools extends GtagException {
      ^
lib/src/shared/analytics/gtags.dart:50:7:
Error: The '@JS' annotation from 'dart:js_interop' can only be used for static
interop, either through extension types or '@staticInterop' classes.
class GtagEvent {
      ^
lib/src/shared/analytics/gtags.dart:75:7:
Error: The '@JS' annotation from 'dart:js_interop' can only be used for static
interop, either through extension types or '@staticInterop' classes.
class GtagException {
      ^
lib/src/shared/analytics/gtags.dart:21:15:
Error: External JS interop member contains invalid types in its function signature:
'void Function(String, String, *Object?*)'.
external void _gTagCommandName(String command, String name, [Object? params]);
              ^
Error: Compilation failed.
  Command: /Users/kenzieschmoll/develop/flutter/bin/cache/dart-sdk/bin/dart
  --disable-dart-dev
  /Users/kenzieschmoll/develop/flutter/bin/cache/dart-sdk/bin/snapshots/dart2js.dart.s
  napshot
  --platform-binaries=/Users/kenzieschmoll/develop/flutter/bin/cache/flutter_web_sdk/k
  ernel --invoker=flutter_tool -Ddart.vm.product=true
  -DFLUTTER_WEB_CANVASKIT_URL=https://www.gstatic.com/flutter-canvaskit/3c9c2ce8369ee0
  2d8490849754cb7734846578c8/ -DFLUTTER_WEB_AUTO_DETECT=true --native-null-assertions
  --no-source-maps -o
  /Users/kenzieschmoll/develop/devtools/packages/devtools_app/.dart_tool/flutter_build
  /4d45f73d4d484e727fc9fe9b5010ec00/app.dill --packages=.dart_tool/package_config.json
  --cfe-only
  /Users/kenzieschmoll/develop/devtools/packages/devtools_app/.dart_tool/flutter_build
  /4d45f73d4d484e727fc9fe9b5010ec00/main.dart

[kenzieschmoll]

Pushed up some new changes, but the build still fails. Maybe this is closer though?

flutter build web

Target dart2js failed: ProcessException: Process exited abnormally with exit code 1:
lib/src/shared/analytics/_analytics_web.dart:56:13:
Error: External JS interop member contains invalid types in its function signature:
'GtagEventDevTools Function({cpu_sample_count: int?, cpu_stack_depth: int?,
*custom_map: Object?*, devtools_chrome: String?, devtools_platform: String?,
devtools_version: String?, event_category: String?, event_label: String?,
flutter_client_id: String?, g3_username: String?, heap_diff_objects_after: int?,
heap_diff_objects_before: int?, heap_objects_total: int?, ide_launched: String?,
ide_launched_feature: String?, inspector_tree_controller_id: int?, is_embedded:
String?, is_external_build: String?, non_interaction: bool, raster_duration_micros:
int?, root_set_count: int?, row_count: int?, send_to: String?,
shader_compilation_duration_micros: int?, trace_event_count: int?, ui_duration_micros:
int?, user_app: String?, user_build: String?, user_platform: String?, value: int})'.
  external  GtagEventDevTools({
            ^
lib/src/shared/analytics/_analytics_web.dart:117:23:
Error: External JS interop member contains an invalid type: 'Object'.
 - 'Object' is from 'dart:core'.
  external Object get custom_map;
                      ^
lib/src/shared/analytics/gtags.dart:21:15:
Error: External JS interop member contains invalid types in its function signature:
'void Function(String, String, *Object?*)'.
external void _gTagCommandName(String command, String name, [Object? params]);
              ^
lib/src/shared/analytics/gtags.dart:49:12:
Error: External JS interop member contains invalid types in its function signature:
'GtagEvent Function({*custom_map: Object?*, event_category: String?, event_label:
String?, non_interaction: bool, send_to: String?, value: int})'.
  external GtagEvent({
           ^
lib/src/shared/analytics/gtags.dart:64:24:
Error: External JS interop member contains an invalid type: 'Object?'.
 - 'Object' is from 'dart:core'.
  external Object? get custom_map; // Custom metrics
                       ^
Error: Compilation failed.
  Command: /Users/kenzieschmoll/develop/flutter/bin/cache/dart-sdk/bin/dart
  --disable-dart-dev
  /Users/kenzieschmoll/develop/flutter/bin/cache/dart-sdk/bin/snapshots/dart2js.dart.s
  napshot
  --platform-binaries=/Users/kenzieschmoll/develop/flutter/bin/cache/flutter_web_sdk/k
  ernel --invoker=flutter_tool -Ddart.vm.product=true
  -DFLUTTER_WEB_CANVASKIT_URL=https://www.gstatic.com/flutter-canvaskit/3c9c2ce8369ee0
  2d8490849754cb7734846578c8/ -DFLUTTER_WEB_AUTO_DETECT=true --native-null-assertions
  --no-source-maps -o
  /Users/kenzieschmoll/develop/devtools/packages/devtools_app/.dart_tool/flutter_build
  /4d45f73d4d484e727fc9fe9b5010ec00/app.dill --packages=.dart_tool/package_config.json
  --cfe-only
  /Users/kenzieschmoll/develop/devtools/packages/devtools_app/.dart_tool/flutter_build
  /4d45f73d4d484e727fc9fe9b5010ec00/main.dart

[srujzs]

The error is basically indicating that you can't use classes (unless you're using @staticInterop) to do JS interop with dart:js_interop, so this will entail just moving stuff to extension types.

In most of these cases, it's as simple as refactoring the declaration and the rest should work e.g.

@JS()
@anonymous
class GtagExceptionDevTools extends GtagException {

to

extension type GtagExceptionDevTools._(JSObject _) implements GtagException, JSObject {

Since you mostly use primitive types e.g. String, the types should work just fine. There are two exceptions in the factories, however:

dynamic custom_map,

 Object? custom_map,

and its associated getters:

external Object get custom_map;

external Object? get custom_map;

You can't use dynamic and Object as a type in an external interop API. Unless I'm missing something, these are never used, so can we just delete them? There's this, which may affect this. It looks like it's just an arbitrary JS object though, so you might be able to use JSObject as the type instead if needed.

As an aside, note that some of these factories have default args that are ignored (and you should see a warning). They're just silently ignored.

Lastly, these APIs are now sound with the new interop. If they weren't typed correctly before (which I doubt, considering these are mostly all primitives), you may see errors now.