DEV Community

loading...
This Dot

Intro To Performance Analytics with Firebase

Pato
Google Developer Expert on Angular and Web Technologies | Auth0 Ambassador | Media Developer Expert for Cloudinary | Twilio Champ | Technical Coach at SpringBoard | Google Women Techmaker
Originally published at labs.thisdot.co on ・4 min read

The Firebase suite includes multiple products in which you can read more about here. In this article, however, I'm going to talk about the Performance Monitoring product.

I'm going to show you how to use it in an Angular app but the process for React, VueJS, etc. is very very similar.

What Is Performance Monitoring in Firebase?

Thanks to this product, you can observe the performance of your app. By using the product, you see the areas for improvement in your code. This product can help you avoid crashes by increasing your code quality.

Features Of Performance Monitoring

  • Customize monitoring for your app
  • Automatically measure app startup time, HTTP/S network requests, and more
  • Gain insight into situations where app performance could be improved

Let's get started

Note: I'm assuming you have a Firebase account and any project there that can be used throughout this article.

1) On the left navbar, inside of a Firebase console, you will see Performance. Click on it. This is where your data will be populated after 12-24hrs of monitoring.

Screen Shot 2019-12-17 at 12.26.36 PM

2) Now go to project settings:
Screen Shot 2019-12-17 at 1.44.49 PM

Screen Shot 2019-12-17 at 1.46.11 PM

3) Then scroll all the way down and copy/paste the JSON with all your project settings in a safe place. If you don't see those settings as shown on the screenshot, you might need to register a new web-app for the current project (instructions on how to do this are given on the same page in Project settings > General).

Screen Shot 2019-12-17 at 1.45.33 PM

4) Navigate to your project directory in the command line and run:

npm install firebase @angular/fire --save
Enter fullscreen mode Exit fullscreen mode

5)Import the Firebase modules in your app.module.ts

import { AngularFireModule } from "@angular/fire";
import { AngularFirePerformanceModule } from "@angular/fire/performance";
Enter fullscreen mode Exit fullscreen mode

6) Inside of your app.module.ts, make sure you add the above modules into the imports array as followed:

imports: [
    ...
    // These are settings that you copied in step #3
    AngularFireModule.initializeApp({
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "...",
      appId: "..."
    }),
    AngularFirePerformanceModule,
    ...
]
Enter fullscreen mode Exit fullscreen mode

7) Now in your service, or wherever you are reading the data from Firebase, you can add a trace to trace the time it takes to load the data.

...
import { AngularFirestore } from "@angular/fire/firestore";
import { AngularFirePerformance } from "@angular/fire/performance";
...
constructor(
    private perf: AngularFirePerformance,
    private firestore: AngularFirestore
  ) {}
firestorePlacesCollection = this.firestore.collection("places");

  //READ
  places$ = this.firestorePlacesCollection.snapshotChanges().pipe(
    // HERE IS THE TRACE
    this.perf.trace("placesQuery"),
    map(actions => {
      return actions.map(p => {
        const place = p.payload.doc;
        const id = place.id;
        return { id, ...place.data() } as Place;
      });
    })
  );
Enter fullscreen mode Exit fullscreen mode

Note: places is the name of my collection inside of Firebase and placesQuery is the name I gave to my trace. You can name it however you want.

_Now your app is ready to start getting tracked by Firebase's performance tooling.
_

Remember: you can always write custom traces whether you are using Angular, React, or plain Vanilla JS.

Time to view our App Performance

Note: In order to see your app performance, you need to deploy your app and give Firebase approximately 24 hours to collect some data.

7) Go back to Firebase -> Performance Tab and you should see something like this:
Screen Shot 2020-01-02 at 10.02.27 AM

You will see this dashboard showing some basic data per country and per environment you have used your app.

8) Now, click on View Traces, and click on the environment you want to be the traces. You will see a metrics dashboard
Screen Shot 2020-01-02 at 10.08.32 AM

If you click on View More, you will see more information about that specific metric. Check it out!

9) Now go back to the previous page and click on device tab then click on the trace you created to view the performance data. In my case, my custom trace is placeQuery.

Screen Shot 2020-01-02 at 10.10.40 AM

10) After clicking on the custom trace, you will see a dashboard that is similar to the one in the picture below. Click on View More.

Screen Shot 2020-01-02 at 10.13.13 AM

11) After clicking on view more, you will see some specific traces related to your custom trace.
Screen Shot 2020-01-02 at 10.03.37 AM

As you can see, you have the option to see the metrics depending on different factors like the browser, country, etc.

12) You can also set parameters to see when the performance on the page is below the average by setting a threshold.

Screen Shot 2020-01-02 at 2.10.03 PM

Screen Shot 2020-01-02 at 2.11.36 PM

All of these performance metrics will help you understand how your app performs in different conditions to improve the user experience for your customers.

This Dot Inc. is a consulting company which contains two branches: the media stream, and labs stream. This Dot Media is the portion responsible for keeping developers up to date with advancements in the web platform. This Dot Labs provides teams with web platform expertise, using methods such as mentoring and training.

Discussion (0)