chore: exception web (#243)

Author: marandaneto

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Next
 
+- feat: flutter error tracking support for web ([#243](https://github.com/PostHog/posthog-flutter/pull/243))
 - feat: add `userProperties` and `userPropertiesSetOnce` parameters to `capture()` method ([#254](https://github.com/PostHog/posthog-flutter/pull/254))
 
 # 5.11.1

example/README.md

@@ -14,3 +14,19 @@ A few resources to get you started if this is your first Flutter project:
 For help getting started with Flutter development, view the
 [online documentation](https://docs.flutter.dev/), which offers tutorials,
 samples, guidance on mobile development, and a full API reference.
+
+## Running web example
+
+```bash
+# release mode
+rm -rf build/web
+flutter build web --source-maps
+posthog-cli sourcemap inject --directory build/web
+# check the sourcemaps has chunk_id and release_id injected (*.js.map file)
+# check the js file has _posthogChunkIds injected (*.js file)
+# check the chunk_id and _posthogChunkIds match
+posthog-cli sourcemap upload --directory build/web
+cd build/web
+# https://pub.dev/packages/dhttpd
+dhttpd
+```

example/lib/error_example.dart

@@ -0,0 +1,39 @@
+import 'package:posthog_flutter/posthog_flutter.dart';
+import 'package:posthog_flutter_example/main.dart';
+
+class ErrorExample {
+  void causeUnhandledDivisionError() {
+    // This will cause a division by zero error
+    10 ~/ 0;
+  }
+
+  Future<void> causeHandledDivisionError() async {
+    try {
+      // This will cause a division by zero error
+      10 ~/ 0;
+    } catch (e, stackTrace) {
+      await Posthog().captureException(
+        error: e,
+        stackTrace: stackTrace,
+      );
+    }
+  }
+
+  Future<void> throwWithinDelayed() async {
+    Future.delayed(Duration.zero, () {
+      // does not throw on web here, just with runZonedGuarded handler
+      throw const CustomException('Test throwWithinDelayed',
+          code: 'PlatformDispatcherTest',
+          additionalData: {'test_type': 'platform_dispatcher_error'});
+    });
+  }
+
+  Future<void> throwWithinTimer() async {
+    Future.delayed(Duration.zero, () {
+      // does not throw on web here, just with runZonedGuarded handler
+      throw const CustomException('Test throwWithinTimer',
+          code: 'PlatformDispatcherTest',
+          additionalData: {'test_type': 'platform_dispatcher_error'});
+    });
+  }
+}

example/lib/main.dart

@@ -1,12 +1,11 @@
 import 'dart:async';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:posthog_flutter/posthog_flutter.dart';
+import 'package:posthog_flutter_example/error_example.dart';
 
 Future<void> main() async {
-  // // init WidgetsFlutterBinding if not yet
-
-  WidgetsFlutterBinding.ensureInitialized();
   final config =
       PostHogConfig('phc_6lqCaCDCBEWdIGieihq5R2dZpPVbAUFISA75vFZow06');
   config.onFeatureFlags = () {
@@ -15,8 +14,8 @@ Future<void> main() async {
   config.debug = true;
   config.captureApplicationLifecycleEvents = false;
   config.host = 'https://us.i.posthog.com';
-  config.surveys = true;
-  config.sessionReplay = true;
+  config.surveys = false;
+  config.sessionReplay = false;
   config.sessionReplayConfig.maskAllTexts = false;
   config.sessionReplayConfig.maskAllImages = false;
   config.sessionReplayConfig.throttleDelay = const Duration(milliseconds: 1000);
@@ -30,8 +29,20 @@ Future<void> main() async {
   config.errorTrackingConfig.captureIsolateErrors =
       true; // Capture isolate errors
 
-  await Posthog().setup(config);
+  if (kIsWeb) {
+    runZonedGuarded(
+      () async => await _initAndRun(config),
+      (error, stackTrace) async => await Posthog()
+          .captureRunZonedGuardedError(error: error, stackTrace: stackTrace),
+    );
+  } else {
+    await _initAndRun(config);
+  }
+}
 
+Future<void> _initAndRun(PostHogConfig config) async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await Posthog().setup(config);
   runApp(const MyApp());
 }
 
@@ -267,56 +278,10 @@ class InitialScreenState extends State<InitialScreen> {
                 ),
                 ElevatedButton(
                   onPressed: () async {
-                    try {
-                      // Simulate an exception in main isolate
-                      // throw 'a custom error string';
-                      // throw 333;
-                      throw CustomException(
-                        'This is a custom exception with additional context',
-                        code: 'DEMO_ERROR_001',
-                        additionalData: {
-                          'user_action': 'button_press',
-                          'timestamp': DateTime.now().millisecondsSinceEpoch,
-                          'feature_enabled': true,
-                        },
-                      );
-                    } catch (e, stack) {
-                      await Posthog().captureException(
-                        error: e,
-                        stackTrace: stack,
-                        properties: {
-                          'test_type': 'main_isolate_exception',
-                          'button_pressed': 'capture_exception_main',
-                          'exception_category': 'custom',
-                        },
-                      );
-
-                      if (mounted && context.mounted) {
-                        ScaffoldMessenger.of(context).showSnackBar(
-                          const SnackBar(
-                            content: Text(
-                                'Main isolate exception captured successfully! Check PostHog.'),
-                            backgroundColor: Colors.green,
-                            duration: Duration(seconds: 3),
-                          ),
-                        );
-                      }
-                    }
+                    await ErrorExample().causeHandledDivisionError();
                   },
                   child: const Text("Capture Exception"),
                 ),
-                ElevatedButton(
-                  style: ElevatedButton.styleFrom(
-                    backgroundColor: Colors.orange,
-                  ),
-                  onPressed: () async {
-                    await Posthog().captureException(
-                      error: 'No Stack Trace Error',
-                      properties: {'test_type': 'no_stack_trace'},
-                    );
-                  },
-                  child: const Text("Capture Exception (Missing Stack)"),
-                ),
                 const Divider(),
                 const Padding(
                   padding: EdgeInsets.all(8.0),
@@ -330,7 +295,7 @@ class InitialScreenState extends State<InitialScreen> {
                     backgroundColor: Colors.red,
                     foregroundColor: Colors.white,
                   ),
-                  onPressed: () {
+                  onPressed: () async {
                     if (mounted) {
                       ScaffoldMessenger.of(context).showSnackBar(
                         const SnackBar(
@@ -343,10 +308,7 @@ class InitialScreenState extends State<InitialScreen> {
                     }
 
                     // Test Flutter error handler by throwing in widget context
-                    throw const CustomException(
-                        'Test Flutter error for autocapture',
-                        code: 'FlutterErrorTest',
-                        additionalData: {'test_type': 'flutter_error'});
+                    await ErrorExample().causeHandledDivisionError();
                   },
                   child: const Text("Test Flutter Error Handler"),
                 ),
@@ -355,18 +317,10 @@ class InitialScreenState extends State<InitialScreen> {
                     backgroundColor: Colors.blue,
                     foregroundColor: Colors.white,
                   ),
-                  onPressed: () {
-                    // Test PlatformDispatcher error handler with Future
-                    Future.delayed(Duration.zero, () {
-                      throw const CustomException(
-                          'Test PlatformDispatcher error for autocapture',
-                          code: 'PlatformDispatcherTest',
-                          additionalData: {
-                            'test_type': 'platform_dispatcher_error'
-                          });
-                    });
+                  onPressed: () async {
+                    await ErrorExample().throwWithinDelayed();
 
-                    if (mounted) {
+                    if (mounted && context.mounted) {
                       ScaffoldMessenger.of(context).showSnackBar(
                         const SnackBar(
                           content: Text(
@@ -384,19 +338,11 @@ class InitialScreenState extends State<InitialScreen> {
                     backgroundColor: Colors.purple,
                     foregroundColor: Colors.white,
                   ),
-                  onPressed: () {
+                  onPressed: () async {
                     // Test isolate error listener by throwing in an async callback
-                    Timer(Duration.zero, () {
-                      throw const CustomException(
-                        'Isolate error for testing',
-                        code: 'IsolateHandlerTest',
-                        additionalData: {
-                          'test_type': 'isolate_error_listener_timer',
-                        },
-                      );
-                    });
+                    await ErrorExample().throwWithinTimer();
 
-                    if (mounted) {
+                    if (mounted && context.mounted) {
                       ScaffoldMessenger.of(context).showSnackBar(
                         const SnackBar(
                           content:

example/web/index.html

@@ -34,12 +34,20 @@
   <link rel="manifest" href="manifest.json">
 
   <script async>
-    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.full.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
     posthog.init(
       'phc_6lqCaCDCBEWdIGieihq5R2dZpPVbAUFISA75vFZow06',
       {
         api_host:'https://us.i.posthog.com',
         debug: true,
+        disable_session_recording: true,
+        autocapture: false,
+        disable_surveys: true,
+        rageclick: false,
+        enable_heatmaps: false,
+        capture_dead_clicks: false,
+        capture_pageview: false,
+        capture_pageleave: false,
       }
     )
   </script>

lib/posthog_flutter_web.dart

@@ -5,18 +5,25 @@ import 'dart:js_interop';
 
 import 'package:flutter/services.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+import 'package:posthog_flutter/src/error_tracking/dart_exception_processor.dart';
+import 'package:posthog_flutter/src/util/logging.dart';
+import 'package:posthog_flutter/src/utils/property_normalizer.dart';
 
 import 'src/posthog_config.dart';
 import 'src/posthog_flutter_platform_interface.dart';
 import 'src/posthog_flutter_web_handler.dart';
 import 'src/utils/capture_utils.dart';
-import 'src/utils/property_normalizer.dart';
 
 /// A web implementation of the PosthogFlutterPlatform of the PosthogFlutter plugin.
 class PosthogFlutterWeb extends PosthogFlutterPlatformInterface {
   /// Constructs a PosthogFlutterWeb
   PosthogFlutterWeb();
 
+  /// Stored configuration for accessing inAppIncludes and other settings
+  PostHogConfig? _config;
+
+  // TODO: we should change the $lib and $lib_version to be the flutter one when capturing things
+
   static void registerWith(Registrar registrar) {
     final channel = MethodChannel(
       'posthog_flutter',
@@ -59,6 +66,8 @@ class PosthogFlutterWeb extends PosthogFlutterPlatformInterface {
     // posthog?.callMethod('init'.toJS, config.apiKey.toJS, jsOptions);
 
     final ph = posthog;
+    _config = config;
+
     if (config.onFeatureFlags != null && ph != null) {
       final dartCallback = config.onFeatureFlags!;
 
@@ -252,6 +261,24 @@ class PosthogFlutterWeb extends PosthogFlutterPlatformInterface {
     StackTrace? stackTrace,
     Map<String, Object>? properties,
   }) async {
-    // Not implemented on web
+    try {
+      final exceptionData = DartExceptionProcessor.processException(
+        error: error,
+        stackTrace: stackTrace,
+        properties: properties,
+        inAppIncludes: _config?.errorTrackingConfig.inAppIncludes,
+        inAppExcludes: _config?.errorTrackingConfig.inAppExcludes,
+        inAppByDefault: _config?.errorTrackingConfig.inAppByDefault ?? true,
+      );
+
+      final normalizedData =
+          PropertyNormalizer.normalize(exceptionData.cast<String, Object>());
+
+      return handleWebMethodCall(MethodCall('captureException', {
+        'properties': normalizedData,
+      }));
+    } on Exception catch (exception) {
+      printIfDebug('Exception in captureException: $exception');
+    }
   }
 }

lib/src/error_tracking/chunk_ids.dart

@@ -0,0 +1 @@
+export 'chunk_ids_io.dart' if (dart.library.js_interop) 'chunk_ids_web.dart';

lib/src/error_tracking/chunk_ids_io.dart

@@ -0,0 +1,3 @@
+Map<String, String>? getPosthogChunkIds() {
+  return null;
+}

lib/src/error_tracking/chunk_ids_web.dart

@@ -0,0 +1,16 @@
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
+@JS('globalThis')
+external JSObject get globalThis;
+
+Map<String, String>? getPosthogChunkIds() {
+  final debugIdMapJS = globalThis['_posthogChunkIds'];
+  final debugIdMap = debugIdMapJS?.dartify() as Map<String, Object>?;
+  if (debugIdMap == null) {
+    return null;
+  }
+  return debugIdMap.map(
+    (key, value) => MapEntry(key.toString(), value.toString()),
+  );
+}