Performance monitoring in Firebase - Commands & Configuration

Introduction

Performance monitoring helps you see how fast your app works and find slow parts. It shows real data from users so you can fix problems and make your app better.

When you want to know if your app loads quickly for users.

When you need to find which part of your app is slow or causing delays.

When you want to track app speed changes after updates.

When you want to see how your app performs on different devices or networks.

When you want to get alerts if your app becomes slow or crashes.

Config File - firebase.json

firebase.json

{
  "performance": {
    "monitoringEnabled": true
  }
}

This file enables Firebase Performance Monitoring for your project.

The performance.monitoringEnabled key turns on performance data collection.

Commands

This command sets up Firebase Performance Monitoring in your project by adding necessary files and configurations.

Terminal

firebase init performance

Expected Output

=== Setting up Performance Monitoring

✔ Firebase Performance Monitoring setup complete.

This command deploys the performance monitoring configuration to Firebase so it starts collecting data from your app.

Terminal

firebase deploy --only performance

Expected Output

=== Deploying to 'your-project-id'

✔  Deploy complete!

→

--only - Deploy only the specified Firebase feature, here performance monitoring.

This command shows the collected performance metrics from your app so you can review app speed and issues.

Terminal

firebase performance:metrics

Expected Output

Metric Name           Average Response Time

App Start Time        1.2s

Network Request Time  0.8s

Screen Render Time    0.5s

Key Concept

If you remember nothing else from this pattern, remember: enabling and deploying Firebase Performance Monitoring lets you see real user app speed and find slow parts to fix.

Common Mistakes

Not running 'firebase init performance' before deploying.

Without initialization, the project lacks necessary setup files, so deployment fails or monitoring does not start.

Always run 'firebase init performance' first to set up monitoring.

Forgetting to deploy performance after initialization.

Changes are local until deployed, so no data is collected or visible in Firebase console.

Run 'firebase deploy --only performance' to activate monitoring in the cloud.

Expecting immediate data after deployment.

Performance data depends on user activity and can take time to appear.

Use the app normally and wait some time before checking metrics.

Summary

Run 'firebase init performance' to set up performance monitoring in your project.

Deploy the setup with 'firebase deploy --only performance' to start data collection.

Use 'firebase performance:metrics' to view app speed and performance data.

Practice

1. What is the main purpose of Firebase Performance Monitoring?

easy

A. To send notifications to users

B. To track app speed and identify slow parts

C. To store user data securely

D. To manage user authentication

Solution

1. Step 1: Understand the role of performance monitoring

   Performance monitoring is used to check how fast an app runs and find parts that slow it down.

2. Step 2: Compare with other Firebase features

   Features like data storage, notifications, and authentication serve different purposes unrelated to speed tracking.

3. Final Answer:

   To track app speed and identify slow parts -> Option B

4. Quick Check:

   Performance monitoring = track speed [OK]

Hint: Performance monitoring = tracking app speed [OK]

Common Mistakes:

• Confusing performance monitoring with data storage
• Thinking it manages user authentication
• Assuming it sends notifications

2. Which of the following is the correct way to initialize Firebase Performance Monitoring in your app?

easy

A. const perf = startPerformanceMonitoring(app);

B. const perf = initializePerformance();

C. const perf = getPerformance(app);

D. const perf = firebase.performance();

Solution

1. Step 1: Recall the official Firebase Performance Monitoring initialization

   The correct method is to call getPerformance(app) to start monitoring.

2. Step 2: Check other options for correctness

   Other options use incorrect or outdated function names that do not exist in Firebase SDK.

3. Final Answer:

   const perf = getPerformance(app); -> Option C

4. Quick Check:

   Use getPerformance(app) to start monitoring [OK]

Hint: Use getPerformance(app) to start monitoring [OK]

Common Mistakes:

• Using non-existent functions like initializePerformance()
• Calling firebase.performance() which is outdated
• Confusing function names with other Firebase services

3. Consider this code snippet:

const perf = getPerformance(app);
const trace = perf.trace('myTrace');
trace.start();
// some code
trace.stop();
console.log(trace.name);

What will be printed in the console?

medium

A. Error: trace.name is not defined

B. 'trace'

C. undefined

D. 'myTrace'

Solution

1. Step 1: Understand the trace creation and naming

   The trace is created with the name 'myTrace', so its name property holds 'myTrace'.

2. Step 2: Check the console.log output

   Logging trace.name prints the string 'myTrace' to the console.

3. Final Answer:

   'myTrace' -> Option D

4. Quick Check:

   trace.name = 'myTrace' [OK]

Hint: trace.name holds the trace identifier string [OK]

Common Mistakes:

• Assuming trace.name is undefined or missing
• Confusing trace object with string 'trace'
• Expecting an error from accessing trace.name

4. You wrote this code to create a custom trace:

const perf = getPerformance(app);
const trace = perf.trace('loadTime');
trace.start;
// some loading code
trace.stop();

Why does the trace not record the duration correctly?

medium

A. Because trace.start is missing parentheses and not called as a function

B. Because trace.stop() should be called before trace.start()

C. Because getPerformance(app) must be called after trace creation

D. Because the trace name 'loadTime' is invalid

Solution

1. Step 1: Check how trace.start is used

   The code uses trace.start; without parentheses, so the function is not executed.

2. Step 2: Understand function call syntax

   To start the trace, trace.start() must be called with parentheses to run the function.

3. Final Answer:

   Because trace.start is missing parentheses and not called as a function -> Option A

4. Quick Check:

   trace.start() needs parentheses to run [OK]

Hint: Always call start() with parentheses to begin trace [OK]

Common Mistakes:

• Forgetting parentheses on start() call
• Calling stop() before start()
• Thinking trace name affects recording
• Misplacing getPerformance call

5. You want to measure the time taken by two different functions in your app using Firebase Performance Monitoring. Which approach correctly creates and uses two custom traces?

hard

A. const perf = getPerformance(app);
const traceA = perf.trace('funcA');
const traceB = perf.trace('funcB');
traceA.start();
funcA();
traceA.stop();
traceB.start();
funcB();
traceB.stop();

B. const perf = getPerformance(app);
const trace = perf.trace('funcA_funcB');
trace.start();
funcA();
funcB();
trace.stop();

C. const perf = getPerformance(app);
perf.trace('funcA').start();
funcA();
perf.trace('funcA').stop();
perf.trace('funcB').start();
funcB();
perf.trace('funcB').stop();

D. const perf = getPerformance(app);
const traceA = perf.trace('funcA');
traceA.start();
funcA();
traceA.stop();
traceA.start();
funcB();
traceA.stop();

Solution

1. Step 1: Understand how to create separate traces

   Each function should have its own trace object created with a unique name.

2. Step 2: Check the usage of start and stop for each trace

   Start and stop must be called on each trace around the respective function call.

3. Step 3: Analyze each option

   const perf = getPerformance(app); const traceA = perf.trace('funcA'); const traceB = perf.trace('funcB'); traceA.start(); funcA(); traceA.stop(); traceB.start(); funcB(); traceB.stop(); correctly creates two traces and starts/stops them separately. const perf = getPerformance(app); const trace = perf.trace('funcA_funcB'); trace.start(); funcA(); funcB(); trace.stop(); uses one trace for both functions, losing separate timing. const perf = getPerformance(app); perf.trace('funcA').start(); funcA(); perf.trace('funcA').stop(); perf.trace('funcB').start(); funcB(); perf.trace('funcB').stop(); calls start and stop on new trace objects without saving them, which is incorrect. const perf = getPerformance(app); const traceA = perf.trace('funcA'); traceA.start(); funcA(); traceA.stop(); traceA.start(); funcB(); traceA.stop(); reuses the same trace for two functions, which mixes timings.

4. Final Answer:

   const perf = getPerformance(app); const traceA = perf.trace('funcA'); const traceB = perf.trace('funcB'); traceA.start(); funcA(); traceA.stop(); traceB.start(); funcB(); traceB.stop(); -> Option A

5. Quick Check:

   Separate trace per function = const perf = getPerformance(app); const traceA = perf.trace('funcA'); const traceB = perf.trace('funcB'); traceA.start(); funcA(); traceA.stop(); traceB.start(); funcB(); traceB.stop(); [OK]

Hint: Create and use separate trace objects for each function [OK]

Common Mistakes:

• Using one trace for multiple functions
• Not saving trace objects before start/stop
• Reusing the same trace for different functions