Implement BlocObserver untuk Debug dan Mengetahui Proses State Management Bekerja

 BlocObserver

BlocObserver adalah class abstract untuk memantau perilaku instance Bloc. Disini kita dapat melacak kapan saja suatu tindakan atau triggered baik dari user atau event saat pertamakali dijalankan. dan dalam contoh ini debugging Bloc akan lebih seru ketika kita tau proses nya bekerja.

Baca Juga: Pengenalan Bahasa Pemrograman DART

• onChange

• Kita perlu override method onChange di dalam bloc untuk melihat perubahan ketika ada state baru pada saat pertama kali dijalankan.

• Seperti yang kita lihat, function onChange memiliki satu argument paramenters yaitu Change.
• Untuk parameters Change disini merepresentasikan perubahan dari satu state ke state yang lain.
• Parameters Change terdiri dari currentState dan nextState.
• Sekarang setiap kali ada state baru terjadi perubahan yang di emitted dan disanalah tempat yang menarik untuk kebutuhan logging/analytics dengan begitu kita akan tau secara spesifik.
• Satuhal yang perlu kita ketahui disini sebelum melakukan operasi apapun di dalam method onChange kita perlu memangil super.onChange terlebih dahulu.

• onTransition

• Jika kita ingin mengamati bloc setiap kali ada event yang ditambahkan dan penambahan state baru, kita perlu override terlebih dahulu method onTransition.
• Transition terjadi ketika ada event baru yang ditambahkan dan state baru yang di emitted dari EventHandler yang di jalankan.
• Transition dipanggil sebelum Bloc state di perbaharui.
• Itulah mengapa penggunaan Transition ini adalah tempat yang bagus untuk menambahkan logging/analitik di masing-masing bloc.
• Seperti biasa sebelum memasukan operasi yang lain kita perlu memanggil super.onTransition terlebih dahulu.

• onError

• Untuk mengetahui kesalahan di dalam bloc yang terjadi kita perlu override method onError terlebih dahulu untuk mengetahui kesalahan yang di timbulkan ketika dijalankan.
• onError akan dipanggil setiap kali terjadi kesalahan dan memberitahu BlocObserver.onError.
• Seperti biasa sebelum memasukan operasi yang lain kita perlu memanggil super.onError terlebih dahulu.

• onEvent

• Seperti namanya, setiap kali ada tindakan yang ditambahkan ke dalam bloc, method onEvent ini akan ke trigger.
• Ini juga merupakan tempat yang bagus untuk menambahkan logging/analitik begaimana event dari bloc itu bekerja.

Example

Untuk menampilkan cara kerja BlocObserver saya telah menambahkan sample code yang ada di github saya dan bisa dilihat disini

  class HomeBloc extends Bloc {
  HomeBloc({required FoodRespository foodRespository})
      : _foodRespository = foodRespository,
        super(const HomeState()) {
    on(mapEventToState);
  }
  final FoodRespository _foodRespository;

  Future mapEventToState(HomeEvent event, Emitter emit) async {
    try {
      final listFood = await _foodRespository.listFood();
      emit(HomeState(food: listFood, status: HomeStatus.success));
    } on Exception catch (e) {
      emit(state.copyWith(message: e.toString(), status: HomeStatus.failure));
    }
  }

  @override
  void onTransition(Transition transition) {
    super.onTransition(transition);
    log(transition.toString());
  }

  @override
  void onChange(Change change) {
    super.onChange(change);
    log(change.toString());
    log(change.currentState.toString());
    log(change.nextState.toString());
  }

  @override
  void onError(Object error, StackTrace stackTrace) {
    super.onError(error, stackTrace);
    log(error.toString());
  }

  @override
  void onEvent(HomeEvent event) {
    super.onEvent(event);
    log(event.toString());
  }
}

Sekarang mari kita jalankan aplikasi dan amati bloc aliran semua method yang di override.

Flow overriden Observers

• Seperti yang kita lihat pada sample video yang diatas, ketika pertama kali dijalankan saya telah menambahkan event HomeEventStarted(). 
• Dari 4 method override yang telah ditambahkan itu pertama kali yang dijalankan adalah method onEvent dan ditriger ke log console.
• Setelah itu, onTransition dipanggil seperti yang sudah dijelaskan sebelumnya, onTransition akan dipanggil sebelum onChange, yang berisi currentState, trigger event, dan nextState.
• Setelah onTransition selesai method onChange dipanggil. Ketika data sedang di load yang dijalankan HomeState.Initial dan setelah berhasil mengambil data seperti yang dilihat di log console kita mendapatkan HomeState.succes, jadi step" yang dijalankan seperti berikut: onEvent > onTransition > onChange > onError.

Mari kita ganti dari endpoint yang digunakan untuk memastikan method onError nya bekerja dengan benar.

Membuat Global BlocObserver

Pada contoh diatas kita hanya melihat prosesnya bekerja pada Bloc tertentu, dan sekarang mari kita lihat bagaimana kita dapat mengamati semua Bloc yang telah dibuat secara global.

Pada tahap ini buat file baru lalu buat class dan extends ke BlocObserver seperti dibawah ini dan untuk semua method kita override supaya berjalan ketika baru pertama kali dijalankan.

  class GlobalObserver extends BlocObserver {
  @override
  void onEvent(Bloc bloc, Object? event) {
    log('OnEvent: ${bloc.runtimeType} $event');
    super.onEvent(bloc, event);
  }

  @override
  void onChange(BlocBase bloc, Change change) {
    log('OnChange: ${bloc.runtimeType} $change');
    super.onChange(bloc, change);
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    log('OnTransition: ${bloc.runtimeType} $transition');
    super.onTransition(bloc, transition);
  }

  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    log('OnError: ${bloc.runtimeType} $error $stackTrace');
    super.onError(bloc, error, stackTrace);
  }
}

Class GlobalObserver ini tidak akan berfungi karna kita belum menggunakannya, jadi karna itu kita perlu panggil class GlobalObserver ke dalam fungsi main supaya terpanggil ketika baru pertama kali menjalankan aplikasi dan contohnya seperti dibawah ini:

Dengan begitu kita lebih cepat untuk mengetahui ketika ada kesalahan dan proses yang tidak sesuai fungsi tersebut berjalan semestinya dengan Implement BlocObserver ini kita cukup terbantu pada saat proses debugging. Terimakasih

Terima Kasih sudah membaca Implement BlocObserver untuk Debug dan Mengetahui Proses State Management Bekerja. Semoga Bermanfaat!

Tag:

Artikel Spesial , Flutter , Pemrograman