Cara menggunakan javascript global error

Belajar React Native – Halo kawan-kawan Belajar React Native, disini saya ingin membuat tutorial tentang Cara Membuat Error Handling di React Native, Nah sebelumnya jika kawan-kawan ketinggalan dengan Tutorial React Native, kawan-kawan bisa akses melalui link berikut, oke deh kita langsung mulai saja yaa ke tutorial nya.

Salah satu keahlian dasar yang haru kalian kuasai dalam react native ialah mempelajari teknik menghandel kesalahan yang tidak diduga alias error. Sebagai developer React Native, situasi ini jelas sangat menantang. Karena membuat aplikasi tanpa adanya bug maupun error merupakan pekerjaan yang sulit.
Setiap kali terjadi error dalam aplikasi yang selesai diluncurkan, bukan berarti hal yang bagus untuk selalu memperlihatkan layar putih (Blank screen) tiap kali terjadi kesalahan. Sudah jadi tanggung jawab kalian mengatasi kesalahan ini serta pengalaman terbaik untuk pemakai.
Dalam postingan ini, kalian akan belajar beberapa tehnik dan juga tools untuk mengatasi permasalahan semacam ini dan meralatnya pada rilisan aplikasimu berikutnya.

React-Error-Boundary

React-error-boundary merupakan elemen sederhana yang mampu digunakan kembali berdasarkan error react boundary API yang menyediakan pembungkus di sekitar elemen kalian dan juga dengan cara otomatis menangkap semua kesalahan dari hierarki elemen child , serta juga menyediakan metode yang baik untuk memperbaiki tree component kalian.
Amat dianjurkan untuk menyatukan setiap layar navigasi dalam Aplikasi kalian dengan elemen react-error-boundary serta menyediakan fallback component untuk memastikan pemakai memahami apa yang terjadi,
Metode terbaik buat melakukannya ialah dengan membuat elemen Errorhandler sesuai berikut :

import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { View, StyleSheet, Button } from "react-native";

import { Text } from "components";

const myErrorHandler = (error: Error) => {
  // Do something with the error
  // E.g. reporting errorr using sentry ( see part 3)
};

function ErrorFallback({ resetErrorBoundary }) {
  return (
    
      
         Something went wrong: 
        
      
    
  );
}

export const ErrorHandler = ({ children }: { children: React.ReactNode }) => (
  
    {children}
  
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    alignContent: "center",
    paddingHorizontal: 12,
  },
});

Kendatipun bagus, akan tetapi error-boundary masiih belum cukup untuk mengatasi tipe error seperti :

• Event Handler
• Asynchronous Code
• Error yang terjadi didalam error-boundary itu sendiri

Batasan ini mengarahkan developer untuk memakai react-native-exception-handler untuk membuat global handler untuk Aplikasi yang bisa menangkap seluruh kesalahan Js yang tidak tertangkap.
react-native-exception-handler merupakan modul react native yang mengharuskan developer mendaftarkan penangan error secara menyeluruh yang menjaring pengecualian fatal / non-fatal yang tidak tertangkap.
Untuk membuatnya beroperasi, kalian harus menginstal serta menautkan modul, kemudian terus mendaftarkan Global handler kalian untuk exception Js seperti berikut:

import { setJSExceptionHandler } from "react-native-exception-handler";

setJSExceptionHandler((error, isFatal) => {
  // Disini kustom globar error handler kamu  
  // Tempat dimana kamu menunjukan error dialog 
  // Code untuk melaporkan ke Google Analytic untuk track crash   yang terjadi  
  // code untuk melaporkan kepada tim developer
);

Native Exception

Native Exception merupakan code yang diperoleh dari Native module errors serta kode internal dalam react native itu sendiri.
Untuk membuat Global handler buat Native Exception, kalian harus meregistrasi handler memakai fungsi setNativeExceptionHandler seperti berikut :

import { setNativeExceptionHandler } from "react-native-exception-handler";

const exceptionhandler = (exceptionString) => {
  // letakan kode exception handler disini
;
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

Tracking Exception

Exception Handler tanpa adanya tracking amat tidak masuk akal sebab seluruh solusi yang kita diskusikan hanya meningkatkan pengalaman pemakai serta memberikan lebih banyak informasi kepada pemakai mengenai kesalahan apa yang terjadi, bukan hanya menampilkan layar putih kosong ataupun app crash (aplikasi dipaksa berhenti)
Sentry merupakan platform pemantauan kesalahan berbasis cloud yang membantu developer melacak seluruh kesalahan dengan cara real-time.
Dengan membuat akun gratis serta menginstal react-native-sentry, kalian bisa menggunakannya di dalam handler kalian (baik js serta Native) untuk mengirim error stack menggunakan captureException seperti berikut :

// ErrorHandler.js
import * as Sentry from "@sentry/react-native";

const myErrorHandler = (error: Error) => {
  Sentry.captureException(error);
};

Nah bagaimana mudah bukan Cara Membuat Burger Menu Untuk Aplikasi Android di React Native, oke deh kita untuk tutorial lainnya kamu bisa akses pada website Belajarreactnative.comdan artikel mengenai Belajar React Native, kalian bisa klik Link ini, nantikan tutorial lain dari Dari Belajar React Native dan semoga harimu menyenangkan.

Jika ingin mempelajari tentang Kursus & Belajar React Native lebih lanjut bisa hubungi kontak yang tertera pada Website ini yaa, terima kasih.