feat: ttid/ttfd

dart/lib/sentry.dart

@@ -49,6 +49,8 @@ export 'src/utils/http_header_utils.dart';
 // ignore: invalid_export_of_internal_element
 export 'src/sentry_trace_origins.dart';
 // ignore: invalid_export_of_internal_element
+export 'src/sentry_span_operations.dart';
+// ignore: invalid_export_of_internal_element
 export 'src/utils.dart';
 // spotlight debugging
 export 'src/spotlight.dart';

dart/lib/src/sentry_span_operations.dart

@@ -0,0 +1,8 @@
+import 'package:meta/meta.dart';
+
+@internal
+class SentrySpanOperations {
+  static const String uiLoad = 'ui.load';
+  static const String uiTimeToInitialDisplay = 'ui.load.initial_display';
+  static const String uiTimeToFullDisplay = 'ui.load.full_display';
+}

dart/lib/src/sentry_trace_origins.dart

@@ -27,4 +27,6 @@ class SentryTraceOrigins {
   static const autoDbDriftQueryExecutor = 'auto.db.drift.query.executor';
   static const autoDbDriftTransactionExecutor =
       'auto.db.drift.transaction.executor';
+  static const autoUiTimeToDisplay = 'auto.ui.time_to_display';
+  static const manualUiTimeToDisplay = 'manual.ui.time_to_display';
 }

dart/lib/src/sentry_tracer.dart

@@ -109,18 +109,24 @@ class SentryTracer extends ISentrySpan {
       }
 
       var _rootEndTimestamp = commonEndTimestamp;
+
+      // Trim the end timestamp of the transaction to the very last timestamp of child spans
       if (_trimEnd && children.isNotEmpty) {
-        final childEndTimestamps = children
-            .where((child) => child.endTimestamp != null)
-            .map((child) => child.endTimestamp!);
-
-        if (childEndTimestamps.isNotEmpty) {
-          final oldestChildEndTimestamp =
-              childEndTimestamps.reduce((a, b) => a.isAfter(b) ? a : b);
-          if (_rootEndTimestamp.isAfter(oldestChildEndTimestamp)) {
-            _rootEndTimestamp = oldestChildEndTimestamp;
+        DateTime? latestEndTime;
+
+        for (var child in children) {
+          final childEndTimestamp = child.endTimestamp;
+          if (childEndTimestamp != null) {
+            if (latestEndTime == null ||
+                childEndTimestamp.isAfter(latestEndTime)) {
+              latestEndTime = child.endTimestamp;
+            }
           }
         }
+
+        if (latestEndTime != null) {
+          _rootEndTimestamp = latestEndTime;
+        }
       }
 
       // the callback should run before because if the span is finished,
@@ -362,7 +368,8 @@ class SentryTracer extends ISentrySpan {
       Dsn.parse(_hub.options.dsn!).publicKey,
       release: _hub.options.release,
       environment: _hub.options.environment,
-      userId: null, // because of PII not sending it for now
+      userId: null,
+      // because of PII not sending it for now
       userSegment: user?.segment,
       transaction:
           _isHighQualityTransactionName(transactionNameSource) ? name : null,

flutter/example/lib/auto_close_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:sentry/sentry.dart';
+import 'package:sentry_flutter/sentry_flutter.dart';
 
 /// This screen is only used to demonstrate how route navigation works.
 /// Init will create a child span and pop the screen after 3 seconds.
@@ -25,9 +26,10 @@ class AutoCloseScreenState extends State<AutoCloseScreen> {
     final childSpan = activeSpan?.startChild('complex operation',
         description: 'running a $delayInSeconds seconds operation');
     await Future.delayed(const Duration(seconds: delayInSeconds));
-    childSpan?.finish();
+    await childSpan?.finish();
+    SentryFlutter.reportFullyDisplayed();
     // ignore: use_build_context_synchronously
-    Navigator.of(context).pop();
+    // Navigator.of(context).pop();
   }
 
   @override

flutter/example/lib/main.dart

@@ -13,6 +13,7 @@ import 'package:sentry_flutter/sentry_flutter.dart';
 import 'package:sentry_isar/sentry_isar.dart';
 import 'package:sentry_sqflite/sentry_sqflite.dart';
 import 'package:sqflite/sqflite.dart';
+
 // import 'package:sqflite_common_ffi/sqflite_ffi.dart';
 // import 'package:sqflite_common_ffi_web/sqflite_ffi_web.dart';
 import 'package:universal_platform/universal_platform.dart';
@@ -71,10 +72,13 @@ Future<void> setupSentry(AppRunner appRunner, String dsn,
     options.attachScreenshot = true;
     options.screenshotQuality = SentryScreenshotQuality.low;
     options.attachViewHierarchy = true;
+    options.enableTimeToFullDisplayTracing = false;
+    options.spotlight = Spotlight(enabled: true);
     // We can enable Sentry debug logging during development. This is likely
     // going to log too much for your app, but can be useful when figuring out
     // configuration issues, e.g. finding out why your events are not uploaded.
     options.debug = true;
+    // options.enableTimeToFullDisplayTracing = true;
 
     options.maxRequestBodySize = MaxRequestBodySize.always;
     options.maxResponseBodySize = MaxResponseBodySize.always;
@@ -98,6 +102,16 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
+  @override
+  void initState() {
+    super.initState();
+    // Example of reporting TTFD
+    Future.delayed(
+      const Duration(seconds: 1),
+      () => SentryFlutter.reportFullyDisplayed(),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return feedback.BetterFeedback(
@@ -719,9 +733,10 @@ void navigateToAutoCloseScreen(BuildContext context) {
   Navigator.push(
     context,
     MaterialPageRoute(
-      settings: const RouteSettings(name: 'AutoCloseScreen'),
-      builder: (context) => const AutoCloseScreen(),
-    ),
+        settings: const RouteSettings(name: 'AutoCloseScreen'),
+        builder: (context) => SentryDisplayWidget(
+              child: const AutoCloseScreen(),
+            )),
   );
 }
 
@@ -838,7 +853,11 @@ int loop(int val) {
 }
 
 class SecondaryScaffold extends StatelessWidget {
-  const SecondaryScaffold({Key? key}) : super(key: key);
+  SecondaryScaffold({Key? key}) : super(key: key) {
+    Timer(const Duration(milliseconds: 500), () {
+      SentryFlutter.reportFullyDisplayed();
+    });
+  }
 
   static Future<void> openSecondaryScaffold(BuildContext context) {
     return Navigator.push(
@@ -847,7 +866,7 @@ class SecondaryScaffold extends StatelessWidget {
         settings:
             const RouteSettings(name: 'SecondaryScaffold', arguments: 'foobar'),
         builder: (context) {
-          return const SecondaryScaffold();
+          return SecondaryScaffold();
         },
       ),
     );

flutter/lib/sentry_flutter.dart

@@ -16,3 +16,4 @@ export 'src/screenshot/sentry_screenshot_quality.dart';
 export 'src/user_interaction/sentry_user_interaction_widget.dart';
 export 'src/binding_wrapper.dart';
 export 'src/sentry_widget.dart';
+export 'src/navigation/sentry_display_widget.dart';

flutter/lib/src/event_processor/native_app_start_event_processor.dart

@@ -2,57 +2,34 @@ import 'dart:async';
 
 import 'package:sentry/sentry.dart';
 
-import '../native/sentry_native.dart';
+import '../../sentry_flutter.dart';
+import '../integrations/app_start/app_start_tracker.dart';
 
 /// EventProcessor that enriches [SentryTransaction] objects with app start
 /// measurement.
 class NativeAppStartEventProcessor implements EventProcessor {
-  /// We filter out App starts more than 60s
-  static const _maxAppStartMillis = 60000;
+  final AppStartTracker? _appStartTracker;
 
-  NativeAppStartEventProcessor(
-    this._native,
-  );
+  NativeAppStartEventProcessor({
+    AppStartTracker? appStartTracker,
+  }) : _appStartTracker = appStartTracker ?? AppStartTracker();
 
-  final SentryNative _native;
+  bool _didAddAppStartMeasurement = false;
 
   @override
   Future<SentryEvent?> apply(SentryEvent event, {Hint? hint}) async {
-    final appStartEnd = _native.appStartEnd;
-
-    if (appStartEnd != null &&
-        event is SentryTransaction &&
-        !_native.didFetchAppStart) {
-      final nativeAppStart = await _native.fetchNativeAppStart();
-      if (nativeAppStart == null) {
-        return event;
-      }
-      final measurement = nativeAppStart.toMeasurement(appStartEnd);
-      // We filter out app start more than 60s.
-      // This could be due to many different reasons.
-      // If you do the manual init and init the SDK too late and it does not
-      // compute the app start end in the very first Screen.
-      // If the process starts but the App isn't in the foreground.
-      // If the system forked the process earlier to accelerate the app start.
-      // And some unknown reasons that could not be reproduced.
-      // We've seen app starts with hours, days and even months.
-      if (measurement.value >= _maxAppStartMillis) {
-        return event;
-      }
+    if (!_didAddAppStartMeasurement || event is! SentryTransaction) {
+      return event;
+    }
+
+    final appStartInfo = await _appStartTracker?.getAppStartInfo();
+    final measurement = appStartInfo?.measurement;
+
+    if (measurement != null) {
       event.measurements[measurement.name] = measurement;
+      _didAddAppStartMeasurement = true;
     }
     return event;
   }
 }
 
-extension NativeAppStartMeasurement on NativeAppStart {
-  SentryMeasurement toMeasurement(DateTime appStartEnd) {
-    final appStartDateTime =
-        DateTime.fromMillisecondsSinceEpoch(appStartTime.toInt());
-    final duration = appStartEnd.difference(appStartDateTime);
-
-    return isColdStart
-        ? SentryMeasurement.coldAppStart(duration)
-        : SentryMeasurement.warmAppStart(duration);
-  }
-}

flutter/lib/src/frame_callback_handler.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/scheduler.dart';
+import 'package:flutter/widgets.dart';
+
+abstract class FrameCallbackHandler {
+  void addPostFrameCallback(FrameCallback callback);
+}
+
+class DefaultFrameCallbackHandler implements FrameCallbackHandler {
+  @override
+  void addPostFrameCallback(FrameCallback callback) {
+    WidgetsBinding.instance.addPostFrameCallback(callback);
+  }
+}

flutter/lib/src/integrations/app_start/app_start_tracker.dart

@@ -0,0 +1,39 @@
+import 'dart:async';
+
+import 'package:meta/meta.dart';
+
+import '../../../sentry_flutter.dart';
+
+@internal
+class AppStartInfo {
+  final DateTime start;
+  final DateTime end;
+  final SentryMeasurement measurement;
+
+  AppStartInfo(this.start, this.end, this.measurement);
+}
+
+@internal
+class AppStartTracker {
+  static final AppStartTracker _instance = AppStartTracker._();
+  factory AppStartTracker() => _instance;
+  AppStartTracker._();
+
+  Completer<AppStartInfo?> _appStartCompleter = Completer<AppStartInfo?>();
+  AppStartInfo? _appStartInfo;
+
+  void setAppStartInfo(AppStartInfo? appStartInfo) {
+    _appStartInfo = appStartInfo;
+    if (!_appStartCompleter.isCompleted) {
+      _appStartCompleter = Completer<AppStartInfo?>();
+    }
+    _appStartCompleter.complete(appStartInfo);
+  }
+
+  Future<AppStartInfo?> getAppStartInfo() {
+    if (_appStartInfo != null) {
+      return Future.value(_appStartInfo);
+    }
+    return _appStartCompleter.future;
+  }
+}

flutter/lib/src/integrations/native_app_start_integration.dart

@@ -1,17 +1,26 @@
 import 'package:flutter/scheduler.dart';
+import 'package:meta/meta.dart';
 import 'package:sentry/sentry.dart';
 
+import '../../sentry_flutter.dart';
 import '../sentry_flutter_options.dart';
 import '../native/sentry_native.dart';
 import '../event_processor/native_app_start_event_processor.dart';
+import 'app_start/app_start_tracker.dart';
 
 /// Integration which handles communication with native frameworks in order to
 /// enrich [SentryTransaction] objects with app start data for mobile vitals.
 class NativeAppStartIntegration extends Integration<SentryFlutterOptions> {
-  NativeAppStartIntegration(this._native, this._schedulerBindingProvider);
+  NativeAppStartIntegration(this._native, this._schedulerBindingProvider,
+      {AppStartTracker? appStartTracker})
+      : _appStartTracker = appStartTracker ?? AppStartTracker();
 
   final SentryNative _native;
   final SchedulerBindingProvider _schedulerBindingProvider;
+  final AppStartTracker? _appStartTracker;
+
+  /// We filter out App starts more than 60s
+  static const _maxAppStartMillis = 60000;
 
   @override
   void call(Hub hub, SentryFlutterOptions options) {
@@ -21,18 +30,64 @@ class NativeAppStartIntegration extends Integration<SentryFlutterOptions> {
         options.logger(SentryLevel.debug,
             'Scheduler binding is null. Can\'t auto detect app start time.');
       } else {
-        schedulerBinding.addPostFrameCallback((timeStamp) {
+        schedulerBinding.addPostFrameCallback((timeStamp) async {
           // ignore: invalid_use_of_internal_member
-          _native.appStartEnd = options.clock();
+          final appStartEnd = options.clock();
+          _native.appStartEnd = appStartEnd;
+
+          if (_native.didFetchAppStart) {
+            _appStartTracker?.setAppStartInfo(null);
+            return;
+          }
+
+          final nativeAppStart = await _native.fetchNativeAppStart();
+          final measurement = nativeAppStart?.toMeasurement(appStartEnd);
+
+          // We filter out app start more than 60s.
+          // This could be due to many different reasons.
+          // If you do the manual init and init the SDK too late and it does not
+          // compute the app start end in the very first Screen.
+          // If the process starts but the App isn't in the foreground.
+          // If the system forked the process earlier to accelerate the app start.
+          // And some unknown reasons that could not be reproduced.
+          // We've seen app starts with hours, days and even months.
+          if (nativeAppStart == null ||
+              measurement == null ||
+              measurement.value > _maxAppStartMillis) {
+            _appStartTracker?.setAppStartInfo(null);
+            return;
+          }
+
+          final appStartInfo = AppStartInfo(
+            DateTime.fromMillisecondsSinceEpoch(
+                nativeAppStart.appStartTime.toInt()),
+            appStartEnd,
+            measurement,
+          );
+
+          _appStartTracker?.setAppStartInfo(appStartInfo);
         });
       }
     }
 
-    options.addEventProcessor(NativeAppStartEventProcessor(_native));
+    options.addEventProcessor(
+        NativeAppStartEventProcessor(appStartTracker: _appStartTracker));
 
     options.sdk.addIntegration('nativeAppStartIntegration');
   }
 }
 
 /// Used to provide scheduler binding at call time.
 typedef SchedulerBindingProvider = SchedulerBinding? Function();
+
+extension NativeAppStartMeasurement on NativeAppStart {
+  SentryMeasurement toMeasurement(DateTime appStartEnd) {
+    final appStartDateTime =
+    DateTime.fromMillisecondsSinceEpoch(appStartTime.toInt());
+    final duration = appStartEnd.difference(appStartDateTime);
+
+    return isColdStart
+        ? SentryMeasurement.coldAppStart(duration)
+        : SentryMeasurement.warmAppStart(duration);
+  }
+}