Skip to content

Quick Start

This document provides the shortest path to integrate the Flutter RUM SDK, helping you complete a verifiable data report with minimal steps.

Prerequisites

Before starting, please complete the following preparations:

  1. Create Android and iOS applications in RUM respectively, and obtain the corresponding appId.
  2. Confirm the reporting address and authentication method:
  3. Local environment deployment: Prepare datakitUrl.
  4. Public DataWay: Prepare datawayUrl and cliToken.
  5. Confirm that the SDK installation is completed in the project.

Integration Steps

  1. Install ft_mobile_agent_flutter.
  2. Call FTMobileFlutter.sdkConfig when the application starts.
  3. Initialize FTRUMManager().setConfig(...), and enable Flutter exception automatic collection.
  4. Add FTRouteObserver() to MaterialApp.navigatorObservers.
  5. If logs and APM are needed, then initialize FTLogger and FTTracer.
  6. Confirm in the console that data has been successfully reported.

Install SDK

For installation methods, please refer directly to Application Access.

Minimal Initialization Example

void main() async {
  runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();

    // Use datakitUrl for local environment deployment
    await FTMobileFlutter.sdkConfig(
      datawayUrl: datawayUrl,
      cliToken: cliToken,
      debug: true,
    );

    await FTRUMManager().setConfig(
      androidAppId: appAndroidId,
      iOSAppId: appIOSId,
      enableUserResource: true,
    );

    // Flutter exception automatic collection
    FlutterError.onError = FTRUMManager().addFlutterError;

    runApp(const MyApp());
  }, (Object error, StackTrace stack) {
    FTRUMManager().addError(error, stack);
  });
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [
        // Automatically collect page switches
        FTRouteObserver(),
      ],
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

If using local environment deployment, replace datawayUrl and cliToken with datakitUrl.

If you need to perform View automatic collection based on named routes, please continue to configure the routing table in MaterialApp.routes. For detailed methods, please refer to Data Collection Custom Rules.

Optional: Initialize Log and Trace

If you also need log collection or APM, you can continue to add the following initialization:

await FTLogger().logConfig(
  enableCustomLog: true,
  enableLinkRumData: true,
);

await FTTracer().setConfig(
  enableAutoTrace: true,
  enableLinkRUMData: true,
);

Verify Integration Success

  1. Keep debug: true enabled and run the application.
  2. Open a page, perform a route jump, or initiate a network request.
  3. Confirm in the Flutter, Android Studio, or Xcode console that logs related to SDK initialization and data synchronization appear.
  4. Return to the Guance console and confirm that corresponding RUM data has appeared in the application.

If further troubleshooting is needed, please refer to Troubleshooting.

Next Steps