Firebase Crashlytics Flutter ❤️ 🐛

Lemme tell you something interesting. You have decided to develop an app with Firebase and Flutter. If yes, you made an amazing decision, congratulations 🥳. Firebase backend as service is a good guy that allows developers to get their apps working quickly. Developing apps with Firebase and Flutter is not a big deal but developing bug 🐛 free apps that’s difficult. Suppose you developed a social media app and you have multiple features. I’m not going to touch all the features of social media you know better than me. Users using your Social Media app trying to update profile when clicking on profile app crashes 🥹 oops. Bad user Experience. Buggy apps make our users unhappy and yes they might uninstall our app and one more thing users leave bad reviews on app like (“this app is time wasting buggy do not download this app, save your time”). Hello developers, we develop applications to make others and our life easier. And bugs are our partners true partners. Bugs teach us (You need to improve). Developer Joke (Bugs bugs bugs, I don’t like bugs, I avoid, but bugs likes me, I can’t avoid) okay leave all jokes.

We know apps generate lots of bugs, crashes and manually tracking bugs it’s time consuming and we don’t want to waste our golden time.

Lemme introduce to you Firebase Crashlytics which solves our problem.

Check firebase products.

Firebase Crashlytics

Firebase crashlytics helps by automatically collecting, analyzing and organizing your crash reports. It also helps you understand which issues are most important so you can prioritize these first and keep your users happy.

It combines a real time dashboard and alerts to keep you aware of your newest issues and any sudden changes in stability.

Okay Now we got it what the problem is and how we will fix that. So Let’s get started

Follow me developers and say that with one voice we are the lovers ❤️ of Firebase and Flutter. We love Flutter Quick development and Firebase Quick backed service.

Go to the Firebase Project console and enable Firebase Crashlytics.
Add firebase_crashlytics in your pubspec.ymal file right now latest version is 2.8.10

dependencies:
 firebase_crashlytics: ^2.8.10

If you are reading this article in the future, I hope this 2.8.10 version will be updated

If you want to read more about crashlytics check Official documentation

Now what’s next? Hey work is not done yet here follow me

3. Wrap your runApp with runZonedGuarded

void main() async {
 runZonedGuarded(() async  {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}, (error, stack) {
  FirebaseCrashlytics.instance.recordError(error, stack);
});
}

What is runZonedGuarded?, zones instrumenting the zone’s error handler will catch errors that aren’t caught by the Flutter framework like button pressed

4. Okay last but not the least It’s time to finish setting up crashlytics and see the initial data in the crashlytics dashboard, hmm that’s great let do it right now

5. Add the code snippet in your app

TextButton(
onPressed: () => throw Exception(),
child: const Text("Click On me I'm Beautiful Exception"),),
Or
TextButton(
onPressed: () => FirebaseCrashlytics.instance.crash(),
child: const Text("Click On me I'm Beautiful Exception"),
),

Here we go Build and run your app.

6. Click On the Button check your console you will see beautiful error. Now go to the Crashlytics dashboard of the firebase console to see your crash report.

Do you believe in magic 🪄? If Yes, refresh the Firebase Crashlytics console and you will see nothing why? That’s the magic 🎩🪄 . Well, keep all Jokes on side and wait for a moment you will see crash reports.

Crashlytics is now monitoring your app for crashes and, on Android, non-fatal errors and ANRs.

Okay the story is not over yet if you run your app on iOS and click on the button and visit Crashlytics dashboard you will see this beautiful red alert (“This app has 1 unprocessed crash. Upload 1 dSYM file to process them”).

What does it means?

Well, why are you so serious? I’m here to tell you everything. The first thing first as Stephen Covey said in his amazing book 7 Habits of Highly Effective People.

dSYM files store the debug symbols for your app.

Click on the Manage Button as you can see in the above picture. When you click on Mange button you will see screen like below image.

2. We have 2 options here Drag and Drop and Script for more information check here. Let me tell you a very simple way to get dSYM, no worry not going tell you all spaghetti cmds and paths xyz.

3. Run this cmd flutter build ios — no-sound-null-safety we know this cmd very well.

When the build is ready

4. Open your xcode in the top menu click on -> product in dropDownMenu click on Archive when archive process completes you will see archives popup alert with your latest Runner like below.

5. If you haven’t seen archives popup alert very simple to get that follow me -> open your xcode if already opened then leave, and click on the top menu-> window and in drop down you will see organizer click on it here we go, you got archives popup alert.

6. Now right click on Runner and select show in finder you will see screen like below.

7. Now Right click on Runner and Select Show package Contents like below.

8. Here we go, we got dSYMs File

9. Now Drag and Drop your dSYMs file If you drag and drop file directly like I did you will see this beautiful error (“Unsupported file type. Uploader only supports ZIP and GZ”). Convert dSYMs file into zip file then upload when you upload file successfully you will see this green alert