Skip to content

Add SentryNavigatorObserver in onboarding #13309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
smeubank wants to merge 1 commit into
base: master
Choose a base branch
from
+51 −11
Draft

Add SentryNavigatorObserver in onboarding #13309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions docs/platforms/dart/guides/flutter/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -81,8 +81,16 @@ Future<void> 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()
],
Comment on lines +88 to +92
Copy link
Contributor

@buenaflor buenaflor Apr 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not added to a generic MyApp, it will depend on what framework the user uses

for example:

final router = GoRouter(
  routes: ...,
  observers: [SentryNavigatorObserver()],
);

vs

return MaterialApp(
  title: 'My Widget',
  home: MyWidget(),
  navigatorObservers: [
    SentryNavigatorObserver()
  ],
);

Not sure how we are going to unify this

Copy link
Contributor Author

@smeubank smeubank Apr 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@buenaflor how many frameworks are there? is there a finite number of options, or is that there are X frameworks, and then they can also just do it free form to extent however they want?

Is there a to 2-3 ways a user might set it up?

Copy link
Contributor

@buenaflor buenaflor Apr 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there are plenty frameworks but according to download stats these two are the most popular (the first one above is GoRouter a 3rd party package and the second one is the default one provided by Flutter)

Maybe we could add a note that for all other cases the user has to add the navigatorobserver manually but don't provide exact instructions how?

Copy link
Contributor Author

@smeubank smeubank Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds reasonable

),
),
),
);
Expand All @@ -92,7 +100,7 @@ Future<void> 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';

Expand Down Expand Up @@ -120,12 +128,20 @@ Future<void> 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.
Expand All @@ -136,6 +152,10 @@ Future<void> main() async {
}
```

<Alert level="info">
When you enable tracing, make sure to provide route names so Sentry can properly identify and track navigation between screens. <PlatformLink to="/integrations/routing-instrumentation/">Learn more about routing instrumentation</PlatformLink>
</Alert>

## 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.
Expand Down
32 changes: 26 additions & 6 deletions docs/platforms/dart/guides/flutter/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -47,8 +47,16 @@ Future<void> 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()
],
),
),
),
);
Expand All @@ -58,7 +66,7 @@ Future<void> 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';

Expand All @@ -75,7 +83,7 @@ Future<void> 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.
Expand All @@ -86,12 +94,20 @@ Future<void> 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.
Expand All @@ -102,6 +118,10 @@ Future<void> main() async {
}
```

<Alert level="info">
When you enable tracing, make sure to provide route names so Sentry can properly identify and track navigation between screens. <PlatformLink to="/integrations/routing-instrumentation/">Learn more about routing instrumentation</PlatformLink>
</Alert>

## 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.
Expand Down