Flutter 錯誤捕獲的正確姿勢

本文微信公眾號「AndroidTraveler」首發。

背景

我們知道，在軟件開發過程中，錯誤和異常總是在所難免。

不管是客戶端的邏輯錯誤導致的，還是服務器的數據問題導致的，只要出現了異常，我們都需要一個機制來通知我們去處理。

在 APP 的開發過程中，我們通過一些第三方的平臺，比如 Fabric、Bugly 等可以實現異常的日誌上報。

Flutter 也有一些第三方的平臺，比如 Sentry 可以實現異常的日誌上報。

但是為了更加通用一些，本篇不具體講解配合某個第三方平臺的異常日誌捕獲，我們會告知大家如何在 Flutter 裡面捕獲異常。

至於具體的上報途徑，不管是上報到自家的後臺服務器，還是通過第三方的 SDK API 接口進行異常上報，都是可以的。

Demo 初始狀態

首先我們新建 Flutter 項目，修改 main.dart 代碼如下：

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();
 }
}

效果如下：

捕獲錯誤

我們修改 MyHomePage，添加一個 List 然後進行越界訪問，改動部分代碼如下：

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

可以看到控制檯報錯如下：

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>>(() async { 

 runApp(MyApp());
 }, onError: (error, stackTrace) async {
 await _reportError(error, stackTrace);
 });
}

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

在 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>>(() 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();
 }
}
/<string>/<null>/<future>/<null>

運行可以看到控制檯捕獲到錯誤如下：

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>>(() 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;
}
/<null>/<future>/<null>

debug 模式下，直接將錯誤打印到控制檯，方便定位問題。

release 模式下，將錯誤信息收集起來，上傳到服務器。

參考鏈接：

https://flutter.dev/docs/cookbook/maintenance/error-reporting

閱讀更多 安卓小煜 的文章

關鍵字: 錯誤 微信 Dart