Sentry

Log in to sentry.io and navigate to Projects in the left sidebar. Click Create Project and select Flutter from the platform list (it is under Mobile). Give the project a name that matches your FlutterFlow app — for example, MyApp-Production. Click Create Project. Sentry will display a getting-started page with a code snippet. You do not need to follow the full Flutter SDK setup instructions from this page because FlutterFlow handles dependency management differently — what you need is the DSN string, which looks like: https://abc123@o456.ingest.sentry.io/789. Copy this value and paste it into a secure note. The DSN is a client-side ingestion key — it is designed to live inside mobile apps and be shipped to devices, so it is not a high-security secret like a database password. However, it is unique to your project and theoretically lets others submit events to your quota, so treat it with basic discretion (do not post it in public repos). To find the DSN again later: go to your Sentry project's Settings > Client Keys (DSN). Sentry also lets you set up Alerts for new issues and error-rate thresholds — set up at least one email alert now so you receive a notification the first time a real crash event arrives. This confirms the integration is working before you ship to real users.

In FlutterFlow, navigate to Custom Code in the left navigation panel (the icon looks like angle brackets <>). Click the + Add button and choose Action. Name the action initSentry. In the Return Value section at the top, set it to Void (this action has no return value — it is a side-effect initialization). Now scroll down to the Dependencies section of the Custom Action editor. This is where you declare pub.dev packages that your Dart code will import. Click + Add Dependency. In the Package Name field enter sentry_flutter exactly as written (all lowercase, underscore). In the Version field, enter the latest stable version number — check pub.dev/packages/sentry_flutter for the current version. At the time of this writing a recent version is 8.x; enter the version without a caret prefix (FlutterFlow handles version constraints). Click Add. You should now see sentry_flutter listed under Dependencies in your Custom Action. This tells FlutterFlow's build system to include the package in the compiled app. Note that adding a dependency does not immediately break your canvas preview — dependencies only matter when the app compiles. If FlutterFlow shows a warning that the package cannot be resolved in preview mode, that is expected behavior for packages that use native platform channels. Do not add multiple Sentry packages. The sentry_flutter package already includes the core sentry SDK as a transitive dependency — you only need sentry_flutter.

In the Dart code editor of your initSentry Custom Action, paste the initialization code below. This code imports sentry_flutter, calls SentryFlutter.init() with an options callback that sets the DSN, and enables automatic performance monitoring and session tracking. The DSN is passed in as a parameter so it is not hardcoded in the action — you will set it when calling the action from the Action Flow. You need to declare one Action Parameter for the DSN string. Click + Add Parameter in the Parameters section of the Custom Action. Name it dsn, set the type to String, and mark it as required. This parameter appears in the {{ dsn }} placeholder in the code. After pasting the code, click the Compile button (or the checkmark icon) in the Custom Code editor. FlutterFlow compiles the Dart in its sandbox and shows errors or success. If you see 'Package not found' errors, the dependency declaration from the previous step has not propagated yet — wait a few seconds and try again. A successful compile shows a green check. If you see analyzer errors about the SentryFlutter class not being found, confirm the package name is sentry_flutter (not sentry or flutter_sentry) and the version number is correct. One important note: the SentryFlutter.init() call is async and must be awaited. The Custom Action itself needs to be marked as async (FlutterFlow adds async to Custom Actions automatically when you await inside them). If the action does not execute correctly at launch, check that the Action Flow on your root page awaits this action before doing anything else.

1// FlutterFlow Custom Action: initSentry
2// Dependencies: sentry_flutter (latest version)
3
4import 'package:sentry_flutter/sentry_flutter.dart';
5
6Future initSentry(String dsn) async {
7  await SentryFlutter.init(
8    (options) {
9      options.dsn = dsn;
10      // Enable automatic performance monitoring
11      options.tracesSampleRate = 1.0;
12      // Enable automatic session tracking
13      options.autoSessionTrackingInterval = const Duration(milliseconds: 30000);
14      // Capture Flutter framework errors automatically
15      options.enableAutoSessionTracking = true;
16    },
17    appRunner: () {}, // FlutterFlow manages the app runner
18  );
19
20  // Test: capture a test breadcrumb to confirm initialization
21  Sentry.addBreadcrumb(
22    Breadcrumb(
23      message: 'Sentry initialized successfully',
24      level: SentryLevel.info,
25    ),
26  );
27}

Now wire the initSentry Custom Action to run when the app starts, before any other logic executes. In FlutterFlow, navigate to your app's entry screen — typically the page your app opens to first (often a splash screen, onboarding screen, or main navigation screen depending on your app structure). This should be the first page users see before any authentication check or content loads. Click on that page to select it. Open the Actions panel for the page itself (not any widget on the page) by clicking the lightning bolt icon in the top-right corner of the properties panel while the page is selected. Add an On Page Load action. In the Action Flow Editor that opens, click + Add Action. In the search box, type initSentry or scroll to find it under Custom Actions. Select it. FlutterFlow shows a field for the dsn parameter — paste your Sentry DSN string here. Because the DSN is not a high-security secret (it is designed to be in client apps), you can enter it directly in this field. If your app has authentication and users can reach multiple pages before the root page finishes loading, you may want to place this on the very first page that renders, using an On Page Load trigger that runs in the background without blocking the UI. Sentry initialization is fast (sub-100ms in most cases) but the await call means it must complete before the appRunner logic runs. IMPORTANT: Custom Actions do not execute in the FlutterFlow canvas preview or in the standard Test mode that runs in the browser. To verify the action runs, use FlutterFlow's Run mode (which builds and serves the web version of your app) or download an APK/IPA and test on a physical device. The next step covers sending a test exception to confirm events arrive in Sentry.

With the initSentry action wired up, you need to confirm it actually works by sending a deliberate test error to Sentry. Add a temporary button to any screen in your app — something you can tap during testing that will not be visible to real users. In the button's action flow, add a Custom Action call. You will need a second simple Custom Action for this. Create another Custom Action named sendTestError with no parameters and the following code. This action manually captures an exception. Once testing is complete, you can remove this button and action, or keep the captureException call in your real error-handling logic. To actually test it: click Run in the FlutterFlow header bar. This builds and serves your app in web mode (requires a FlutterFlow paid plan or the built-in Run feature). Wait for the build to complete, then tap the test button in the running app. Open your Sentry project dashboard and navigate to Issues. A new issue titled 'Test error from FlutterFlow' should appear within about 30 seconds. If it does not appear after two minutes, check: (1) the DSN in your initSentry action matches the Sentry project exactly, (2) you are viewing the correct Sentry project, (3) the app was actually run via Run mode or a device, not the canvas preview. Alternatively, test with a physical device: export the APK from FlutterFlow (requires Dev mode or a paid plan), install it on an Android device, tap the test button, and check Sentry. For iOS, use TestFlight. Once you see the test error in Sentry, delete or disable the test button and keep only the production error handling logic.

1// FlutterFlow Custom Action: sendTestError
2// Dependencies: sentry_flutter (same package, already declared)
3
4import 'package:sentry_flutter/sentry_flutter.dart';
5
6Future sendTestError() async {
7  try {
8    // Deliberately throw an exception
9    throw Exception('Test error from FlutterFlow — Sentry integration check');
10  } catch (exception, stackTrace) {
11    await Sentry.captureException(
12      exception,
13      stackTrace: stackTrace,
14      hint: Hint.withMap({
15        'source': 'Manual test from FlutterFlow debug button'
16      }),
17    );
18  }
19}
20
21// For production error handling, wrap API calls or risky operations:
22// try {
23//   final result = await myApiCall();
24// } catch (e, stackTrace) {
25//   await Sentry.captureException(e, stackTrace: stackTrace);
26//   // Show user-friendly error message
27// }