Flutter 错误捕获的正确姿式

背景

咱们知道,在软件开发过程当中,错误和异常老是在所不免。express

无论是客户端的逻辑错误致使的,仍是服务器的数据问题致使的,只要出现了异常,咱们都须要一个机制来通知咱们去处理。服务器

在 APP 的开发过程当中,咱们经过一些第三方的平台,好比 Fabric、Bugly 等能够实现异常的日志上报。app

Flutter 也有一些第三方的平台,好比 Sentry 能够实现异常的日志上报。less

可是为了更加通用一些,本篇不具体讲解配合某个第三方平台的异常日志捕获,咱们会告知你们如何在 Flutter 里面捕获异常。async

至于具体的上报途径,无论是上报到自家的后台服务器,仍是经过第三方的 SDK API 接口进行异常上报,都是能够的。ide

Demo 初始状态

首先咱们新建 Flutter 项目,修改 main.dart 代码以下:ui

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Crash Capture'),),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
复制代码

效果以下:this

捕获错误

咱们修改 MyHomePage,添加一个 List 而后进行越界访问,改动部分代码以下:lua

class MyHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   List<String> numList = ['1', '2'];
   print(numList[6]);
   return Container();
 }
}
复制代码

能够看到控制台报错以下:spa

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following RangeError was thrown building MyHomePage(dirty):
flutter: RangeError (index): Invalid value: Not in range 0..1, inclusive: 6
复制代码

固然这些错误信息在界面上也有显示(debug 模式)。

那么咱们如何捕获呢?

其实很简单,有个通用模板,模板为:

import 'dart:async';

import 'package:flutter/material.dart';

Future<Null> main() async {
  FlutterError.onError = (FlutterErrorDetails details) async {
    Zone.current.handleUncaughtError(details.exception, details.stack);
  };

  runZoned<Future<void>>(() async {
    runApp(MyApp());
  },  onError: (error, stackTrace) async {
    await _reportError(error, stackTrace);
  });
}

Future<Null> _reportError(dynamic error, dynamic stackTrace) async {
  // TODO
}
复制代码

TODO 里面就能够执行埋点上报操做或者其余处理了。

完整例子以下:

import 'dart:async';

import 'package:flutter/material.dart';

Future<Null> main() async {
  FlutterError.onError = (FlutterErrorDetails details) async {
    Zone.current.handleUncaughtError(details.exception, details.stack);
  };

  runZoned<Future<void>>(() async {
    runApp(MyApp());
  },  onError: (error, stackTrace) async {
    await _reportError(error, stackTrace);
  });
}

Future<Null> _reportError(dynamic error, dynamic stackTrace) async {
  print('catch error='+error);
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Crash Capture'),),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> numList = ['1', '2'];
    print(numList[6]);
    return Container();
  }
}
复制代码

运行能够看到控制台捕获到错误以下:

flutter: catch error=RangeError (index): Invalid value: Not in range 0..1, inclusive: 6
复制代码

assert 妙用

咱们知道,通常错误上报都是在打包发布到市场后才须要。

平时调试的时候若是遇到错误,咱们是会定位问题并修复的。

所以在 debug 模式下,咱们不但愿上报错误,而是但愿直接打印到控制台。

那么,这个时候就须要一种方式来区分如今是 debug 模式仍是 release 模式,怎么区分呢?

这个时候就须要用到 assert 了。

bool get isInDebugMode {
  // Assume you're in production mode.
  bool inDebugMode = false;

  // Assert expressions are only evaluated during development. They are ignored
  // in production. Therefore, this code only sets `inDebugMode` to true
  // in a development environment.
  assert(inDebugMode = true);

  return inDebugMode;
}
复制代码

从注释也能够知道,assert 表达式只在开发环境下会起做用,在生产环境下会被忽略。

所以利用这一个,咱们就能够实现咱们的需求。

上面的结论要验证也很简单,咱们就不演示了。

完整模板

import 'dart:async';

import 'package:flutter/material.dart';

Future<Null> main() async {
  FlutterError.onError = (FlutterErrorDetails details) async {
    if (isInDebugMode) {
      FlutterError.dumpErrorToConsole(details);
    } else {
      Zone.current.handleUncaughtError(details.exception, details.stack);
    }
  };

  runZoned<Future<void>>(() async {
    runApp(MyApp());
  },  onError: (error, stackTrace) async {
    await _reportError(error, stackTrace);
  });
}

Future<Null> _reportError(dynamic error, dynamic stackTrace) async {
  // TODO
}

bool get isInDebugMode {
  // Assume you're in production mode.
  bool inDebugMode = false;

  // Assert expressions are only evaluated during development. They are ignored
  // in production. Therefore, this code only sets `inDebugMode` to true
  // in a development environment.
  assert(inDebugMode = true);

  return inDebugMode;
}
复制代码

debug 模式下,直接将错误打印到控制台,方便定位问题。

release 模式下,将错误信息收集起来,上传到服务器。

参考连接:
Report errors to a service

相关文章
相关标签/搜索