Performance monitoring in Firebase - Step-by-Step Execution

Process Flow - Performance monitoring

Start App

↓

Initialize Firebase Performance

↓

Collect Metrics Automatically

↓

Add Custom Traces & Attributes

↓

Send Data to Firebase Console

↓

Analyze Performance Data

↓

Optimize App Based on Insights

↓

Repeat Monitoring Cycle

This flow shows how Firebase Performance Monitoring starts with app launch, collects data automatically and custom traces, sends it to the console, and helps optimize the app.

Execution Sample

Firebase

import { getPerformance, trace } from 'firebase/performance';
const perf = getPerformance();
const myTrace = trace(perf, 'custom_trace');
myTrace.start();
// code to measure
myTrace.stop();

This code initializes Firebase Performance, starts a custom trace, runs code to measure, then stops the trace.

Process Table

Step	Action	Evaluation	Result
1	Import Firebase Performance module	Module imported	Firebase Performance ready
2	Initialize performance monitoring	getPerformance() called	Performance instance created
3	Create custom trace named 'custom_trace'	trace(perf, 'custom_trace')	Trace object created
4	Start custom trace	myTrace.start()	Trace timer started
5	Execute code to measure	Code runs	Performance data recorded
6	Stop custom trace	myTrace.stop()	Trace timer stopped and data sent
7	Data sent to Firebase Console	Automatic upload	Performance data available for analysis
8	Analyze data in console	Developer views metrics	Insights for optimization
9	Optimize app based on insights	Code changes	Improved app performance
10	Repeat monitoring cycle	Continuous monitoring	Ongoing performance improvements

💡 Monitoring cycle repeats continuously as app runs and data is collected

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6	Final
perf	undefined	Performance instance	Performance instance	Performance instance	Performance instance	Performance instance
myTrace	undefined	undefined	Trace object	Trace running	Trace stopped	Trace stopped

Key Moments - 3 Insights

Why do we need to call myTrace.start() and myTrace.stop()?

Because the trace measures the time between start() and stop() calls. Without them, no timing data is recorded. See execution_table rows 4 and 6.

Does Firebase Performance Monitoring collect data automatically?

Yes, it collects some metrics automatically after initialization (step 2). Custom traces are optional for detailed measurement (step 3).

When is the performance data available in the Firebase Console?

After stopping the trace, data is sent automatically (step 7) and then appears in the console for analysis (step 8).

Visual Quiz - 3 Questions

Look at the execution table, what is the state of 'myTrace' after step 4?

A Trace object created but not started

B Trace timer started and running

C Trace timer stopped

D Trace object undefined

💡 Hint

Check the 'Result' column at step 4 in the execution_table

At which step does the performance data get sent to Firebase Console?

A Step 5

B Step 6

C Step 7

D Step 8

💡 Hint

Look for 'Data sent to Firebase Console' in the execution_table

If we skip calling myTrace.stop(), what happens to the trace data?

A No timing data is recorded or sent

B Data is sent automatically anyway

C Trace never starts

D Trace stops after a timeout

💡 Hint

Refer to key_moments about start() and stop() calls and execution_table steps 4 and 6

Concept Snapshot

Firebase Performance Monitoring:
- Initialize with getPerformance()
- Automatically collects basic metrics
- Use trace() to create custom traces
- Call start() and stop() to measure code blocks
- Data uploads automatically to Firebase Console
- Analyze data to improve app speed
- Repeat monitoring continuously

Full Transcript

Firebase Performance Monitoring starts when the app launches and initializes the performance instance. It collects some metrics automatically. Developers can create custom traces to measure specific code parts by calling start() and stop() on the trace object. After stopping, data is sent to the Firebase Console where developers analyze it to find performance issues and optimize the app. This monitoring cycle repeats continuously to keep improving app speed and user experience.

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