Performance monitoring in Firebase - Mini Project: Build & Apply

Firebase Performance Monitoring Setup

📖 Scenario: You are building a mobile app and want to track how fast your app loads and how long certain actions take. Firebase Performance Monitoring helps you see this data easily.

🎯 Goal: Set up Firebase Performance Monitoring in your app, create a custom trace to measure a specific action, and display the trace duration.

📋 What You'll Learn

Initialize Firebase Performance Monitoring in your app

Create a custom performance trace named app_startup

Start and stop the app_startup trace around a simulated startup task

Print the duration of the app_startup trace in milliseconds

💡 Why This Matters

🌍 Real World

Firebase Performance Monitoring helps developers see how fast their app runs and find slow parts to improve user experience.

💼 Career

Knowing how to set up and use performance monitoring is important for DevOps and mobile developers to maintain app quality and reliability.

1

Initialize Firebase Performance Monitoring

Import Firebase Performance Monitoring and initialize it by creating a variable called performance using getPerformance().

Firebase

// Import getPerformance and initialize performance
// Your code here

Need a hint?

Use import { getPerformance } from "firebase/performance"; and then const performance = getPerformance(); to initialize.

2

Create a custom performance trace

Create a custom trace named app_startup by calling performance.trace('app_startup') and store it in a variable called trace.

Firebase

import { getPerformance } from "firebase/performance";

const performance = getPerformance();

// Create a trace named 'app_startup'
// Your code here

Need a hint?

Use const trace = performance.trace('app_startup'); to create the trace.

3

Start and stop the custom trace

Start the trace by calling trace.start(), simulate a startup task with a 100ms delay using setTimeout, then stop the trace by calling trace.stop() inside the timeout callback.

Firebase

import { getPerformance } from "firebase/performance";

const performance = getPerformance();

const trace = performance.trace('app_startup');

// Start the trace
// Simulate 100ms delay
// Stop the trace inside the delay callback
// Your code here

Need a hint?

Call trace.start() before the delay, then use setTimeout with 100ms, and call trace.stop() inside the callback.

4

Print the trace duration

After stopping the trace, print the duration of the app_startup trace in milliseconds using console.log and accessing trace.duration.

Firebase

import { getPerformance } from "firebase/performance";

const performance = getPerformance();

const trace = performance.trace('app_startup');

trace.start();

setTimeout(() => {
    trace.stop();
    // Print the trace duration here
    // Your code here
}, 100);

Need a hint?

Use console.log(`Trace duration: ${trace.duration} ms`); inside the timeout callback after stopping the trace.