如何在客户端复现net::ERR_CONNECTION_RESET错误？Phoenix应用测试求助

一、复现net::ERR_CONNECTION_RESET错误的方法 #

Chrome浏览器端操作 #

• 打开Chrome开发者工具（F12），切换到Network标签，选中LiveView对应的WebSocket连接，右键选择Block request domain，强制阻断连接，模拟服务器主动重置连接的场景。
• 利用开发者工具的Throttling功能，先切换到Offline模式再快速恢复，或设置极高网络延迟，触发连接超时后重置。
• 使用命令行工具强制断开服务器端口连接：

  sudo tcpkill -9 port 4000
  

服务器端主动触发 #

• 在LiveView模块中添加临时代码，手动断开Socket连接：

  def handle_event("trigger_reset", _, socket) do
    Process.exit(socket.transport_pid, :kill)
    {:noreply, socket}
  end
  

• 临时修改Phoenix Socket配置，设置极短超时值强制触发连接重置：

  defmodule YourAppWeb.UserSocket do
    use Phoenix.Socket
    @timeout 1000 # 临时设置1秒超时
    # ... 原有配置
  end
  

二、优化自动重连逻辑的建议 #

• 确认客户端重连配置，在app.js中明确自定义重连策略：

  import { Socket } from "phoenix"
  import { LiveSocket } from "phoenix_live_view"
  
  let liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    reconnectAfterMs: (attempt) => Math.min(attempt * 1000, 10000) // 递增重试间隔
  })
  

• 添加客户端连接错误监听，主动触发重连：

  liveSocket.onError(() => {
    setTimeout(() => liveSocket.connect(), 2000)
  })
  

• 服务器端添加断开日志，记录错误上下文：

  def terminate(reason, _state) do
    Logger.info("Socket terminated: #{inspect(reason)}")
    :ok
  end
  

三、端到端测试防护逻辑的方案 #

• 使用Playwright模拟连接重置场景：

  const { chromium } = require('playwright');
  
  (async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('http://localhost:4000');
    await page.route('ws://localhost:4000/live', route => route.abort());
    const errorElement = await page.waitForSelector('#connection-error');
    console.log(await errorElement.textContent());
    await browser.close();
  })();
  

• 用tc命令在测试环境模拟网络异常：

  sudo tc qdisc add dev lo root netem loss 100%
  # 测试完成后恢复网络
  sudo tc qdisc del dev lo root netem
  

内容的提问来源于stack exchange，提问作者AungMyoOo