Monitor your Flutter app

Monitor your Flutter application with our New Relic Flutter agent. Capture Dart errors, track specific network requests, use distributed tracing to drill down into handled exceptions, and create custom tracking events and metrics to fully capture your end users' experience.

Summary view of a flutter app in New Relic

one.newrelic.com > Mobile > (select an app) > Summary: View Flutter data, track HTTP requests and errors, and monitor how your app is performing over time.

Ready to get started? Follow the steps below!

Install the Flutter agent

Step 1 of 5

Review the requirements

Before you install the Flutter agent, make sure your Flutter app meets these version requirements:

Flutter 2.5.0 or higher
Dart versions 2.16.2 or higher, up to but not including 3.0.0

For Android-native apps:

Android API 24 or higher
See Android-native requirements

For iOS-native apps:

See iOS-native requirements

Step 2 of 5

Add the Flutter agent to your project

First, you'll need to add the Flutter agent into your dart project. In your pubspec.yaml, add the following to dependencies:

dependencies:
    newrelic_mobile: 0.0.1

Step 3 of 5

Copy your application token

The application token is used for New Relic to authenticate your Flutter app's data.

To view and copy your application token in the New Relic UI:

Go to one.newrelic.com, click Add data, then click Mobile.
Select your Flutter app.
Go to Settings > Application and copy the displayed Application token.

You'll add this application token in the next step.

Step 4 of 5

Configure your Flutter project

In your Flutter project, open main.dart and add the following code:

import 'package:newrelic_mobile/newrelic_mobile.dart';

    var appToken = "";

    if (Platform.isAndroid) {
        appToken = "<android app token>"; // Replace with your application token copied from the New Relic UI. 
    } else if (Platform.isIOS) {
        appToken = "<ios app token>"; // Replace with your application token copied from the New Relic UI. 
    }

    Config config =
        Config(accessToken: appToken,

        //Android Specific
        // Optional: Enable or disable collection of event data.
        analyticsEventEnabled: true,

        // Optional: Enable or disable reporting successful HTTP requests to the MobileRequest event type.
        networkErrorRequestEnabled: true,

        // Optional: Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
        networkRequestEnabled: true,

        // Optional: Enable or disable crash reporting.
        crashReportingEnabled: true,

        // Optional: Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
        interactionTracingEnabled: true,

        // Optional: Enable or disable capture of HTTP response bodies for HTTP error traces and MobileRequestError events.
        httpResponseBodyCaptureEnabled: true,

        // Optional: Enable or disable agent logging.
        loggingEnabled: true,

        // iOS specific
        // Optional: Enable or disable automatic instrumentation of WebViews
        webViewInstrumentation: true,

        //Optional: Enable or disable Print Statements as Analytics Events
        printStatementAsEventsEnabled : true,

        // Optional: Enable or disable automatic instrumentation of HTTP Request
        httpInstrumentationEnabled:true
        );

    NewrelicMobile.instance.start(config, () {
        runApp(MyApp());
    });

    class MyApp extends StatelessWidget {
    ....

Make sure you pasted your application token(s) (copied from Step 3) into appToken = "" in the code above. If you're monitoring both Android-native and iOS-native apps, you'll need to add separate tokens for both.

Step 5 of 5

(Android-only) Configure your Android app

If you have an Android-native app, you'll need make the following changes in your Android app:

Add the following changes to your app's android/build.gradle file:

buildscript {
        ...
        repositories {
            ...
            mavenCentral()
        }
        dependencies {
            ...
            classpath "com.newrelic.agent.android:agent-gradle-plugin:${latest_android_version}"
        }
    }

Apply the newrelic plugin to the top of your android/app/build.gradle file:

apply plugin: "com.android.application"
apply plugin: 'newrelic' // <-- add this

Add INTERNET and ACCESS_NETWORK_STATE permissions in your AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

And you're done! You should start seeing data in New Relic within 5 minutes.

View your Flutter app data in New Relic

Now that you've got the Flutter agent sending data to New Relic, it's time to view your app data in New Relic.

Go to one.newrelic.com > Mobile > (select your Flutter app) > Summary to see a summary of your data over time.

With the Flutter agent, you have access to all mobile monitoring features, such as tracking crashes, HTTP requests, and handled exceptions. Check out these feature pages for more info:

Troubleshoot missing data in the UI

Having trouble finding HTTP data in the UI?

Problem

After installing the Flutter agent and waiting at least 5 minutes, No HTTP data appears: on the HTTP errors and HTTP requests UI pages.

Solution

If no HTTP data appears after you wait at least five minutes, check you are not overriding HttpOverrides.global inside your Flutter app.

Query Flutter log data

New Relic stores your Flutter logs as custom events. You can query these logs and build dashboards for them using this NRQL query:

SELECT * FROM Mobile Dart Console Events SINCE 30 MINUTES AGO

For more information on NRQL queries, see Introduction to NRQL.

(Optional) Customize the Flutter agent instrumentation

Check out these optional API calls to further customize how New Relic collects and reports data:

Set up error tracking and resource tracking.

Because NewRelic Mobile Start calls WidgetsFlutterBinding.ensureInitialized, if you are not using NewRelic Mobile Start, you need to call this method prior to calling NewrelicMobile.instance.startAgent.

if (Platform.isAndroid) {
    appToken = AppConfig.androidToken;
} else if (Platform.isIOS) {
    appToken = AppConfig.iOSToken;
}

Config config = Config(
    accessToken: appToken,
    analyticsEventEnabled: true,
    networkErrorRequestEnabled: true,
    networkRequestEnabled: true,
    crashReportingEnabled: true,
    interactionTracingEnabled: true,
    httpResponseBodyCaptureEnabled: true,
    loggingEnabled: true,
    webViewInstrumentation: true,
    printStatementAsEventsEnabled: true,
    httpInstrumentationEnabled:true);

// NewrelicMobile.instance.start(config, () {
//   runApp(MyApp());
// });

runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    FlutterError.onError = NewrelicMobile.onError;
    await NewrelicMobile.instance.startAgent(config);
    runApp(MyApp());
}, (Object error, StackTrace stackTrace) {
    NewrelicMobile.instance.recordError(error, stackTrace);
});

AppToken is platform specific. You need to generate separate tokens for Android and iOS apps.

In order to track navigation events, you'll need to add the NewRelicNavigationObserver to your MaterialApp, WidgetsApp, or CupertinoApp.

import 'package:newrelic_mobile/newrelic_navigation_observer.dart';

//....

MaterialApp(
  navigatorObservers: [
    NewRelicNavigationObserver(),
  ],
  // other parameters
)

Add a name to routes: settings to help track each screen view/activity. Here's an example:

Widget build(BuildContext context) {
return MaterialApp(
  navigatorObservers: [NewRelicNavigationObserver()],
  routes: {
    'pageone': (context) => Page1Screen(),
    'pagetwo': (context) => Page2Screen(),
    'pagethree': (context) => Page3Screen(),
    'pagefour': (context) => Page4Screen()
  },
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  initialRoute: 'pageone',
);
}

When using the go_router library, you can enable the automatic routing instrumentation by adding an instance of NewRelicNavigationObserver to your application's GoRouter.observers:

//....

import 'package:go_router/go_router.dart';
import 'package:newrelic_mobile/newrelic_navigation_observer.dart';


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

You can manually report non-fatal exceptions using custom attributes in the following method:

try {
    some_code_that_throws_error();
} catch (ex) {
NewrelicMobile.instance
        .recordError(error, StackTrace.current, attributes: attributes);
}

Use the iOS or Android SDK APIs to create custom events and metrics. Here are some examples:

startInteraction(String actionName) Future

Track a method as an interaction.

InteractionId is string.

endInteraction(String interactionId): void;

End an interaction (Required). This uses the string ID for the interaction you want to end. This string is returned when you use startInteraction().

var id = await NewrelicMobile.instance.startInteraction("Getting Data from Service");
            try {
                var dio = Dio();
                var response = await dio.get(
                    'https://reqres.in/api/users?delay=15');
                    print(response);
                NewrelicMobile.instance.endInteraction(id);
                Timeline.finishSync();
            } catch (e) {
                print(e);
            }

[setAttribute] (/docs/mobile-monitoring/new-relic-mobile-ios/ios-sdk-api)(String name, dynamic value) : void;

Creates a session-level attribute shared by multiple mobile event types. Overwrites its previous value and type each time it is called.

NewrelicMobile.instance.setAttribute('RNCustomAttrNumber', 37);

recordBreadcrumb(String name,{Map<String, dynamic>? eventAttributes}): void;

Track app activity/screens to help troubleshoot crashes.

NewrelicMobile.instance.recordBreadcrumb("Button Got Pressed on Screen 3"),

recordCustomEvent(String eventType,{String eventName = "", Map<String, dynamic>? eventAttributes}): void;

Creates and records a custom event for use in New Relic Insights.

NewrelicMobile.instance.recordCustomEvent("Major",eventName: "User Purchase",eventAttributes: {"item1":"Clothes","price":34.00}),
        child: const Text('Record Custom Event'),

noticeHttpTransaction(String url,String httpMethod,int statusCode,int startTime,int endTime,int bytesSent,int bytesReceived,Map<String, dynamic>? traceData,{String responseBody = ""}'): void;

Tracks network requests manually. You can use this method to record HTTP transactions, including an option to also send a response body.

NewrelicMobile.instance.noticeNetworkFailure("https://cb6b02be-a319-4de5-a3b1-361de2564493.mock.pstmn.io/searchpage", "GET", 1000, 2000,'Test Network Failure', NetworkFailure.dnsLookupFailed);

noticeNetworkFailure(String url,String httpMethod,int startTime,int endTime,NetworkFailure errorCode): void;

Records network failures. If a network request fails, use this method to record details about the failures. In most cases, place this call inside exception handlers, such as catch blocks. Supported failures are:

Unknown
BadURL
TimedOut
CannotConnectToHost
DNSLookupFailed
BadServerResponse

SecureConnectionFailed

NewrelicMobile.instance.noticeNetworkFailure("https://cb6b02be-a319-4de5-a3b1-361de2564493.mock.pstmn.io/searchpage", "GET", 1000, 2000,'Test Network Failure', NetworkFailure.dnsLookupFailed);

recordMetric(String name,String category,int? value,String? countUnit, String? valueUnit): void;

Records custom metrics (arbitrary numerical data), where countUnit is the measurement unit of the metric count and valueUnit is the measurement unit for the metric value. If using countUnit or valueUnit, then all of value, countUnit, and valueUnit must all be set

NewrelicMobile.instance.recordMetric("testMetric", "Test Champ",value: 12.0);
    NewrelicMobile.instance.recordMetric("testMetric1", "TestChamp12",value: 10,valueUnit: MetricUnit.BYTES,countUnit: MetricUnit.PERCENT);

Install the Flutter agent

Review the requirements

Add the Flutter agent to your project

Copy your application token

Configure your Flutter project

(Android-only) Configure your Android app

View your Flutter app data in New Relic

Troubleshoot missing data in the UI

Problem

Solution

Query Flutter log data

(Optional) Customize the Flutter agent instrumentation

Track errors and resources

Track screen navigation events

GoRouter: Enable automatic routing instrumentation

Manually report errors

Track a method as an interaction

Creates a session-level attribute shared by multiple mobile event types

Connect user sessions with analytical events and attributes

Record breadcrumbs

Record custom events

Configure max event buffer time

Configure the size of an event pool

Manually track network requests

Record network failures

Record Metric

Shut down the agent