To read this full New Relic article, click here.

In today's dynamic digital environment, mobile applications have become an indispensable part of our daily lives. While there are many hybrid mobile platforms available, this blog will focus primarily on the Flutter platform.

Flutter, a Google-developed open-source User Interface (UI) software development kit, has become highly popular among mobile developers because of its ability to produce robust, cross-platform solutions. However, building a Flutter application is just the start. If you want your app to succeed and keep your user base happy, it is essential to implement a thorough application monitoring system. New Relic can help you do just that!

Prerequisite: Instrument your Flutter mobile app with New Relic

To get started monitoring your Flutter mobile app with New Relic, follow these steps:

• Install the Flutter agent

New Relic provides an SDK (AKA the Flutter agent) for Flutter application instrumentation. To install the SDK, follow these steps:

• Add the newrelic_flutter package to your pubspec.yaml file:

dependencies:
    newrelic_mobile: 1.0.1

Make sure to use the latest version of the package:

• Run flutter pub get in your project directory to fetch the package.
• Import the newrelic_flutter package in your Flutter application code:

import 'package:newrelic_flutter/newrelic_flutter.dart';

• Initialize the Flutter agent

In your Flutter application's entry point (usually main.dart), add the following code to initialize New Relic:

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 to replace your application token(s) in the above code with the token generated at this step of the documentation.

Note: If you are instrumenting both Android and iOS native apps, ensure to create and add both tokens in the code.

• Build and deploy your application

Build your Flutter application as you normally would and deploy it to your desired platform (Android, iOS, or both). The Flutter agent will automatically start collecting performance data and sending it to your New Relic account.

• Analyze and view your flutter application data in New Relic

1. Login to your New Relic portal.
2. Click on Mobile and select your Flutter application.
3. The Summary page is where you will find the curated view of your data over time.

After instrumenting your Flutter app, you can gather mobile telemetry data about crashes, HTTP requests, handled exceptions, event trails, and other crucial metrics. Keep reading to learn how you can use New Relic's mobile monitoring features to collect critical performance data and gain valuable insights to improve your app's performance and user experience.

Detect Performance Bottlenecks

Flutter apps run on various devices and operating systems, each with its own specifications and constraints. Performance bottlenecks must be found to ensure a seamless user experience. Monitoring apps provides real-time information on CPU/memory usage, network requests, and rendering performance. Monitoring this data allows developers to optimize code to handle issues such as UI lags, slow loading, and excessive resource consumption in responsive apps.

Track and Debug Errors in Real Time

Despite comprehensive testing and quality assurance, production errors and incidents can occur. Flutter application monitoring tools enable developers to capture and trace errors in real time, providing helpful insights into app stability. With this knowledge, developers can release hotfixes quickly while minimizing any impact on user experience.

Use New Relic Errors Inbox, our error tracking capability offers a centralized hub, to effortlessly view, prioritize, and resolve errors across the entire application stack. It seamlessly integrates with the mobile UI, streamlining the triaging of mobile errors without requiring any additional workload setup.

Optimize the User Experience

In the real world, mobile app user interfaces may behave differently on various screen sizes, which can cause a poor user experience for some users. For instance, text could overflow on an iPhone14 but display correctly on an iPhone14 max. We capture such errors and store them in the mobile Dart Errors table for future iterations. With this data, you can easily pinpoint the issue and fix it, improving the user experience.

You can use the below query to view the UI Errors Details page, which shows the line of code that is causing errors in your application's UI. To visualize and track these errors in your New Relic’s account you can create a dashboard, which can help you quickly identify and fix the problems.

FROM `Mobile Dart Errors` SELECT * since 1 week ago

FROM `Mobile Dart Errors` SELECT count(*) FACET deviceManufacturer, reason, stackTrace since 1 week ago

Note: You can also use our awesome pre-built dashboards for mobile crash and mobile network analysis.

Utilize Distributed Tracing

Obtain a holistic view of request journeys, commencing from your mobile app and traversing through intricate distributed systems, facilitating comprehensive monitoring and analysis capabilities.

The goal of distributed tracing is to figure out how the whole system performs across all the different parts like an app, a backend, cloud functions, databases, and so on. In this article, I’m just covering the app and a simple backend, though. In order to figure out how the system performs, we trace the flow of a request from the app to the backend. Based on that data, you should, later on, be able to troubleshoot requests that exhibit high latency or errors.

Analyze Event Trails

Delve into the mobile monitoring crash event trail, a comprehensive chronicle unveiling the precise sequence of events leading to app crashes. This unlocks the true essence of the crash event trail and harnesses its invaluable insights by visualizing what caused the crash.

Conclusion

In the ever-evolving realm of mobile app development, Flutter application monitoring emerges as a pivotal game-changer for organizations. It empowers you to outshine the ordinary and deliver truly exceptional user experiences. By systematically monitoring performance, proactively resolving issues, and optimizing user engagement, your applications gain a competitive edge in a crowded market and ultimately can improve business outcomes.

Read the full blog post at New Relic: Boost UX: Monitor Flutter mobile apps efficiently

Not an existing New Relic user? Sign up for a free account to get started! 👨‍💻