Crashlytics In Flutter
Flutter & Firebase have both Transformed into an Omnipotent Integral part of the Developers Community corresponding to their Innate Ability of Never-Ending Scope of Development Covering Multiple platforms like — Android, iOS, Web, and Desktop Apps with an Incessant Dire focus on Making Performant Apps. While both of them have made their Introduction recently, They have gained Immense Popularity & Acceptance in a flash and are now widely trusted by the largest apps around the globe 🌐.
App Stability is a Prominent Factor that can obstruct the success of even the Best Apps. Apps with Bugs can be really frustrating that may tend to make the users UnHappy Culminating to App Uninstalls, Bad App Store Reviews, or a Negative Social Media Feed explaining the Bad Experience that may In turn affect the brand image.
This might would have surely encouraged you to make your Apps Bug-free but a varied kind of crashes can be generated in apps making it difficult & Time-Consuming to manually track them So that you can prioritise which crashes to troubleshoot and fix first.
Firebase Crashlytics helps By Automatically collecting, Analyzing, and Organizing Crash Reports so that we can prioritise Important Issues firstly Keeping our Users happy.
In This Article : The Focus will Be Mainly on Integrating Firebase Crashlytics In Your Flutter Apps
Table of Content :
:: Firebase Crashlytics — Introduction , Key Capabilities
:: Firebase Crashlytics — Implementation Pattern
:: Firebase Crashlytics — Setup Initial Configuration
What is Flutter ?
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase
What is Firebase ?
“ Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business ”
Firebase is a powerful platform for your mobile and web application. Firebase can power your app’s backend, including data storage, user authentication, static hosting, and more. With Firebase, you can easily build mobile and web apps that scale manifolds.
Let us have a glimpse of Firebase 🔥, and all the tools and services that it provides :
- :: Build Better Apps — Firebase lets you build more powerful, secure and scalable apps with the help of firebase functionalities like Cloud Firestore , ML Kit , Cloud Functions, Hosting , Authentication , Cloud Storage , Real Time Database enhancing the app quality and monitor performance .
- :: Improve App Quality — Firebase gives you insights into app performance and stability, so you can channel your resources effectively using functionalities like Crashlytics , Performance Monitoring , Test Labs .
- :: Grow Your Business — Firebase helps you grow to millions of users, simplifying user engagement and retention using it’s functionalities like :
- In-App Messaging , Google Analytics , A/B Testing , Predictions , Cloud Messaging(FCM) , Remote Configuration , Dynamic Links , App Indexing
As Flutter can be readily used to develop applications for multiple platforms, Firebase products work significantly great by sharing Data and Insights so that they can work profoundly better together.
For more information about Firebase, please visit the official Firebase website.
Firebase Showcase :
Intro to the Topic : Firebase Crashlytics 🚀
Firebase Crashlytics — Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize, and fix stability issues that erode your app quality.
The Most Powerful, yet Lightest Weight Crash Reporting Solution
Crashlytics helps using 3 main aspects :
- Logs: Each events in app is logged so that conext can be provided alongwith crash reports on the event of app crash
- Crash reports: Crash reports is made up each time a crash occurs and sent up on the application being run the next time .
- Stack traces: If the app recovers from an error , Dart Stack trace help in still Reporting the error.
If you wish to learn more about Firebase Crashlytics, You can check out the following video made by firebase :
Firebase Crashlytics : Key Capabilities
- :: Curated Crash Reports — Firebase Crashlytics amalgamate an avalanche of crashes Into a well curated & identifiable list of issues providing contextual informaion highlighting the seriousness & pervasiveness of crashes so that you can easily pinpoint the root crash cause .
- :: Cures for Common Crash — Crashlytics provides Crash Insights highlighting the common stability problems . Also providing great resources that make them easier to troubleshoot — Priortize & Resolve .
- :: Analytics Inegraion — Crashlytics alongwith Analytics provide Audience Insights with Crash Analytics report for users & Simplify debugging by giving you access a list of other events leading up to each crash .
- :: Realtime alerts — Crashlytics will help you get realtime alerts for new issues, regressed issues, and growing issues that might require immediate attention.
Implementation Pattern : Firebase Crashlytics
Let us understand the Implementation pattern of Firebase Crashlytics:-
Firebase Crashlytics saves you troubleshooting time by Intelligently Grouping Crashes and Highlighting the circumstances that lead up to them.
- : Connect Your App — Add On Firebase To Your Apps.
- : Integrate The SDK — Add the Crashlytics SDK
- : Check Firebase Console — Visit the Firebase console to track, prioritize, and fix issues in your app.
Firebase Crashlytics — Setup & Initial Configuration
In order to Integrate Crashlytics, We need to create a firebase project for the Firebase Crashlytics from firebase.google.com by logging in with your Google account. This brings us to the following screen:
Click on Add Project Button (+) initiating firebase project creation process.
Select the appropriate name for the project entering continue further
You can either select the firebase analytics and then clicking on Continue Project. Firebase Project is now created and ready to use .
This Progress indicator will show before the dashboard indicating success.
In the project overview page, click the iOS icon to launch the setup workflow as we now needs to register your flutter project for the android and iOS application.
Integration with iOS App
In the project overview page, select the iOS icon to launch the setup flow. If you have already added the app to your project provide click on add app to provide details of your application.
- Register your app with Firebase :
- a. Provide with your app’s bundle ID.
Find this bundle ID from your open project in XCode. Select the top-level app in the project navigator, then access the General tab. The Bundle Identifier value is the iOS bundle ID (for example,com.yourcompany.ios-app-name).
b. You may also provide optional details like App Nick Name and App Store ID.
c. Register your app.
Make sure you enter the correct ID As this can’t be edited further at the moment .
Next step, We need to download the config file named GoogleService-info.plist & repeating a similar process to registering your android app there saving the Google-service.json file. Keep those configuration files in ready-to-use with the Flutter app later.
- Open Project Settings in the Firebase console and select iOS application.
- Now We need to add the App Store Id of the flutter application which can be located at the app’s URL.
- We can also use makeshift app ID if our app is not published yet which can be replaced later.
- We may need to add the Team ID which can be located at the Apple Member Centre under the provisioning profile.
Add the Firebase configuration file :
:. Click Download GoogleService-Info.plist to obtain your Firebase iOS config file (GoogleService-Info.plist).
Make sure the config file is not appended with additional characters, like (2).
:. Using XCode, move the file into the Runner/Runner directory of your Flutter app.
Adding Crashlytics plugin In Flutter App :
Add Package Dependency in pubspec.yamland the run Flutter pub get :
firebase_crashlytics: "^0.2.0"
Add the following classpath to your android/build.gradle file :
dependencies {
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.2.0'}
Apply the following Plugin to the end of your android/app/build.gradle file.
apply plugin: 'com.google.firebase.crashlytics'
Add the Firebase Crashlytics SDK, in your android/app/build.gradle files.
dependencies {
// Adding Firebase Crashlytics SDK
implementation 'com.google.firebase:firebase-crashlytics:17.0.0-beta01'
}
iOS :
: Select Runner at project navigation from Xcode .
: Then Select the Tab Build phase => Click on + > New Run Script Phase
: Add ${PODS_ROOT}/FirebaseCrashlytics/run to the Type a script.. text box.
Import package At Your Project File:
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
Add Firebase Crashlytics Instance In Your Flutter App :
void main() {
// Set `enableInDevMode`to true to see reports while in debug mode
// This is only to be used for confirming that reports are being
// submitted as expected. It is not intended to be used for //everyday development.
Crashlytics.instance.enableInDevMode = true;
// Pass all uncaught errors to Crashlytics.
FlutterError.onError = Crashlytics.instance.recordFlutterError;
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]).then((_) {
SharedPreferences.getInstance().then((prefs) {
var darkModeOn = prefs.getBool('darkMode') ?? true;
runZoned(() {
runApp(ChangeNotifierProvider<ThemeNotifier>(
create: (_) => ThemeNotifier(darkModeOn ? darkTheme : lightTheme),
child: MyApp(),
));
}, onError: Crashlytics.instance.recordError);
});
});
}
Rebuild your app :
$ flutter runYou will be abled to see the crashlytics dashboard in firebase console on successful installation
Closing Thoughts
We have familiarised ourselves with Firebase Crashlytics — Integration in apps. They can be embodied as a tool that can play an Influential role in Strengthening Up of Apps By Availing Curated Crash Reports, Curing Common Crashes, Getting Realtime Updates to Prioritize Bug Fixing & It’s Integration with Analytics to Contemplate Future Campaign Strategies. Hope After reading the article you must have gotten insightful of Firebase Crashlytics in Flutter. Give it a TRY!!
To find out more about Firebase Crashlytics :
Check out the documentation here and Give them a Try — A link away.
References For the Blog :
firebase_crashlytics | Flutter Package
A Flutter plugin to use the Firebase Crashlytics Service. For Flutter plugins for other Firebase products, see…pub.dev
Flutter – Beautiful native apps in record time
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…flutter.dev
Firebase
Firebase gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and…firebase.google.com
Crashlytics | FlutterFire
Crashlytics helps you to collect analytics and details about crashes and errors that occur in your app. It does this…firebase.flutter.dev
🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
