Monitor hybrid mobile apps in minutes with quickstart installations

Hybrid and cross platform applications are trending in the mobile development industry. Where once engineers had to create individual code bases for iOS and Android phones, hybrid apps can be deployed for both operating systems at once. The code is often reusable, can have a shorter development timeline, and tends to be more cost effective allowing a company to save engineering resources. 

As concerns about performance have decreased, the industry is seeing more and more apps built with hybrid platforms like Cordova and cross-platform frameworks like React Native and Flutter. In fact, according to a Forbes 2020 article, 37 of the top 50 retail mobile applications are not native. Industry giants like Microsoft and Shopify are taking advantage of the benefits of going hybrid by creating React Native apps, while popular apps such as Google Classroom, eBay, and Google Pay are being released as Flutter applications.

Regardless of trends, mobile monitoring remains crucial to identifying and resolving issues as quickly as possible so that you can improve your app's uptime and ultimately deliver a consistently positive digital experience to your customers. With observability tools like New Relic, you can gain important insights into who your customers are, where they are, and what they are doing. That information allows you to anticipate your customers’ needs and improve your products. 

In this blog, you'll learn how to monitor your hybrid mobile app with New Relic: you’ll access guided quickstart installations for the most popular hybrid apps in the New Relic data marketplace, and learn how to install the New Relic Flutter agent.

How to access the hybrid mobile app installation guides

Installing a New Relic agent on your hybrid application is as easy as heading to the data marketplace: open New Relic, select Add Data in the left navigation menu, and then select Browser & mobile. From here you can choose from various installation guides, like Flutter, React Native, or Cordova, as shown in the next image.

How to install the Flutter agent on your hybrid app

Let’s walk through the Flutter installation guide to get a sense of what this process looks like for a hybrid application. To follow along, select “Flutter” from the data marketplace in the previous step, and make sure you have a Flutter app ready to instrument.

The next image shows the beginning of the installation guide. Immediately, you’ll notice that you have the opportunity to create a mobile entity for both an iOS and an Android app. As mentioned earlier, this is because most hybrid apps are being created to deploy to both operating systems. New Relic automatically appends the operating system name to the name of your app so that you can easily tell them apart when you are viewing them in the Explorer. For example, my-app will become my-app-android or my-app-ios.

Once you have created your apps, the remaining process guides you step by step through installing the New Relic agent in your code base. The installation guide conveniently handles setup tasks like generating app tokens for each of your applications and auto-filling them into any code that needs them.

Once you are finished adding the agent code to your application, the guide instructs you to clean your project and run the application so that it will begin sending data to New Relic. At that point, you can run a test to determine if New Relic is receiving the data, as shown in the next image. And that’s it, installing the Flutter agent on your hybrid app is as easy as a few screens and some copy and paste.

You’ll be able to find your app’s data in New Relic by selecting Mobile from the left-hand nav menu, then selecting the name of your mobile app in the list to visit the summary page for your app. The next image shows an example of the summary page for a mobile application. On this page, you’ll find multiple charts and tables that will help you triage issues in real time, as well as provide key information about your user’s behavior. You can click on the title of a chart to drill down into its details.

The summary page, like most mobile pages, can be filtered by app version, a convenient way to dig into your app to see what’s really working and what isn’t. In the right column of the summary page lives the Activity stream, a simple list of all critical issues, warnings and anomalies, giving you what you need to know when an application is struggling, all in one place. From the left-hand menu you can find links to other pages like the crash analysis UI that can help you get more insight into your mobile app. For more information, visit the documentation Mobile apps Summary page.

Installing the New Relic agent and exploring your mobile app’s summary page is only the first step in setting up your hybrid application up for maximum observability. Creating custom Breadcrumb events, adding deployments, and customizing the handled exceptions that you see in our UI are all ways that you can improve your out of the box experience with New Relic.