flutter 客户端日志上传定位错误信息

背景

flutter 开发的app 安装到真机上 无法定位报错信息，只能使用usb连接电脑 使用adb logcat来查看日志效率低下。

想法

如果将flutter 开发的app 运行的时候 将日志写进一个日志文件里面去，然后给flutter app搭建一个http服务器，后端知道对应app的ip后，直连对应app 获取日志文件。

效果如下

第一步

获取本机的ip地址 放在个人中心里面

如：

flutter 获取本机ip

方式一：缺点(模拟器获取有时会获取不到) 不推荐 但是必须使用

  for (var interface in await NetworkInterface.list()) {
      for (var addr in interface.addresses) {
        if (addr.type == InternetAddressType.IPv4) {
          address = addr.address.toString();
          print('IPv4 地址: ${addr.address}');
        }
        // else if (addr.type == InternetAddressType.IPv6) {
        //   print('IPv6 地址: ${addr.address}');
        //   // address = addr.address.toString();
        // }
      }
    }

方式二：

dart_ipify?dart_ipify | Dart Package?这里是外网的IP(不适用)

import 'package:dart_ipify/dart_ipify.dart';
 final ipv4 = await Ipify.ipv4();
 print(ipv4); // 98.207.254.136

这里声明一下? 客户端日志上传只限于局域网? 如果是外网 手机的网络ip app 内部是局域网 是访问不到的?

如果是外网 采用用户 手动触发一些列操作? 如 去个人中心 点击上报日志 (这个功能需要实现)

第二步

利用shelf? flutter 的插件搭建 app内的服务器

shelf | Dart PackageA model for web server middleware that encourages composition and easy reuse.https://pub-web.flutter-io.cn/packages/shelf注意端口不能为 80

import 'package:LS/common/extension/custom_ext.dart';
import 'package:LS/common/utils/log.dart';
import 'package:dart_ipify/dart_ipify.dart';
import 'package:flutter/foundation.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;

class Server {
  static String address = "";
  static init() async {
    if (kIsWeb) {
      return;
    }
    for (var interface in await NetworkInterface.list()) {
      for (var addr in interface.addresses) {
        if (addr.type == InternetAddressType.IPv4) {
          address = addr.address.toString();
          print('IPv4 地址: ${addr.address}');
        }
        // else if (addr.type == InternetAddressType.IPv6) {
        //   print('IPv6 地址: ${addr.address}');
        //   // address = addr.address.toString();
        // }
      }
    }

    // String ipv4 = await Ipify.ipv4();
    "当前ip i $address".w();
    // address = ipv4;
    var handler =
        const Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);

    var server = await shelf_io.serve(handler, address, 8080);

    // Enable content compression
    server.autoCompress = true;

    print('Serving at http://${server.address.host}:${server.port}');
  }

  static Future<Response> _echoRequest(Request request) async {
    switch (request.requestedUri.path) {
      case '/':
        return Response.ok('Hello, World!');
      case "/log":
        var headers = {
          'content-type': 'text/plain',
          'content-disposition': 'attachment; filename="log.txt"'
        };
        String log = await Console.getLogLocalFile();
        return Response.ok(log, headers: headers);
    }

    return Response.ok('Request for "${request.url}"');
  }
}

核心代码就是

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;

void main() async {
  var handler =
      const Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);

  var server = await shelf_io.serve(handler, 'localhost', 8080);

  // Enable content compression
  server.autoCompress = true;

  print('Serving at http://${server.address.host}:${server.port}');
}

Response _echoRequest(Request request) =>
    Response.ok('Request for "${request.url}"');

?main中 运行服务器

  if (kDebugMode) {
    Server.init();
  }

日志是 再打印的时候 就会自动进行写入

日志输出 同时写入app文件夹制定文件里面

///输出日志工具类
class Console {
  static const bool _isLog = true; // 是否输出日志标识
  static const bool _isDebug = kDebugMode; // 是否为debug模式
  static const String _logFlag = "app输出日志"; // 输出日志前缀

  ///日志输出,仅dubug模式下生效
  static void d(Object? object) {
    if (_isLog && _isDebug) {
      // print("$_logFlag | $object");
      // developer.log();
      Global.logger.i("$_logFlag | $object");
      if (!kIsWeb) {
        writeLogsToFile("$_logFlag | $object");
      }
    }
  }

  static log(List args) {
    if (_isLog && _isDebug) {
      // print("$_logFlag | ${args.toString()}");
      // developer.log("$_logFlag | ${args.toString()}");
      Global.logger.i("$_logFlag | ${args.toString()}");
      if (!kIsWeb) {
        writeLogsToFile("$_logFlag | ${args.toString()}");
      }
    }
  }

  // 只写日志 不输出
  static void staticWriteLogsToFile(String logs, String type) async {
    writeLogsToFile("$type | ${DateTime.now().toLocal()} | $logs}");
  }

  static Future<String> getLogsDirectory() async {
    Directory appDocDir = await getApplicationDocumentsDirectory();
    print("appDocDir==> $appDocDir");
    String logsDirectory = '${appDocDir.path}/log/api';
    Directory(logsDirectory).createSync(recursive: true);
    return logsDirectory;
  }

  static Future<void> writeLogsToFile(String logMessage) async {
    String logsDirectory = await getLogsDirectory();
    File logFile = File('$logsDirectory/app_logs.txt');
    await logFile.writeAsString('$logMessage\n', mode: FileMode.append);
  }

  static Future getLogLocalFile() async {
    String logsDirectory = await getLogsDirectory();
    File logFile = File('$logsDirectory/app_logs.txt');
    String log = await logFile.readAsString();
    return log;
  }
}

为字符串扩展 方法进行 打印??

extension LogExt on String {
  log() {
    Global.logger.d(this);
    Console.staticWriteLogsToFile(this, "log");
  }

  t() {
    Global.logger.t(this);
    Console.staticWriteLogsToFile(this, "stackTrace");
  }

  info() {
    Global.logger.i(this);
    Console.staticWriteLogsToFile(this, "info");
  }

  errorLog() {
    Global.logger.e("Error", error: this);
    Console.staticWriteLogsToFile(this, "error");
  }

  w() {
    Global.logger.w(this);
    Console.staticWriteLogsToFile(this, "warning");
  }
}

使用如：

"日志 啊啊啊".w();

获取日志

任何可以发送请求的 工具 ，我使用浏览器