From db0a0c60aed621fac64ee5ca2fea182ca8f807ae Mon Sep 17 00:00:00 2001 From: Steven Eubank Date: Wed, 9 Apr 2025 12:50:52 +0200 Subject: [PATCH] Add SentryNavigatorObserver in onboarding Without the SentryNavigatorObserver tracing with spans and errors on page loads and navigations doesn't work OOTB This adds SentryNavigatorObserver() to config snippets in the main page and manual - it is a bit confusing as a follow up to wizard to have any config - what doesn't the wizard do? - explanation for the SentryWidget and SentryNavigatorObserver is needed in these docs. As I don't get what changes in the product experience from this config - do i need all this dart and custom? - i think an image of a page load with an error would help here for the "reason why" - these changes are the same in both files, should it be an include? --- docs/platforms/dart/guides/flutter/index.mdx | 30 ++++++++++++++--- .../dart/guides/flutter/manual-setup.mdx | 32 +++++++++++++++---- 2 files changed, 51 insertions(+), 11 deletions(-) diff --git a/docs/platforms/dart/guides/flutter/index.mdx b/docs/platforms/dart/guides/flutter/index.mdx index 0a5a97b22c5fc..71e5a2f398948 100644 --- a/docs/platforms/dart/guides/flutter/index.mdx +++ b/docs/platforms/dart/guides/flutter/index.mdx @@ -61,7 +61,7 @@ npx @sentry/wizard@latest -i flutter Configuration should happen as early as possible in your application's lifecycle. -```dart {"onboardingOptions": {"performance": "11-13", "profiling": "14-17"}} +```dart {"onboardingOptions": {"performance": "11-13, 24-31", "profiling": "14-17"}} import 'package:flutter/widgets.dart'; import 'package:sentry_flutter/sentry_flutter.dart'; @@ -81,8 +81,16 @@ Future main() async { options.profilesSampleRate = 1.0; }, appRunner: () => runApp( + // SentryWidget automatically captures widget lifecycle events + // and creates breadcrumbs for important Flutter events SentryWidget( - child: MyApp(), + child: MyApp( + // When tracing is enabled, add SentryNavigatorObserver to connect + // page navigations, spans, and errors in a single trace + navigatorObservers: [ + SentryNavigatorObserver() + ], + ), ), ), ); @@ -92,7 +100,7 @@ Future main() async { } ``` -```dart {tabTitle:With custom zone} {"onboardingOptions": {"performance": "19-21", "profiling": "22-25"}} +```dart {tabTitle:With custom zone} {"onboardingOptions": {"performance": "19-21, 34-41", "profiling": "22-25"}} import 'package:flutter/widgets.dart'; import 'package:sentry_flutter/sentry_flutter.dart'; @@ -120,12 +128,20 @@ Future main() async { options.profilesSampleRate = 1.0; }, appRunner: () => runApp( + // SentryWidget automatically captures widget lifecycle events + // and creates breadcrumbs for important Flutter events SentryWidget( - child: MyApp(), + child: MyApp( + // When tracing is enabled, add SentryNavigatorObserver to connect + // page navigations, spans, and errors in a single trace + navigatorObservers: [ + SentryNavigatorObserver() + ], + ), ), ), ); - } (error, stackTrace) { + }, (error, stackTrace) { // Automatically sends errors to Sentry, no need to do any // captureException calls on your part. // On top of that, you can do your own custom stuff in this callback. @@ -136,6 +152,10 @@ Future main() async { } ``` + +When you enable tracing, make sure to provide route names so Sentry can properly identify and track navigation between screens. Learn more about routing instrumentation + + ## Verify Verify that your app is sending events to Sentry by adding the following snippet, which includes an intentional error. You should see the error reported in Sentry within a few minutes. diff --git a/docs/platforms/dart/guides/flutter/manual-setup.mdx b/docs/platforms/dart/guides/flutter/manual-setup.mdx index d8e7241aa88dd..f5f331ba57423 100644 --- a/docs/platforms/dart/guides/flutter/manual-setup.mdx +++ b/docs/platforms/dart/guides/flutter/manual-setup.mdx @@ -27,7 +27,7 @@ dependencies: Configuration should happen as early as possible in your application's lifecycle. -```dart {"onboardingOptions": {"performance": "11-13", "profiling": "14-17"}} +```dart {"onboardingOptions": {"performance": "11-13, 24-31", "profiling": "14-17"}} import 'package:flutter/widgets.dart'; import 'package:sentry_flutter/sentry_flutter.dart'; @@ -47,8 +47,16 @@ Future main() async { options.profilesSampleRate = 1.0; }, appRunner: () => runApp( + // SentryWidget automatically captures widget lifecycle events + // and creates breadcrumbs for important Flutter events SentryWidget( - child: MyApp(), + child: MyApp( + // When tracing is enabled, add SentryNavigatorObserver to connect + // page navigations, spans, and errors in a single trace + navigatorObservers: [ + SentryNavigatorObserver() + ], + ), ), ), ); @@ -58,7 +66,7 @@ Future main() async { } ``` -```dart {tabTitle:With custom zone} {"onboardingOptions": {"performance": "19-21", "profiling": "22-25"}} +```dart {tabTitle:With custom zone} {"onboardingOptions": {"performance": "19-21, 34-41", "profiling": "22-25"}} import 'package:flutter/widgets.dart'; import 'package:sentry_flutter/sentry_flutter.dart'; @@ -75,7 +83,7 @@ Future main() async { (options) { options.dsn = '___PUBLIC_DSN___'; // Adds request headers and IP for users, - // visit: https://docs.sentry.io/platforms/dart/guides//data-management/data-collected/ for more info + // visit: https://docs.sentry.io/platforms/dart/guides/flutter/data-management/data-collected/ for more info options.sendDefaultPii = true; // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing. // We recommend adjusting this value in production. @@ -86,12 +94,20 @@ Future main() async { options.profilesSampleRate = 1.0; }, appRunner: () => runApp( + // SentryWidget automatically captures widget lifecycle events + // and creates breadcrumbs for important Flutter events SentryWidget( - child: MyApp(), + child: MyApp( + // When tracing is enabled, add SentryNavigatorObserver to connect + // page navigations, spans, and errors in a single trace + navigatorObservers: [ + SentryNavigatorObserver() + ], + ), ), ), ); - } (error, stackTrace) { + }, (error, stackTrace) { // Automatically sends errors to Sentry, no need to do any // captureException calls on your part. // On top of that, you can do your own custom stuff in this callback. @@ -102,6 +118,10 @@ Future main() async { } ``` + +When you enable tracing, make sure to provide route names so Sentry can properly identify and track navigation between screens. Learn more about routing instrumentation + + ## Verify Verify that your app is sending events to Sentry by adding the following snippet, which includes an intentional error. You should see the error reported in Sentry within a few minutes.