背景
我們知道，在軟體開發過程中，錯誤和異常總是在所難免。
不管是客戶端的邏輯錯誤導致的，還是伺服器的資料問題導致的，只要出現了異常，我們都需要一個機制來通知我們去處理。
在 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();
}
}
複製程式碼可以看到控制檯報錯如下：
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
