Intro To Performance Analytics with Firebase
Tags: firebase, javascript, webdev
Published: 2020-02-19 22:56:54

---
title: Intro To Performance Analytics with Firebase
published: true
date: 2020-01-28 22:15:59 UTC
tags: firebase, javascript, webdev
canonical_url: https://labs.thisdot.co/intro-to-performance-analytics-with-firebase
---

The Firebase suite includes multiple products in which you can read more about [here](https://dev.to/thisdotmedia/a-quick-dive-into-firebae-firebase-3mi1). 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](//images.ctfassets.net/zojzzdop0fzx/4Ijp6M4VZAIBupmSATtbuT/ba6491363fbb975f7812b1ab24895d58/Screen_Shot_2019-12-17_at_12.26.36_PM.png)

2) Now go to project settings:
![Screen Shot 2019-12-17 at 1.44.49 PM](//images.ctfassets.net/zojzzdop0fzx/71MbB6a524FWXovs6gWK8j/8db07663908cd4634329323f77afcbe8/Screen_Shot_2019-12-17_at_1.44.49_PM.png)

![Screen Shot 2019-12-17 at 1.46.11 PM](//images.ctfassets.net/zojzzdop0fzx/3wZxya9iePZdrqJMz9VQGz/e48298c714ac76e9363e9d7a71119e0e/Screen_Shot_2019-12-17_at_1.46.11_PM.png)

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](//images.ctfassets.net/zojzzdop0fzx/3MND2aaSMd8ZGpqnFIjzSs/e1e2a76a761a932d202835dd0962c2b3/Screen_Shot_2019-12-17_at_1.45.33_PM.png)

4) Navigate to your project directory in the command line and run:
```bash
npm install firebase @angular/fire --save
```

5)Import the Firebase modules in your app.module.ts
```typescript
import { AngularFireModule } from "@angular/fire";
import { AngularFirePerformanceModule } from "@angular/fire/performance";
```

6) Inside of your app.module.ts, make sure you add the above modules into the imports array as followed:
```typescript
imports: [
    ...
    // These are settings that you copied in step #3
    AngularFireModule.initializeApp({
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "...",
      appId: "..."
    }),
    AngularFirePerformanceModule,
    ...
]
```
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.

```javascript
...
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;
      });
    })
  );
```

__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](https://firebase.google.com/docs/hosting/quickstart) 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](//images.ctfassets.net/zojzzdop0fzx/7by90Mllt361dzVgyL4yJG/fe737e44946a9d5186f8a8b4dec98706/Screen_Shot_2020-01-02_at_10.02.27_AM.png)

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](//images.ctfassets.net/zojzzdop0fzx/7GX7Q0xMN6oB4uXKD487RW/a991a67933790b0a62328397131b03e4/Screen_Shot_2020-01-02_at_10.08.32_AM.png)

__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](//images.ctfassets.net/zojzzdop0fzx/3IOySjsTbwKFqmKObAENgP/1a29385a9c3711f236f051feddb61976/Screen_Shot_2020-01-02_at_10.10.40_AM.png)

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](//images.ctfassets.net/zojzzdop0fzx/6RihauDsXsL85mSsSbnzuy/c636c08bfb6c46557af76db3e0496f7a/Screen_Shot_2020-01-02_at_10.13.13_AM.png)

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](//images.ctfassets.net/zojzzdop0fzx/2gICLutm0EbSPTcRoSqZR/f687fe0905c844c8d565f74c9a28824a/Screen_Shot_2020-01-02_at_10.03.37_AM.png)

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](//images.ctfassets.net/zojzzdop0fzx/3S2sAbeHWZy8QaSstvcpIL/bbdc39ebcb8413a915f79e68e0818674/Screen_Shot_2020-01-02_at_2.10.03_PM.png)

![Screen Shot 2020-01-02 at 2.11.36 PM](//images.ctfassets.net/zojzzdop0fzx/4cL5EnfpMl7bbTPWju78A0/56743ae17c5f289c2337cb051404ede4/Screen_Shot_2020-01-02_at_2.11.36_PM.png)


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

<em>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.</em>