如何在Flutter应用中监控与分析gRPC调用流量？

针对Dart DevTools不支持HTTP/2导致无法分析gRPC流量的问题，以下是几个实用方案：

一、修正Wireshark配置，实现gRPC流量解析 #

如果之前按官方指南尝试失败，可以从这些关键点排查：

• 确保Wireshark版本≥3.0：旧版本对HTTP/2和gRPC的支持不完善，升级到最新稳定版。
• 启用HTTP/2解析：在Wireshark的「编辑→首选项→Protocols→HTTP2」中勾选「Enable HTTP2 dissection」。
• 过滤gRPC流量：在过滤栏输入grpc直接筛选gRPC报文；如果需要看底层HTTP/2帧，用http2过滤。
• 解密TLS加密流量：如果你的gRPC调用是加密的（默认是TLS），需要导出SSL密钥：
  • 在Dart/Flutter运行环境中设置环境变量：export SSLKEYLOGFILE=./ssl-key.log（Linux/macOS）或set SSLKEYLOGFILE=.\ssl-key.log（Windows）。
  • 启动你的应用后，在Wireshark中配置「编辑→首选项→Protocols→TLS→(Pre)-Master-Secret log filename」，指向生成的ssl-key.log文件，即可解密gRPC流量。

二、在Dart代码中添加gRPC拦截器，直接捕获请求响应 #

这是最直接的应用层方案，无需抓包工具：

• 实现ClientInterceptor类，在调用前后拦截请求和响应，打印或保存头信息、报文内容：

import 'package:grpc/grpc.dart';

class GrpcLoggingInterceptor implements ClientInterceptor {
  @override
  ResponseFuture<R> intercept<Q, R>(
    ClientMethod<Q, R> method,
    Stream<Q> requests,
    CallOptions options,
    ClientInvoker<Q, R> invoker,
  ) {
    // 打印请求头和方法信息
    print('gRPC请求方法: ${method.path}');
    print('请求Metadata: ${options.metadata}');

    // 拦截响应
    return invoker(method, requests, options).then((response) {
      // 打印响应头和数据
      print('响应Metadata: ${response.headers}');
      print('响应数据: ${response.response}');
      return response;
    });
  }
}

• 在创建gRPC客户端时添加拦截器：

final channel = ClientChannel(
  'localhost',
  port: 50051,
  options: ChannelOptions(credentials: ChannelCredentials.insecure()),
);
final client = MyGrpcClient(channel, interceptors: [GrpcLoggingInterceptor()]);

三、使用mitmproxy拦截gRPC流量 #

mitmproxy支持HTTP/2和gRPC的解析与拦截，操作步骤：

• 安装mitmproxy，启动mitmweb（带Web界面的版本）。
• 配置Dart/Flutter客户端使用mitmproxy作为代理：在创建ClientChannel时设置代理，或者通过系统代理设置。
• 信任mitmproxy的根证书：将mitmproxy生成的证书（默认在~/.mitmproxy/mitmproxy-ca-cert.pem）添加到系统信任列表，或在Dart客户端中指定自定义证书。
• 启动应用后，在mitmweb界面中即可查看所有gRPC请求的头信息、请求体、响应体，支持搜索和导出。

内容的提问来源于stack exchange，提问作者Артем Ильин