Depurar com o Proxy de Desenvolvimento

Visão geral
Objetivo: Depurar seu aplicativo enquanto o Proxy de Desenvolvimento simula erros de API
Tempo: 15 minutos
Plugins:GenericRandomErrorPlugin
Pré-requisitos:Configurar Proxy de Desenvolvimento, VS Code

Ao criar aplicativos que chamam APIs, você precisa assegurar que seu código trate erros corretamente. Combinando o Proxy de Desenvolvimento com o depurador do código do Visual Studio (VS), você pode simular erros de API e percorrer o código de tratamento de erros para verificar se ele funciona corretamente.

Visão geral

A depuração com o Proxy de Desenvolvimento envolve três etapas:

  1. Configurar o VS Code para rotear solicitações HTTP por meio do Proxy de Desenvolvimento
  2. Configurar o Proxy de Desenvolvimento para simular erros específicos
  3. Defina pontos de interrupção no código de tratamento de erros e faça a depuração.

Configurar o VS Code para debugging com o Proxy de Desenvolvimento

A forma como você configura o VS Code depende da linguagem de programação que você usa. As seções a seguir mostram como configurar o VS Code para aplicativos Node.js, .NET e Python.

Node.js

Para depurar um aplicativo Node.js com o Proxy de Desenvolvimento, configure o arquivo para definir as variáveis de ambiente proxy e desabilitar a verificação do certificado TLS/SSL.

Arquivo: .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

A configuração desabilita a verificação do certificado TLS/SSL. Use essa configuração somente durante o desenvolvimento. Para obter uma abordagem mais segura, use para confiar diretamente no certificado do Proxy de Desenvolvimento:

macOS/Linux:

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

Windows:

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

A variável é usada pelo pacote, que fornece suporte a proxy para muitas bibliotecas HTTP Node.js. Para obter mais informações sobre como configurar bibliotecas HTTP diferentes, consulte Usar o Proxy de Desenvolvimento com aplicativos Node.js.

.NET

.NET aplicativos usam automaticamente as configurações de proxy do sistema. Para depurar um aplicativo .NET com o Dev Proxy, normalmente você não precisa definir nenhuma variável de ambiente. Crie uma configuração básica de depuração:

Arquivo: .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
    }
  ]
}

Se o aplicativo não pegar o proxy do sistema, defina explicitamente as variáveis de ambiente de proxy:

Arquivo: .vscode/launch.json (com configurações de proxy explícitas)

{
  "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"
      }
    }
  ]
}

Dica

No Windows e no macOS, o .NET confiará automaticamente no certificado do Dev Proxy se você o instalou como certificado raiz confiável durante a configuração do Dev Proxy. No Linux, talvez seja necessário confiar no certificado manualmente. Consulte a documentação da distribuição para configurar certificados confiáveis.

Python

Para depurar um aplicativo Python com o Proxy Dev, configure o arquivo launch.json para definir as variáveis de ambiente do proxy. A configuração depende se você usa a biblioteca ou outras bibliotecas HTTP.

Arquivo: .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

Configurar para uma string vazia informa à biblioteca que ignore a verificação do certificado TLS/SSL. Use essa configuração somente durante o desenvolvimento.

Para uma abordagem mais segura, aponte para o certificado do proxy de desenvolvimento.

macOS/Linux:

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

Windows:

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

Se você usar a biblioteca, configure a verificação TLS/SSL usando a variável de ambiente em vez disso:

{
  "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"
  }
}

Configurar o Proxy de Desenvolvimento para simular erros

Para depurar a manipulação de erros, configure o Dev Proxy para retornar erros específicos quando seu aplicativo chamar APIs. Use o GenericRandomErrorPlugin para simular erros como ou .

Simular um erro 429 (muitas solicitações)

Crie um arquivo de configuração do Proxy Dev que simula o estrangulamento:

Arquivo: 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"
  }
}

Crie o arquivo de erros com as respostas de erro específicas:

Arquivo: 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."
            }
          }
        }
      ]
    }
  ]
}

Dica

Defina para fazer com que todas as solicitações falhem para que você acerte consistentemente o código de tratamento de erros durante a depuração. Reduza a taxa quando quiser testar erros intermitentes.

Simular um 500 (erro interno do servidor)

Para simular erros do servidor, adicione outra resposta de erro:

Arquivo: errors.json (vários erros)

{
  "$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."
            }
          }
        }
      ]
    }
  ]
}

Quando você define várias respostas de erro, o Proxy de Desenvolvimento seleciona aleatoriamente uma para cada solicitação interceptada.

Depure seu código de tratamento de erros

Com o VS Code e o Proxy de Desenvolvimento configurados, agora você pode depurar o seu código de tratamento de erros.

Etapa 1: Definir pontos de interrupção

Abra o código-fonte e defina pontos de interrupção no código de tratamento de erros. Por exemplo, em um aplicativo 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;
  }
}

Etapa 2: Iniciar Proxy de Desenvolvimento

Inicie o Proxy de Desenvolvimento com o arquivo de configuração:

devproxy --config-file devproxyrc.json

Etapa 3: Iniciar a depuração no Visual Studio Code

  1. Abrir o VS Code
  2. Pressione F5 ou selecione Executar Iniciar Depuração
  3. Quando seu aplicativo faz uma chamada à API, o Proxy de Desenvolvimento o intercepta e retorna um erro
  4. O VS Code pausa em seu ponto de interrupção
  5. Use os controles de depuração para percorrer seu código e inspecionar variáveis

Etapa 4: Inspecionar o erro

Quando o VS Code pausar no ponto de interrupção, use o painel de depuração para:

  • Exibir o código e a mensagem de status da resposta de erro
  • Verificar os valores das variáveis locais
  • Analise sua lógica de tentativa
  • Verifique se suas mensagens de erro são amigáveis para o usuário

Iniciar e parar o Proxy de Desenvolvimento automaticamente

Para otimizar o fluxo de trabalho de depuração, configure o VS Code para iniciar automaticamente o Dev Proxy ao começar a depuração e pará-lo ao terminar. Instale a extensão do Kit de Ferramentas de Proxy de Desenvolvimento e configure as tarefas:

Arquivo: .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 essas tarefas, atualize seu :

Arquivo: .vscode/launch.json (Node.js com o início 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"
      }
    }
  ]
}

Dicas para depuração eficaz

  • Para atingir consistentemente seus pontos de interrupção, defina na configuração do Proxy de Desenvolvimento para que cada solicitação falhe.
  • Para entender como seu código lida com um erro específico, use uma única resposta de erro ao depurar.
  • Para verificar se o código respeita a limitação, verifique se ele lê e segue o cabeçalho ao depurar 429 erros.
  • Para garantir que seu código manipule respostas incomuns graciosamente, use o Dev Proxy para simular casos extremos, como JSON malformado ou cabeçalhos ausentes.
  • Para interromper somente erros específicos, use pontos de interrupção condicionais no VS Code clicando com o botão direito do mouse em um ponto de interrupção e adicionando uma condição como .

Consulte também

  • Last updated on