Overview

In this lab, you leverage Cloud Trace and Cloud Monitoring to diagnose and fix a performance issue in the running application and use Cloud Monitoring to view performance metrics of the application.

Objectives

In this lab, you learn how to perform the following tasks:

• Enable, install, and configure Cloud Trace.
• View Trace information to diagnose a performance issue.
• Fix the performance issue and verify the performance improvement.
• Monitor Google Cloud Platform products using Cloud Monitoring.

Setup and requirements

Lab setup

For each lab, you get a new Google Cloud project and set of resources for a fixed time at no cost.

1. Sign in to Google Skills using an incognito window.

2. Note the lab's access time (for example, 1:15:00), and make sure you can finish within that time. There is no pause feature. You can restart if needed, but you have to start at the beginning.

3. When ready, click Start lab.

4. Note your lab credentials (Username and Password). You will use them to sign in to the Google Cloud Console.

5. Click Open Google Console.

6. Click Use another account and copy/paste credentials for this lab into the prompts. If you use other credentials, you'll receive errors or incur charges.

7. Accept the terms and skip the recovery resource page.

Activate Google Cloud Shell

Google Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud.

Google Cloud Shell provides command-line access to your Google Cloud resources.

1. In Cloud console, on the top right toolbar, click the Open Cloud Shell button.

   

2. Click Continue.

It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. For example:

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

• You can list the active account name with this command:

gcloud auth list

Output:

Credentialed accounts: - @.com (active)

Example output:

Credentialed accounts: - google1623327_student@qwiklabs.net

• You can list the project ID with this command:

gcloud config list project

Output:

[core] project =

Example output:

[core] project = qwiklabs-gcp-44776a13dea667a6 Note: Full documentation of gcloud is available in the gcloud CLI overview guide .

Task 1. Preparing the case study application

In this section, you access Cloud Shell, clone the git repository containing the quiz application, configure environment variables. and run the application.

Clone source code in Cloud Shell

1. To clone the repository for the class, execute the following command:

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. Create a soft link as a shortcut to the working directory:

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/stackdriver-trace-monitoring ~/stackdriver-trace-monitoring

Configure and run the case study application

1. Navigate to the directory that contains the sample files for this lab:

cd ~/stackdriver-trace-monitoring/start

2. To replace the default region with the lab-assigned region, run the following commands:

export APP_REGION={{{project_0.startup_script.app_region | APP_REGION}}} export REGION={{{project_0.default_region | REGION}}} sed -i 's/us-central1/'"$REGION"'/g' prepare_environment.sh sed -i 's/us-central/'"$APP_REGION"'/g' prepare_environment.sh

2. To configure the Quiz application, execute the following command:

. prepare_environment.sh

If prompted, enter Y to all unauthenticated invocations.

Note: This script file:

• Creates an App Engine application.
• Exports environment variables GCLOUD_PROJECT and GCLOUD_BUCKET.
• Runs npm install.
• Creates entities in Cloud Datastore.
• Creates a Cloud Spanner instance, database, and tables.
• Creates two Google Cloud Pub/Sub topics.
• Creates two Cloud Functions.
• Prints out the Google Cloud Platform Project ID.

Note: You may see errors for function deployment indicating that retrieving the repository metadata failed. The functions may not deploy correctly the first time because required permissions were not yet propagated.

3. If the functions were not successfully deployed, to try the function creation again, run the following command:

. prepare_environment.sh

Ignore any errors for the steps before the function deployments because those items have already been created. Repeat the command until both functions are successfully deployed.

4. To complete the preparation of the Cloud Shell environment to run the application, execute the following commands:

gcloud iam service-accounts create quiz-account --display-name "Quiz Account" gcloud iam service-accounts keys create key.json --iam-account=quiz-account@$DEVSHELL_PROJECT_ID.iam.gserviceaccount.com export GOOGLE_APPLICATION_CREDENTIALS=key.json gcloud projects get-iam-policy $DEVSHELL_PROJECT_ID --format json > iam.json node setup/add_iam_policy_to_service_account.js gcloud projects set-iam-policy $DEVSHELL_PROJECT_ID iam_modified.json Note: These commands:

• Create a service account.
• Create and download the key file for the service account.
• Export an environment variable GOOGLE_APPLICATION_CREDENTIALS referencing the key file.
• Create the necessary IAM permissions to enable the service account to access all required APIs.

In production on Compute Engine or Container Engine, you would grant access to APIs either using a custom service account or via scopes. Typically, you would allow GCP to manage key rotation.

Task 2. Harnessing Cloud Trace

In this section, you enable the Trace API, write the code to create and start the Cloud Trace in the Quiz application, and view application timings across multiple products in the Cloud Console.

Enable the Cloud Trace API

1. In the Cloud Console, on the Navigation menu, click APIs & services.
2. Click Library.
3. For Search for APIs & services, type Google Trace.
4. Click Cloud Trace API.
5. If the API is not enabled, click Enable.

Write code to set up Cloud Trace

1. Return to Cloud Shell.
2. To install the Node.js agent for Cloud Trace, execute the following command:

npm install @google-cloud/trace-agent

3. In Cloud Shell, click Open Editor to open in a new window.
4. Navigate to stackdriver-trace-monitoring/start.
5. Open ...frontend/app.js.

Note: Update code within the sections marked as follows:

// TODO

// END TODO

To maximize your learning, review the code, inline comments, and related API documentation.

6. At the top of the app.js file, load the '@google-cloud/trace-agent' module and then start() it:

frontend/app.js

// TODO: Load the trace-agent and start it // Trace must be started before any other code in the // application. require('@google-cloud/trace-agent').start({ projectId: config.get('GCLOUD_PROJECT') }); // END TODO

7. Save the file.

Run the web application and view trace data

1. To start the application, execute the following command:

npm start

2. In Cloud Shell, click Web preview > Preview on port 8080 to preview the quiz application.
3. Return to the Cloud Platform Console.
4. On the Navigation menu, click View all Products. Under Observability, click Trace.

Note: The Trace overview page opens. However, it may take a few minutes for the first request to populate. After this happens, trace data is visible with just a few seconds' latency.

5. Return to the Trace Explorer window in the Cloud Platform Console and enable Auto Refresh.

6. While waiting for the first Trace to populate, return to the Cloud Shell window and look for error messages.

Note: Sometimes, due to a timing issue after enabling APIs, you might see errors about Cloud Trace.

If you see errors, stop the Quiz application, restart after a minute, and then refresh the Quiz application home page.

7. Return to Trace Explorer in the Cloud Platform Console.
8. After your first Trace has populated, click the GET / entry.

Note: You should see the Latency, HTTP Method, and URL for the request.

9. Return to the quiz application and click Create Question.
10. Fill in the form using the following values:

Form Field	Value
Author	Your Name
Quiz	Google Cloud Platform
Title	Which Google Cloud product allows you to see request timing?
Answer 1	Debugger
Answer 2	Error Reporting
Answer 3	Logging
Answer 4	Trace (select the Answer 4 radio button)

11. Click Save.

Note: Look at the Trace list.

Eventually, two new requests are displayed:

1. GET /questions/add
2. POST /questions/add

12. Click on the POST request against the /questions/add URL.

Note: You should see the total time to handle the request and the call made against the Cloud Datastore.

13. Return to the quiz application, and click Take Test.
14. Click People.
15. Complete the test, and submit feedback.
16. Return to the Trace Explorer window in the Cloud Console.

Note: Look at the Trace list again. Eventually a set of new requests is displayed.

Find the following requests and click on them:

1. POST /api/quizzes/people
2. POST /api/quizzes/feedback/people

These represent the calls made from the client-side application against the quiz application.

Once again, you should see the total time taken to complete the request.

Notice that the calls are sequential. This is because the Cloud Pub/Sub request needs the correct answers from Question entities in Cloud Datastore to send answer data to Cloud Pub/Sub for Storage in Cloud Spanner.

17. In the quiz application, click Quite Interesting Quiz in the toolbar, and then click Leaderboard.
18. Return to the Trace Explorer window in the Cloud Console and review the Trace data for the new request.

Note: You should see that this request includes calls to Cloud Spanner.

Task 3. Diagnosing a performance problem with Cloud Trace

In this section, you continue to explore the quiz application with Trace Explorer and identify and resolve a performance issue.

Identify a performance problem with Cloud Trace

1. Return to the quiz application and click Take Test.
2. Click Places.
3. Complete the test, and submit feedback.
4. Return to the Trace Explorer window in the Cloud Console.

Note: Look at the Trace list again. Eventually a set of new requests will be displayed.

Find the following requests and click on them:

1. POST /api/quizzes/places
2. POST /api/quizzes/feedback/places

These represent the calls made from the client-side application against the quiz application.

Once again, you should see the total time taken to complete the request.

Notice that the calls are sequential. This is because the Cloud Pub/Sub request needs data from Cloud Datastore to send the answer data to Cloud Pub/Sub. Note: However, you should also see that each call to Cloud Pub/Sub is also sequential; this is not OK!

5. Return to the quiz application and click GCP.
6. Complete the test, and submit feedback.
7. Return to the Trace Explorer window in the Cloud Console.

Note: Look at the Trace list once again. Eventually a set of new requests will be displayed.

Find the following requests and click on them:

1. POST /api/quizzes/gcp
2. POST /api/quizzes/feedback/gcp

These represent the calls made from the client-side application against the quiz application.

Once again, you should see the total time taken to complete the request.

Notice that the calls are sequential. This is because the Cloud Pub/Sub request needed data from Cloud Datastore to send the answer data to Cloud Pub/Sub. Note: However, you should also see that once again, each call to Cloud Pub/Sub is also sequential.

With four questions in the quiz, it's taking four times as long to send the Cloud Pub/Sub messages!

This is definitely not OK!

Modify application code to resolve the performance problem

1. Return to the Cloud Shell and launch the Code editor if it is not opened already.
2. Navigate to stackdriver-trace-monitoring/start/.
3. Open ...frontend/api/index.js.
4. Find the statement that publishes answer messages in sequence, and modify it to perform the operations in parallel.

Note: Fortunately, this is a very easy change to make! The code change is shown below.

api/index.js before the change:

// TODO: Sends the answers to Pub/Sub in parallel // Sends the answers to Pub/Sub in sequence // Change sequence to parallel in the next statement sequence(answersWithCorrect.map(answer => () => publisher.publishAnswer(answer))).then(() => { // Waits until all the Pub/Sub messages have been acknowledged before returning to the client const score = answersWithCorrect.filter(a => a.answer == a.correct).length; res.status(200).json({ correct: score, total: questions.length }); }); // END TODO

api/index.js after the change:

// TODO: Sends the answers to Pub/Sub in parallel // Changed to parallel parallel(answersWithCorrect.map(answer => () => publisher.publishAnswer(answer))).then(() => { // Waits until all the Pub/Sub messages have been acknowledged before returning to the client const score = answersWithCorrect.filter(a => a.answer == a.correct).length; res.status(200).json({ correct: score, total: questions.length }); }); // END TODO

Confirm problem resolution with Cloud Trace

1. Return to the Cloud Shell, stop the application by pressing Ctrl+C, and then start it again.
2. Return to the Quiz application, and take the People, Places, and GCP tests again.
3. Return to the Trace Explorer window in the Cloud Console.

Note: Look at the Trace list once again. Eventually a set of new requests will be displayed.

Find the following requests and click on them:

1. POST /api/quizzes/people|places|gcp
2. POST /api/quizzes/feedback/people|places|gcp

These represent the calls made from the client-side application against the quiz application.

Once again, you should see the total time taken to complete the request. Note: This time, you should see that all of the Pub/Sub messages have been dispatched in parallel. The time taken to complete processing of the requests is significantly lower.

Task 4. Visualizing application metrics with Cloud Monitoring

In this section, you continue to explore the quiz application with Cloud Monitoring by exploring metrics and create dashboards.

Create a Monitoring workspace

You will now setup a Monitoring workspace that's tied to your Google Cloud Project. The following steps create a new account that has a free trial of Monitoring.

1. In the Cloud Console, click on Navigation menu > Monitoring.

2. Wait for your workspace to be provisioned.

When the Monitoring dashboard opens, your workspace is ready.

Create a dashboard and explore metrics

1. In the left-hand pane, click Dashboards.
2. Click Create Custom Dashboard.
3. For New Dashboard Name, type Quiz Application Metrics.
4. Click +Add Widget.
5. For Visualization, select Line chart.
6. For the Metric field, click on Select a metric, then select Cloud Spanner Instance > Instance > CPU Utilization dropdown, and then click Apply.

Select only Active resources.

Note: Examples of resources that are active:

• cloud_function
• datastore_request
• gcs_bucket
• global
• pubsub_subscription
• pubsub_topic
• spanner_instance

7. Click on each resource in turn, and select a few metrics that are of interest to you.

Note: Here are some example metrics to explore:

• cloudfunctions/function/execution_count
• datastore/api/request_count
• storage/api/request_count
• logging/log_entry_count
• pubsub/subscription/num_outstanding_messages
• pubsub/topic/message_sizes
• spanner/api/request_count

8. Create several charts, including your own selection of resource and metrics.

Note: Review

Which Google Cloud product should be loaded first, before any other code?

1. Cloud Trace
2. Cloud Debugger
3. Cloud Error Reporting
4. Cloud Logging

Which GCP products are integrated into Google Cloud Trace?

1. Cloud Datastore
2. Cloud Spanner
3. Cloud Pub/Sub
4. Cloud Storage

With Cloud Monitoring, which feature allows charts to be assembled to view performance of your application?

1. Alerting
2. Uptime Checks
3. Dashboards
4. Groups

Task 5. Bonus: Deploy the Quiz Application into Container or App Engine

Use the notes from the appropriate labs to do this. After the application is deployed, you'll be able to monitor both the frontend and the Google Cloud resources.

End your lab

When you have completed your lab, click End Lab. Google Skills removes the resources you’ve used and cleans the account for you.

You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.

The number of stars indicates the following:

• 1 star = Very dissatisfied
• 2 stars = Dissatisfied
• 3 stars = Neutral
• 4 stars = Satisfied
• 5 stars = Very satisfied

You can close the dialog box if you don't want to provide feedback.

For feedback, suggestions, or corrections, please use the Support tab.

Copyright 2026 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.