Descripción general

En este lab, utilizará Cloud Debugger y Error Reporting para diagnosticar y corregir errores en la aplicación que se ejecuta.

Objetivos

En este lab, aprenderá a hacer lo siguiente:

• Crear un Cloud Source Repository y enviar código de aplicación a él

• Instalar y configurar Cloud Debugger

• Utilizar instantáneas y puntos de registro de depuración para capturar y mostrar variables de la aplicación

• Instalar y configurar Cloud Error Reporting

• Utilizar Cloud Error Reporting para identificar errores en una aplicación

Configuración y requisitos

En cada lab, recibirá un proyecto de Google Cloud y un conjunto de recursos nuevos por tiempo limitado y sin costo adicional.

1. Accede a Qwiklabs desde una ventana de incógnito.

2. Ten en cuenta el tiempo de acceso del lab (por ejemplo, 1:15:00) y asegúrate de finalizarlo en el plazo asignado.
   No existe una función de pausa. Si lo necesita, puede reiniciar el lab, pero deberá hacerlo desde el comienzo.

3. Cuando esté listo, haga clic en Comenzar lab.

4. Anote las credenciales del lab (el nombre de usuario y la contraseña). Las usarás para acceder a la consola de Google Cloud.

5. Haga clic en Abrir Google Console.

6. Haga clic en Usar otra cuenta, copie las credenciales para este lab y péguelas en el mensaje emergente que aparece.
   Si usa otras credenciales, se generarán errores o incurrirá en cargos.

7. Acepta las condiciones y omite la página de recursos de recuperación.

Active Google Cloud Shell

Google Cloud Shell es una máquina virtual que cuenta con herramientas de desarrollo. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud. Además, Google Cloud Shell proporciona acceso de línea de comandos a sus recursos de GCP.

1. En GCP Console, en la barra de herramientas superior derecha, haga clic en el botón Abrir Cloud Shell.

   

2. Haga clic en Continue (Continuar):

   

El aprovisionamiento y la conexión al entorno demoran solo unos minutos. Cuando esté conectado, ya estará autenticado y el proyecto estará configurado con su PROJECT_ID. Por ejemplo:

gcloud es la herramienta de línea de comandos para Google Cloud Platform. Viene preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

Puede solicitar el nombre de la cuenta activa con este comando:

gcloud auth list

Resultado:

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)

Resultado de ejemplo:

Credentialed accounts:
 - google1623327_student@qwiklabs.net

Puede solicitar el ID del proyecto con este comando:

gcloud config list project

Resultado:

[core]
project = <project_ID>

Resultado de ejemplo:

[core]
project = qwiklabs-gcp-44776a13dea667a6

Prepare la aplicación del caso de éxito

En esta sección, accederá a Cloud Shell, clonará el repositorio de Git que contiene la aplicación Quiz, configurará las variables de entorno y ejecutará la aplicación.

Clone el código fuente en Cloud Shell

1. A fin de clonar el repositorio para la clase, ejecute el siguiente comando:

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

2. Cree un vínculo simbólico como acceso directo en su directorio de trabajo.

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/stackdriver-debug-errorreporting ~/stackdriver-debug-errorreporting

Configure y ejecute la aplicación del caso de éxito

1. Cambie al directorio que contiene los archivos de muestra de este lab:

cd ~/stackdriver-debug-errorreporting/start

2. Para configurar la aplicación Quiz, ejecute el siguiente comando:

. prepare_incomplete_environment.sh

Cree un Cloud Source Repository

En esta sección, creará un Cloud Source Repository y enviará el código de aplicación Quiz del lab actual a él.

Cree un Cloud Source Repository

1. En el Menú de navegación de Cloud Platform Console, haga clic en Source Repositories.
2. Haga clic en Agregar repositorio en la esquina superior derecha.
3. Seleccione Crear repositorio nuevo y haga clic en Continuar.
4. Asigne el nombre default al repositorio y, luego, para Proyecto, seleccione el proyecto identificado con el ID de su proyecto de GCP en el menú desplegable.
5. Haga clic en Crear.

Se abre el diálogo Agrega código a tu repositorio.

Clone el repositorio

1. Regrese a la ventana de Cloud Shell.

2. Para cambiar el directorio de trabajo de vuelta a la carpeta principal, ejecute el siguiente comando:

cd ~

3. Para clonar el Cloud Source Repository predeterminado, ejecute el siguiente comando:

gcloud source repos clone default

4. Para copiar los archivos de la aplicación Quiz de la carpeta del lab al repositorio, ejecute el siguiente comando:

cp -r ~/stackdriver-debug-errorreporting/start/quiz-app/* ~/default

5. Cambie el directorio de trabajo al directorio default.

cd ~/default

6. Cree un archivo .gitignore en la carpeta default para evitar que la carpeta node_modules se incluya en comandos git posteriores.

echo node_modules > .gitignore

7. Ingrese el comando git add para agregar los archivos que se confirmarán.

git add .

8. Ingrese los comandos para configurar git con su correo electrónico y nombre.

git config --global user.email "student@example.com"
git config --global user.name "A Student"

9. Ingrese el comando git commit para confirmar los cambios con el mensaje "Quiz application initial check-in".

git commit -m "Quiz application initial check-in"

10. Ingrese el comando git push para enviar los cambios al repositorio predeterminado.

git push

11. Regrese a la ventana de Source Repository y actualice la pestaña del navegador.

Use Cloud Debugger

En esta sección, escribirá el código para crear e iniciar Cloud Debugger en la aplicación Quiz. Luego, establecerá instantáneas y puntos de registro de depuración en Cloud Platform Console.

Escriba código para configurar Cloud Debugger

1. En Cloud Shell, ejecute el siguiente comando a fin de instalar el agente de Node.js para Cloud Debugger:

cd ~/default
npm install --save @google-cloud/debug-agent

2. Haga clic en Abrir editor.

Si un error indica que no se pudo cargar el editor de código debido a que las cookies de terceros están inhabilitadas, haga clic en Abrir en una ventana nueva y cambié a la nueva pestaña.

3. En el archivo default/app.js, importe el módulo '@google-cloud/debug-agent' y, a continuación, inícielo. Para obtener más información, consulte https://cloud.google.com/debugger/docs/setup/nodejs.

default/app.js

// TODO: Add the following statement to import and start
// Stackdriver debug-agent
// The start(...) method takes an 'options' object that you
// can use to configure the Cloud Debugger agent.
// You will need to pass through an object with an
// allowExpressions Boolean property set to true.
require('@google-cloud/debug-agent').start({ allowExpressions: true });
// END TODO

4. Guarde el archivo.

Actualice Cloud Source Repository y produzca un contexto fuente

1. Regrese a la ventana de Cloud Shell.

Si Cloud Shell no está visible, haga clic en Abrir terminal.

2. Para agregar los cambios, confirmarlos y enviarlos al Cloud Source Repository predeterminado, ejecute los siguientes comandos:

cd ~/default
git add .
git commit -m "Added Cloud Debug Agent"
git push

3. Para producir el archivo de contexto de origen, ejecute el siguiente comando:

gcloud debug source gen-repo-info-file --output-directory .

Depure la aplicación web con una instantánea

1. Para instalar las dependencias de la aplicación Quiz e iniciarla, ejecute el siguiente comando:

npm install
npm start

2. Cuando vea el mensaje App listening on port 8080, haga clic en Vista previa en la Web > Vista previa en el puerto 8080 para obtener una vista previa de la aplicación Quiz.
3. Regrese a Cloud Platform Console.
4. En el Menú de navegación, haga clic en Debugger.

5. Utilice el navegador del código fuente para seleccionar el archivo web-app/questions.js.
6. Busque el controlador POST donde se agregan las preguntas (router.post('/add..)) y haga clic en el número de línea a la izquierda del espacio en blanco inmediatamente después de let data = req.body. Haga clic en Crear instantánea.

7. Regrese a la aplicación Quiz y haga clic en Create Question.
8. Complete el formulario con los siguientes valores y haga clic en Guardar.

Campo del formulario	Valor
Author	Su nombre
Quiz	Google Cloud Platform
Título	¿Cuál de los siguientes es un producto de Google Cloud?
Respuesta 1	Debug
Respuesta 2	Error Reporting
Respuesta 3	Logging
Respuesta 4	Todas las opciones anteriores (seleccione la respuesta 4 como la correcta)

9. Regrese a la ventana de Cloud Debug en Cloud Platform Console.

10. Expanda la variable data.

Depure la aplicación web con un punto de registro

1. Sin salir de questions.js, haga clic en la pestaña Punto de registro del panel derecho en la ventana Depuración.
2. Haga clic en la misma línea de código fuente que usó para insertar la instantánea y, luego, en Crear punto de registro.

3. En el editor interactivo del punto de registro, escriba la siguiente instrucción de registro y haga clic en Agregar.

if (true) logpoint("Quiz = {data.quiz}")

Esta instrucción de registro imprime el valor del campo del formulario de quiz.

4. Regrese a la aplicación Quiz y haga clic en Create Question.
5. Complete el formulario con los siguientes valores y haga clic en Guardar.

Campo del formulario	Valor
Author	Su nombre
Quiz	Google Cloud Platform
Título	¿Qué producto de Google Cloud incluye instantáneas y puntos de registro?
Respuesta 1	Debugger (seleccione la respuesta 1 como la correcta)
Respuesta 2	Error Reporting
Respuesta 3	Logging
Respuesta 4	Todas las opciones anteriores

6. Regrese a la ventana de Cloud Shell.

Use Cloud Error Reporting

En esta sección, escribirá el código para integrar Cloud Error Reporting en la aplicación Quiz y observar los errores de la aplicación web y de Cloud Functions.

Escriba código para configurar Cloud Error Reporting

1. En Cloud Shell, presione Ctrl + C para detener la aplicación web.

2. A fin de instalar la biblioteca Node.js para Cloud Error Reporting, ejecute el siguiente comando:

cd ~/default
npm install --save @google-cloud/error-reporting

3. En el editor de código de Cloud Shell, navegue a default/app.js.

4. En el archivo app.js, cargue el módulo '@google-cloud/error-reporting.

5. Cree el cliente de Cloud Error Reporting.

default/app.js

// TODO: Load the error-reporting module
const {ErrorReporting} = require(
       '@google-cloud/error-reporting');
// END TODO
const path = require('path');
const express = require('express');
const config = require('./config');
const app = express();
// TODO: Create the errorReporting client object
const errorReporting = new ErrorReporting();
// END TODO

6. Configure la aplicación para usar Cloud Error Reporting con Express.

default/app.js

// TODO: Use Stackdriver Error Reporting
// middleware for Express
app.use(errorReporting.express);
// END TODO

7. Guarde el archivo.

Actualice Cloud Source Repository y produzca un nuevo contexto fuente

1. Regrese a la ventana de Cloud Shell y ejecute los siguientes comandos para agregar, confirmar y enviar los cambios al Cloud Source Repository predeterminado.

cd ~/default
git add .
git commit -m "Added Cloud Error Reporting"
git push

2. Para producir el archivo de contexto fuente, ejecute el siguiente comando:

gcloud debug source gen-repo-info-file --output-directory .

Vea los errores de la aplicación web con Error Reporting

1. De forma predeterminada, Cloud Error Reporting se activa únicamente cuando la aplicación está en producción. Exporte una variable de entorno, NODE_ENV, con el valor establecido en production.

export NODE_ENV=production

2. Para iniciar la aplicación, ejecute el siguiente comando:

npm start

3. Obtenga una vista previa de la aplicación web.
4. Regrese a Cloud Platform Console.
5. En el menú de navegación, haga clic en Error Reporting.

6. Regrese a la aplicación Quiz y haga clic en Take Test.
7. Haga clic en Places.
8. Complete el cuestionario, ingrese una calificación y comentarios, y haga clic en Send Feedback.

9. Regrese a Cloud Platform Console.
10. En el menú de navegación, haga clic en Error Reporting.
11. Haga clic en Volver a cargar automáticamente.

Vea los errores de Cloud Function con Error Reporting

1. Regrese a Cloud Shell y presione Ctrl+C para detener la aplicación web.

2. Para crear el tema de Pub/Sub faltante, ejecute el siguiente comando:

gcloud pubsub topics create feedback

3. Para crear la Cloud Function que se suscribe al tema de comentarios e inserta un registro en Cloud Spanner, ejecute los siguientes comandos:

cd ~/stackdriver-debug-errorreporting/start/
gcloud functions deploy process-feedback --runtime nodejs14 \
  --trigger-topic feedback --source ./function \
  --stage-bucket $GCLOUD_BUCKET --entry-point subscribe
cd ~/default

4. Para iniciar la aplicación web, ejecute el siguiente comando:

npm start

5. Obtenga una vista previa de la aplicación web.
6. Regrese a la aplicación Quiz y haga clic en Take Test.
7. Haga clic en Places.
8. Complete el cuestionario, ingrese una calificación y comentarios, y haga clic en Send Feedback.

9. Regrese a Cloud Platform Console.
10. En el menú de navegación, haga clic en Error Reporting.

11. Haga clic en el vínculo Error: ERROR processing feedback:.

12. En la sección Muestras recientes de la ventana, haga clic en el vínculo Ver registros para el error de Cloud Functions.

13. Para crear la base de datos y la tabla de comentarios, regrese a Cloud Shell, detenga la aplicación web y ejecute el siguiente comando:

gcloud spanner databases create quiz-database --instance quiz-instance --ddl "CREATE TABLE Feedback ( feedbackId STRING(100) NOT NULL, email STRING(100), quiz STRING(20), feedback STRING(MAX), rating INT64, score FLOAT64, timestamp INT64 ) PRIMARY KEY (feedbackId);"

Adicional: Cómo encontrar un error lógico en la aplicación Quiz

En esta sección, encontrará un error en la aplicación Quiz y usará Cloud Debugger para identificar la causa.

Reproduzca el error de la aplicación Quiz

1. Inicie la aplicación web.
2. Navegue a la página principal de la aplicación Quiz y haga clic en Realizar prueba.
3. Haga clic en Places.
4. Responda la pregunta correctamente.
5. Haga clic en GCP y, luego, en Places de nuevo.
6. Responda la pregunta incorrectamente.
7. ¿Qué puntuación ve?

Finalice su lab

Cuando haya completado el lab, haga clic en Finalizar lab. Google Cloud Skills Boost quitará los recursos que usó y limpiará la cuenta.

Tendrá la oportunidad de calificar su experiencia en el lab. Seleccione la cantidad de estrellas que corresponda, ingrese un comentario y haga clic en Enviar.

La cantidad de estrellas indica lo siguiente:

• 1 estrella = Muy insatisfecho
• 2 estrellas = Insatisfecho
• 3 estrellas = Neutral
• 4 estrellas = Satisfecho
• 5 estrellas = Muy satisfecho

Puede cerrar el cuadro de diálogo si no desea proporcionar comentarios.

Para enviar comentarios, sugerencias o correcciones, use la pestaña Asistencia.

Copyright 2020 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.