AWS Amplify：如何监控每个请求的数据传出量？

1. 浏览器开发者工具直接分析 #

• 打开Chrome或Firefox的开发者工具（快捷键F12或Ctrl+Shift+I），切换到Network标签页
• 刷新页面或触发需要分析的操作，所有请求会被逐一列出
• 查看每个请求的Size列，响应头里的Content-Length字段，就是该请求从Amplify到浏览器的传出数据量
• 勾选Preserve log选项，可以保留跨页面的请求记录，方便统计多步操作的总传出数据量

2. 在React代码中添加自定义统计逻辑 #

• 若使用原生fetch，可以通过拦截器在响应返回时记录数据大小：

  const originalFetch = window.fetch;
  window.fetch = async (...args) => {
    const response = await originalFetch(...args);
    const clonedResponse = response.clone();
    const content = await clonedResponse.text();
    const dataSize = new Blob([content]).size;
    console.log(`请求${args[0]}的传出数据量：${dataSize}字节`);
    return response;
  };
  

• 若使用Amplify API模块，可在调用API的代码中直接统计响应大小：

  import { API } from 'aws-amplify';
  
  async function getAppData() {
    const response = await API.get('myCustomApi', '/data-path');
    const responseSize = new Blob([JSON.stringify(response)]).size;
    console.log(`本次API请求传出数据量：${responseSize}字节`);
  }
  

3. 通过CloudWatch监控Amplify后端资源 #

• Amplify关联的后端资源（如API Gateway、S3）会自动将日志同步到CloudWatch
• 进入CloudWatch控制台，找到对应Amplify项目的日志组（比如API Gateway的专属日志组）
• 可以通过日志过滤规则筛选出响应大小相关数据，或创建自定义指标来统计每个请求的传出量，还能搭建仪表板查看长期趋势

4. 借助Amplify CLI查看基础资源数据 #

• 运行amplify status确认当前后端资源的配置状态
• 执行amplify metrics查看基础资源使用统计，不过该命令覆盖范围有限，建议结合CloudWatch做详细分析

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