開発プロキシを使用したデバッグ

概要
目標： 開発プロキシが API エラーをシミュレートしている間にアプリケーションをデバッグする
時間: 15 分
Plugins:GenericRandomErrorPlugin
前提条件:開発プロキシ、VS Code を設定する

API を呼び出すアプリケーションをビルドするときは、コードでエラーが正しく処理されるようにする必要があります。 開発プロキシと Visual Studio (VS) コードのデバッガーを組み合わせることで、API エラーをシミュレートし、エラー処理コードをステップ実行して正しく動作することを確認できます。

概要

開発プロキシを使用したデバッグには、次の 3 つの手順が含まれます。

  1. 開発プロキシ経由で HTTP 要求をルーティングするように VS Code を構成する
  2. 特定のエラーをシミュレートするように開発プロキシを構成する
  3. エラー処理コードとデバッグでブレークポイントを設定する

開発プロキシを使用したデバッグ用に VS Code を構成する

VS Code の構成方法は、使用するプログラミング言語によって異なります。 次のセクションでは、Node.js、.NET、および Python アプリケーション用に VS Code を構成する方法について説明します。

Node.js

開発プロキシを使用して Node.js アプリケーションをデバッグするには、 ファイルを構成してプロキシ環境変数を設定し、TLS/SSL 証明書の検証を無効にします。

ファイル: .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"
      }
    }
  ]
}

Important

設定では、TLS/SSL 証明書の検証が無効になります。 開発中にのみ、この設定を使用します。 より安全なアプローチとして、Dev Proxy の証明書を直接信頼する方法を使用します。

macOS/Linux:

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

Windows:

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

変数は、多くの Node.js HTTP ライブラリのプロキシ サポートを提供する パッケージによって使用されます。 さまざまな HTTP ライブラリの構成の詳細については、「 Node.js アプリケーションでの開発プロキシの使用」を参照してください。

.NET

.NETアプリケーションでは、システム プロキシ設定が自動的に使用されます。 開発プロキシを使用して.NET アプリケーションをデバッグするには、通常、環境変数を設定する必要はありません。 基本的なデバッグ構成を作成します。

ファイル: .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
    }
  ]
}

アプリケーションがシステム プロキシを取得しない場合は、プロキシ環境変数を明示的に設定します。

ファイル: .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,
      "env": {
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000"
      }
    }
  ]
}

ヒント

Windowsと macOS では、.NETは、Dev Proxy のセットアップ中に信頼されたルート証明書としてインストールした場合を自動的に信頼します。 Linux では、証明書を手動で信頼することが必要になる場合があります。 信頼できる証明書の構成については、ディストリビューションのドキュメントを参照してください。

Python

開発プロキシを使用してPython アプリケーションをデバッグするには、launch.json ファイルを構成してプロキシ環境変数を設定します。 構成は、 ライブラリまたはその他の HTTP ライブラリのどちらを使用するかによって異なります。

ファイル: .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": ""
      }
    }
  ]
}

Important

を空の文字列に設定すると、tls/SSL 証明書の検証をスキップするように ライブラリに指示されます。 開発中にのみ、この設定を使用します。

より安全なアプローチを取るために、開発プロキシ証明書を参照してください。

macOS/Linux:

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

Windows:

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

ライブラリを使用する場合は、代わりに 環境変数を使用して TLS/SSL 検証を構成します。

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

エラーをシミュレートするように開発プロキシを構成する

エラー処理をデバッグするには、アプリが API を呼び出すときに特定のエラーを返すように開発プロキシを構成します。 GenericRandomErrorPlugin を使用して、やなどのエラーをシミュレートします。

429 (要求が多すぎます) エラーをシミュレートする

スロットリングをシミュレートするデブプロキシ構成ファイルを作成します。

ファイル: 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"
  }
}

特定のエラー応答を含むエラー ファイルを作成します。

ファイル: 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."
            }
          }
        }
      ]
    }
  ]
}

ヒント

を に設定すると、すべての要求が失敗し、デバッグ中にエラー処理コードが一貫してヒットします。 断続的なエラーをテストする場合は、レートを下げてください。

500 をシミュレートする (内部サーバー エラー)

サーバー エラーをシミュレートするには、別のエラー応答を追加します。

ファイル: 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."
            }
          }
        },
        {
          "statusCode": 500,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            }
          ],
          "body": {
            "error": {
              "code": "InternalServerError",
              "message": "An unexpected error occurred."
            }
          }
        }
      ]
    }
  ]
}

複数のエラー応答を定義すると、Dev Proxy は、インターセプトされた要求ごとに 1 つをランダムに選択します。

エラー処理コードをデバッグする

VS Code と開発プロキシが構成されたので、エラー処理コードをデバッグできるようになりました。

手順 1: ブレークポイントを設定する

ソース コードを開き、エラー処理コードにブレークポイントを設定します。 たとえば、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;
  }
}

手順 2: 開発プロキシを開始する

構成ファイルを使用して開発プロキシを起動します。

devproxy --config-file devproxyrc.json

手順 3: VS Code でデバッグを開始する

  1. VS Code を開く
  2. F5 キーを押すか、[実行] [デバッグの開始] を選択します
  3. アプリケーションが API 呼び出しを行うと、Dev Proxy によって API 呼び出しがインターセプトされ、エラーが返されます
  4. VS Code がブレークポイントで一時停止する
  5. デバッグ コントロールを使用してコードをステップ実行し、変数を検査する

手順 4: エラーを調べる

VS Code がブレークポイントで一時停止したら、デバッグ パネルを使用して次の操作を行います。

  • エラー応答の状態コードとメッセージを表示する
  • ローカル変数の値を確認する
  • 再試行ロジックをステップ実行する
  • エラー メッセージがわかりやすいことを確認する

開発プロキシを自動的に開始および停止する

デバッグ ワークフローを効率化するには、デバッグを開始するときに開発プロキシを自動的に起動し、完了したら停止するように VS Code を構成します。 Dev Proxy Toolkit 拡張機能をインストールし、タスクを構成します。

ファイル: .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"
    }
  ]
}

これらのタスクを使用するには、設定を更新します。

ファイル: .vscode/launch.json (自動開始でNode.js)

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

効果的なデバッグに関するヒント

  • ブレークポイントに一貫してヒットするには、すべての要求が失敗するように、開発プロキシ構成で特定の設定を行います。
  • コードが特定のエラーを処理する方法を理解するには、デバッグ時に 1 つのエラー応答を使用します。
  • コードがスロットリングに対応していることを確認するには、429 エラーをデバッグする際、ヘッダーを読み取り、従っていることを確認します。
  • コードで異常な応答が適切に処理されるようにするには、Dev Proxy を使用して、形式が正しくない JSON やヘッダーが見つからないなどのエッジ ケースをシミュレートします。
  • 特定のエラーでのみ中断するには、ブレークポイントを右クリックし、 などの条件を追加することで、VS Code で条件付きブレークポイントを使用します。

こちらも参照ください

  • Last updated on