Anuchit Chalothorn

Handle Error ใน Flutter อย่างมือโปร

---

04 Mar 2025, 21:39

การจัดการข้อผิดพลาด (Error Handling) เป็นสิ่งสำคัญสำหรับการพัฒนาแอปพลิเคชันที่เสถียรและใช้งานได้ดี ใน Flutter เราสามารถจัดการข้อผิดพลาดได้หลายรูปแบบ ไม่ว่าจะเป็นการจับข้อผิดพลาดที่เกิดจากโค้ด การจัดการ Exception หรือการแสดงผลข้อผิดพลาดให้กับผู้ใช้

ในบทความนี้ เราจะมาดูกลยุทธ์และแนวทางปฏิบัติที่ดีที่สุดในการจัดการข้อผิดพลาดใน Flutter อย่างมืออาชีพ

ประเภทของข้อผิดพลาดใน Flutter

• Compile-time Errors เป็นข้อผิดพลาดที่ตรวจพบได้ในระหว่างการคอมไพล์ เช่น การใช้ตัวแปรที่ไม่ได้ประกาศ หรือเรียกใช้เมธอดที่ไม่มีอยู่

• Runtime Errors เกิดขึ้นขณะรันแอป เช่น NullPointerException หรือ IndexOutOfBoundsException

• Logical Errors เกิดจากการทำงานที่ไม่เป็นไปตามที่คาดหวัง เช่น คำนวณผิด หรือแสดงข้อมูลผิดพลาด

การจัดการข้อผิดพลาดใน Flutter

ใช้ Try-Catch จัดการข้อผิดพลาด

Flutter รองรับการใช้ try-catch เพื่อจับและจัดการข้อผิดพลาดที่เกิดขึ้นใน runtime

void fetchData() {
          try {
            throw Exception('เกิดข้อผิดพลาด');
          } catch (e) {
            print('Error: $e');
          }
        }
        

หากเป็นข้อผิดพลาดที่เกี่ยวข้องกับ async และ await ควรใช้ try-catch คู่กับ Future ดังนี้:

Future<void> fetchDataAsync() async {
          try {
            await Future.delayed(Duration(seconds: 2));
            throw Exception('เกิดข้อผิดพลาดจาก async');
          } catch (e) {
            print('Error: $e');
          }
        }
        

ใช้ FlutterError.onError จัดการข้อผิดพลาด

สำหรับการจัดการข้อผิดพลาดที่เกิดขึ้นใน Flutter เราสามารถใช้ FlutterError.onError เพื่อจับข้อผิดพลาดระดับ global:

void main() {
          FlutterError.onError = (FlutterErrorDetails details) {
            print('Flutter Error: ${details.exception}');
          };
          runApp(MyApp());
        }
        

ใช้ Error Widget แสดงข้อผิดพลาดให้ผู้ใช้

หาก Widget เกิดข้อผิดพลาด สามารถใช้ ErrorWidget.builder เพื่อกำหนดการแสดงผลข้อผิดพลาด:

void main() {
          ErrorWidget.builder = (FlutterErrorDetails details) {
            return Center(child: Text('มีบางอย่างผิดพลาด'));
          };
          runApp(MyApp());
        }
        

ใช้ Catcher จัดการข้อผิดพลาด

สามารถใช้แพ็กเกจ catcher เพื่อบันทึกและรายงานข้อผิดพลาดได้ง่ายขึ้น

dependencies:
          catcher: ^0.7.0
        

ตัวอย่างการใช้งาน

void main() {
          CatcherOptions debugOptions = CatcherOptions(DialogReportMode(), [ConsoleHandler()]);
          Catcher(MyApp(), debugConfig: debugOptions);
        }
        

สรุป

• ใช้ try-catch จับข้อผิดพลาดในโค้ด
• ใช้ FlutterError.onError จับข้อผิดพลาดที่เกิดขึ้นในแอป
• ใช้ ErrorWidget.builder เพื่อแสดงข้อความแจ้งข้อผิดพลาดให้ผู้ใช้
• ใช้แพ็กเกจ catcher เพื่อบันทึกและรายงานข้อผิดพลาด

การจัดการข้อผิดพลาดที่ดีช่วยให้แอปมีเสถียรภาพมากขึ้น และมอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ หวังว่าบทความนี้จะช่วยให้คุณสามารถ Handle Error ใน Flutter ได้อย่างมือโปร!