Error Boundary — apa itu, komponen React Native dan penanganan kesalahan

Apa itu Error Boundary

Error Boundary adalah mekanisme React untuk graceful degradation saat kesalahan rendering. Diperkenalkan di React 16 (2017) sebagai komponen pembungkus yang mengimplementasikan salah satu dari dua metode siklus hidup: static getDerivedStateFromError atau componentDidCatch. Error Boundary memungkinkan pengguna melihat pesan yang bermakna, bukan layar putih kosong atau crash total aplikasi.

Bagaimana Error Boundary muncul

Sebelum React 16, setiap kesalahan yang tidak ditangani di render menyebabkan crash seluruh aplikasi dengan pelepasan seluruh pohon DOM. Di aplikasi web, ini berarti layar putih kosong, di React Native — crash total aplikasi dengan kembali ke Home Screen. Tim React memperkenalkan Error Boundary sebagai analog dari blok catch untuk UI deklaratif, meminjam konsep dari pendekatan “biarkan crash” di bahasa Erlang.

Pentingnya untuk React Native

Di React Native, tidak adanya Error Boundary berarti crash total aplikasi pada setiap kesalahan rendering. Pengguna kehilangan seluruh sesi saat ini tanpa kemungkinan pemulihan. Error Boundary di React Native sangat penting, karena aplikasi seluler tidak dimuat ulang seperti halaman web — sesi pengguna hilang secara permanen dan pengguna harus memulai semuanya dari awal.

Bagaimana Error Boundary bekerja di React Native

Error Boundary bekerja di tingkat pohon React. Ketika komponen anak melempar kesalahan di render atau lifecycle, React tidak melepas seluruh pohon, tetapi mengalihkan kontrol ke Error Boundary terdekat di atas hierarki. Boundary memanggil getDerivedStateFromError, mengatur state.hasError = true dan me-render fallback UI sebagai pengganti cabang komponen yang rusak.

import React, { Component, ErrorInfo, ReactNode } from "react"

interface Props {
    children: ReactNode
    fallback?: ReactNode
}

interface State {
    hasError: boolean
    error?: Error
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { hasError: false }
    }

    static getDerivedStateFromError(error: Error): State {
        return { hasError: true, error }
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
        console.error("Ditangkap oleh boundary:", error)
        Crashlytics.recordException(error)
    }

    render() {
        if (this.state.hasError) {
            return this.props.fallback || <FallbackUI />
        }
        return this.props.children
    }
}

getDerivedStateFromError mengatur status untuk rendering fallback UI — ini adalah metode statis yang dipanggil pada tahap rendering sebelum perubahan dikomit. componentDidCatch dijalankan pada tahap komit dan ditujukan untuk efek samping: logging, mengirim laporan crash ke Crashlytics, analytics. Dua metode membagi tanggung jawab antara manajemen status UI dan tindakan sampingan.

Membuat komponen Error Boundary

Untuk membuat Error Boundary, Anda perlu mengimplementasikan komponen kelas dengan metode getDerivedStateFromError dan/atau componentDidCatch. Komponen fungsional tidak bisa menjadi Error Boundary — React mendukung fungsionalitas ini hanya untuk komponen kelas, karena akses ke metode siklus hidup diperlukan. Pustaka react-error-boundary menyediakan implementasi siap pakai dengan API hooks untuk kemudahan.

// Contoh penggunaan Error Boundary di React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Ada yang tidak beres</Text>
        <Text>{error.message}</Text>
        <Button title="Coba Lagi" onPress={resetError} />
    </View>
)

const App = () => (
    <SafeAreaView>
        <ErrorBoundary FallbackComponent={<FallbackComponent />}>
            <UserProfile userId={"123"} />
        </ErrorBoundary>
        <BottomNavigation />
    </SafeAreaView>
)

Tingkat pembungkusan — Error Boundary dapat ditempatkan di berbagai tingkat hierarki. Satu Boundary global di root aplikasi akan menampilkan fallback UI pada setiap kesalahan, tetapi navigasi tetap berfungsi. Beberapa Boundary di tingkat layar memungkinkan isolasi kesalahan: jika satu layar rusak, yang lain terus bekerja secara independen. react-error-boundary menyederhanakan mekanisme Reset melalui hook useErrorBoundary, memungkinkan pengaturan ulang status tanpa memuat ulang. Untuk proyek tipikal, skema dengan tiga tingkat Boundary dianggap optimal untuk aplikasi React Native.

Mengatur ulang status Error Boundary

Setelah terjadinya kesalahan, pengguna dapat menekan tombol “Coba Lagi” yang mengatur ulang hasError ke false dan me-render ulang pohon anak. Mekanisme Reset penting untuk memulihkan fungsi aplikasi tanpa memuat ulang. Di react-error-boundary digunakan callback onReset yang dapat membersihkan cache, meminta ulang data, atau memperbarui status di atas pohon.

Keterbatasan Error Boundary

Error Boundary tidak menangkap kesalahan asinkron — kesalahan di setTimeout, setInterval, Promise, async/await. React tidak dapat menangkap kesalahan di luar siklus render dan lifecycle-hooks, karena mereka dijalankan dalam konteks eksekusi lain. Untuk kesalahan asinkron diperlukan try-catch terpisah di handler atau handler global untuk event unhandledrejection.

Event-handler

Kesalahan di onClick, onChange dan event-handler lainnya tidak ditangkap oleh Error Boundary, karena dijalankan di luar rendering React. Penanganan kesalahan untuk event-handler harus di dalam handler itu sendiri melalui try-catch. Pustaka react-error-boundary menyediakan hook useErrorHandler untuk mengirimkan kesalahan dari event-handler ke Boundary terdekat.

Server-side rendering dan Next.js

Error Boundary tidak bekerja di sisi server di Next.js atau Gatsby. Metode getDerivedStateFromError dan componentDidCatch tidak dipanggil saat SSR, karena metode siklus hidup hanya tersedia di browser. Untuk kesalahan server diperlukan strategi terpisah: try-catch di getServerSideProps, halaman fallback error.js (Next.js 13+) atau middleware global.

Lapisan native React Native

Di React Native, Error Boundary tidak mencegah crash di tingkat modul native. Crash native (segfault, out-of-memory, exception native) terjadi di tingkat Objective-C atau Java dan tidak mencapai lapisan JavaScript. Untuk crash native diperlukan Crashlytics NDK (Android) atau KSCrash (iOS). Error Boundary hanya melindungi lapisan JavaScript dari aplikasi React Native.

Praktik terbaik Error Boundary

Tempatkan Error Boundary di batas modul bermakna: satu Boundary per layar, satu per widget pengembang pihak ketiga, satu per formulir kompleks. Ini mengisolasi kesalahan dan memungkinkan pengguna terus bekerja di bagian aplikasi lainnya. Boundary root harus selalu ada — untuk kesalahan kritis di komponen navigasi umum atau provider. Setiap Boundary bertanggung jawab atas fragmen antarmukanya sendiri dan tidak memengaruhi komponen tetangga saat terjadi kesalahan.

Logging dan monitoring

Selalu kirimkan kesalahan ke Crashlytics atau Sentry melalui componentDidCatch. Tambahkan konteks: nama layar, userId, versi aplikasi, parameter navigasi. Di Sentry tersedia breadcrumbs — urutan tindakan pengguna sebelum kesalahan. Untuk analisis frekuensi kesalahan non-fatal, gunakan dashboard Crashlytics dengan pengelompokan berdasarkan issue.

Fallback UI

Jangan gunakan fallback “kosong” — buat antarmuka yang bermakna. Set yang direkomendasikan untuk React Native: pesan kesalahan (ramah pengguna, bukan teknis), tombol “Coba Lagi”, tautan ke dukungan atau chat. Hindari View kosong — pengguna akan berpikir aplikasi telah rusak total dan menutupnya. Fallback harus terintegrasi ke dalam desain keseluruhan aplikasi.

Menguji Error Boundary

Uji setiap Error Boundary dengan React Testing Library atau React Native Testing Library. Buat komponen pemicu yang melempar kesalahan saat rendering dan periksa apakah fallback UI ditampilkan. Untuk pengujian integrasi, gunakan storybook dengan berbagai status Error Boundary: normal, kesalahan, status setelah pengaturan ulang. Pengujian otomatis Boundary menjamin bahwa saat komponen berubah, fallback UI terus bekerja dengan benar di production. Cakupan pengujian setiap Boundary harus menjadi persyaratan wajib code review untuk proyek React Native.