Depuración con proxy de desarrollador

De un vistazo
Objetivo: Depura tu aplicación mientras el Proxy de Desarrollo simula errores de API
Tiempo: 15 minutos
Plugins:GenericRandomErrorPlugin
Requisitos previos: Configuración del proxy de desarrollo, VS Code

Al compilar aplicaciones que llaman a las API, debe asegurarse de que el código controla correctamente los errores. Mediante la combinación del proxy de desarrollo con el depurador de Visual Studio (VS) Code, puede simular errores de API y recorrer el código de control de errores para comprobar que funciona correctamente.

Información general

La depuración con Dev Proxy consta de tres pasos:

  1. Configuración de VS Code para enrutar solicitudes HTTP a través del proxy de desarrollo
  2. Configuración del proxy de desarrollo para simular errores específicos
  3. Establecer puntos de interrupción en el código de control de errores y depurar

Configure VS Code para depurar con un proxy de desarrollo

La configuración de VS Code depende del lenguaje de programación que use. En las secciones siguientes se muestra cómo configurar VS Code para aplicaciones de Node.js, .NET y Python.

Node.js.

Para depurar una aplicación de Node.js con proxy de desarrollo, configure el archivo para establecer las variables de entorno de proxy y deshabilitar la comprobación del certificado TLS/SSL.

Archivo: .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug with Dev Proxy",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js",
      "env": {
        "NODE_ENV": "development",
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000",
        "GLOBAL_AGENT_HTTP_PROXY": "http://127.0.0.1:8000",
        "NODE_TLS_REJECT_UNAUTHORIZED": "0"
      }
    }
  ]
}

Importante

La configuración deshabilita la comprobación del certificado TLS/SSL. Use solo esta configuración durante el desarrollo. Para obtener un enfoque más seguro, use para confiar directamente en el certificado de proxy de desarrollo:

macOS/Linux:

"NODE_EXTRA_CA_CERTS": "${env:HOME}/.devproxy/rootCert.pem"

Windows:

"NODE_EXTRA_CA_CERTS": "${env:USERPROFILE}\\.devproxy\\rootCert.pem"

El paquete usa la variable , que proporciona compatibilidad con proxy para muchas bibliotecas HTTP de Node.js. Para obtener más información sobre cómo configurar diferentes bibliotecas HTTP, consulte Uso del proxy de desarrollo con aplicaciones de Node.js.

.NET

.NET aplicaciones usan automáticamente la configuración del proxy del sistema. Para depurar una aplicación de .NET con proxy de desarrollo, normalmente no es necesario establecer ninguna variable de entorno. Cree una configuración de depuración básica:

Archivo: .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "console": "internalConsole",
      "stopAtEntry": false
    }
  ]
}

Si la aplicación no selecciona el proxy del sistema, establezca explícitamente las variables de entorno de proxy:

Archivo: .vscode/launch.json (con configuración de proxy explícita)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "console": "internalConsole",
      "stopAtEntry": false,
      "env": {
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000"
      }
    }
  ]
}

Sugerencia

En Windows y macOS, .NET confía automáticamente en el certificado de proxy de desarrollo si lo instaló como un certificado raíz de confianza durante la configuración de Dev Proxy. En Linux, es posible que tenga que confiar manualmente en el certificado. Consulte la documentación de la distribución para configurar certificados de confianza.

Python

Para depurar una aplicación de Python con Dev Proxy, configure el archivo launch.json para establecer las variables de entorno proxy. La configuración depende de si usa la biblioteca u otras bibliotecas HTTP.

Archivo: .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}/main.py",
      "console": "integratedTerminal",
      "env": {
        "HTTP_PROXY": "http://127.0.0.1:8000",
        "HTTPS_PROXY": "http://127.0.0.1:8000",
        "REQUESTS_CA_BUNDLE": ""
      }
    }
  ]
}

Importante

Si se establece en una cadena vacía, se le indica a la biblioteca que omita la verificación del certificado TLS/SSL. Use solo esta configuración durante el desarrollo.

Para obtener un enfoque más seguro, apunte al certificado de proxy de desarrollo:

macOS/Linux:

"REQUESTS_CA_BUNDLE": "${env:HOME}/.devproxy/rootCert.pem"

Windows:

"REQUESTS_CA_BUNDLE": "${env:USERPROFILE}\\.devproxy\\rootCert.pem"

Si usa la biblioteca, configure la comprobación de TLS/SSL mediante la variable de entorno en su lugar:

{
  "env": {
    "HTTP_PROXY": "http://127.0.0.1:8000",
    "HTTPS_PROXY": "http://127.0.0.1:8000",
    "TLS/SSL_CERT_FILE": "${env:HOME}/.devproxy/rootCert.pem"
  }
}

Configuración del proxy de desarrollo para simular errores

Para depurar el control de errores, configure el Proxy de Desarrollo para devolver errores específicos cuando tu aplicación llame a las API. Usa el complemento GenericRandomErrorPlugin para simular errores como [ejemplo1] o [ejemplo2].

Simulación de un error 429 (demasiadas solicitudes)

Cree un archivo de configuración del proxy de desarrollo que simule la limitación:

Archivo: devproxyrc.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.1.0/rc.schema.json",
  "plugins": [
    {
      "name": "GenericRandomErrorPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "errorsConfig"
    }
  ],
  "urlsToWatch": [
    "https://api.contoso.com/*"
  ],
  "rate": 100,
  "errorsConfig": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.1.0/genericrandomerrorplugin.schema.json",
    "errorsFile": "errors.json"
  }
}

Cree el archivo de errores con las respuestas de error específicas:

Archivo: errors.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.1.0/genericrandomerrorplugin.errorsfile.schema.json",
  "errors": [
    {
      "request": {
        "url": "https://api.contoso.com/*"
      },
      "responses": [
        {
          "statusCode": 429,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            },
            {
              "name": "Retry-After",
              "value": "60"
            }
          ],
          "body": {
            "error": {
              "code": "TooManyRequests",
              "message": "Rate limit exceeded. Retry after 60 seconds."
            }
          }
        }
      ]
    }
  ]
}

Sugerencia

Establézcalo en para que se produzca un error en cada solicitud para que se alcance de forma coherente el código de control de errores durante la depuración. Reduzca la tasa cuando desee probar errores intermitentes.

Simular un 500 (error interno del servidor)

Para simular errores de servidor, agregue otra respuesta de error:

Archivo: errors.json (varios errores)

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.1.0/genericrandomerrorplugin.errorsfile.schema.json",
  "errors": [
    {
      "request": {
        "url": "https://api.contoso.com/*"
      },
      "responses": [
        {
          "statusCode": 429,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            },
            {
              "name": "Retry-After",
              "value": "60"
            }
          ],
          "body": {
            "error": {
              "code": "TooManyRequests",
              "message": "Rate limit exceeded. Retry after 60 seconds."
            }
          }
        },
        {
          "statusCode": 500,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            }
          ],
          "body": {
            "error": {
              "code": "InternalServerError",
              "message": "An unexpected error occurred."
            }
          }
        }
      ]
    }
  ]
}

Al definir varias respuestas de error, El proxy de desarrollo selecciona aleatoriamente una para cada solicitud interceptada.

Depura tu código de manejo de errores

Con VS Code y proxy de desarrollo configurados, ahora puede depurar el código de control de errores.

Paso 1: Establecer puntos de interrupción

Abra el código fuente y establezca puntos de interrupción en el código de control de errores. Por ejemplo, en una aplicación de Node.js:

async function fetchData() {
  try {
    const response = await fetch('https://api.contoso.com/data');
    
    if (!response.ok) {
      // Set a breakpoint here to debug error responses
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    // Set a breakpoint here to debug exceptions
    console.error('Failed to fetch data:', error);
    throw error;
  }
}

Paso 2: Iniciar proxy de desarrollo

Inicie el proxy de desarrollo con el archivo de configuración:

devproxy --config-file devproxyrc.json

Paso 3: Iniciar la depuración en VS Code

  1. Abrir VS Code
  2. Presione F5 o seleccione Ejecutar inicio de depuración.
  3. Cuando la aplicación realiza una llamada API, el proxy de desarrollo lo intercepta y devuelve un error.
  4. VS Code se detiene en el punto de interrupción
  5. Utiliza los controles de depuración para recorrer tu código e inspeccionar variables

Paso 4: Inspección del error

Cuando VS Code se detenga en su punto de parada, use el panel de depuración para:

  • Ver el código y el mensaje de estado de la respuesta de error
  • Comprobación de los valores de las variables locales
  • Paso a paso por la lógica de reintento
  • Compruebe que los mensajes de error son fáciles de usar

Iniciar y detener automáticamente el proxy de desarrollo

Para simplificar el flujo de trabajo de depuración, configure VS Code para iniciar automáticamente el proxy de desarrollo al comenzar la depuración y detenerlo cuando haya terminado. Instale la extensión Dev Proxy Toolkit y configure tareas:

Archivo: .vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "devproxy-start",
      "type": "devproxy",
      "command": "start",
      "args": [
        "--config-file",
        "devproxyrc.json"
      ],
      "isBackground": true,
      "problemMatcher": "$devproxy-watch"
    },
    {
      "label": "devproxy-stop",
      "type": "devproxy",
      "command": "stop"
    }
  ]
}

Para usar estas tareas, actualice :

Archivo: .vscode/launch.json (Node.js con inicio automático)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug with Dev Proxy",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js",
      "preLaunchTask": "devproxy-start",
      "postDebugTask": "devproxy-stop",
      "env": {
        "NODE_ENV": "development",
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000",
        "GLOBAL_AGENT_HTTP_PROXY": "http://127.0.0.1:8000",
        "NODE_TLS_REJECT_UNAUTHORIZED": "0"
      }
    }
  ]
}

Sugerencias para una depuración eficaz

  • Para alcanzar de manera coherente los puntos de interrupción, configure su proxy de desarrollo para que todas las solicitudes fallen.
  • Para comprender cómo el código controla un error específico, use una única respuesta de error al depurar.
  • Para comprobar que el código respeta la limitación, compruebe que lee y sigue el encabezado al depurar los errores 429.
  • Para asegurarse de que el código controla las respuestas inusuales correctamente, use Dev Proxy para simular casos perimetrales como JSON con formato incorrecto o encabezados que faltan.
  • Para interrumpir solo los errores específicos, use puntos de interrupción condicionales en VS Code haciendo clic con el botón derecho en un punto de interrupción y agregando una condición como .

Consulte también

  • Last updated on