당신의 개발 분야에서 당신이 배워야 할 기본 기능 중 하나는 생각하지 않은 실수를 어떻게 처리하는지 배우는 것입니다.react 로컬 개발자로서 백분율 버그가 없는 새로운 프로그램을 발표하는 것은 좀 도전적입니다.
내가reactnative를 사용한 경험에 의하면 크로스플랫폼 솔루션을 이용하여 응용 프로그램을 구축하는 데는 항상 안정적인 대가를 치러야 한다고 생각한다.솔직히 말해서, 적어도 세 가지 다른 언어가 하나의 구조를 구축하는데, 그것을 버그에서 벗어나게 하는 것은 쉽지 않다.
이 모든 사실이 있다. 이것은 프로그램이 종료되거나 오류가 발생했을 때 흰색 화면으로 되돌아가야 한다는 것을 의미하지 않는다.이러한 오류를 처리하고 엔드 유저에게 최상의 환경을 제공할 책임이 있습니다.>도와주러 왔어요.
본고는 처리되지 않은 이상을 포착하고 사용자에게 최상의 체험을 제공하며 다음 버전에서 오류를 복구할 수 있도록 기술과 도구를 안내합니다.

Note to mention that using static typing such as typescript will help you avoid all errors caused by typos and typing errors as you write the code which leads to fewer errors to deal with in the execution.

I also encourage writing higher coverage tests for your app as testing is the only way to ensure everything works as expected.

이미 말씀드린 바와 같이 React Native는 두 가지 측면이 있습니다. Javascript와 Native입니다. 이 사실은 두 가지 처리해야 할 오류를 도입할 것입니다.

JS 예외: React를 포함한 Javascript 코드에서 발생한 오류입니다.

본체 이상: 본체 모듈에 발생한 오류

JS 예외

일반적으로 자바스크립트는 오류 처리가 어렵지 않습니다.try/catch는 좋지만 명령식 코드에만 적용됩니다.그러나, React 구성 요소는 성명적입니다. (보여야 할 내용을 지정합니다.) 이것은 React 구성 요소 오류에try-catch를 사용할 수 없다는 것을 의미합니다.
이 문제를 해결하기 위해 React16은 오차 경계의 새로운 개념을 도입했다.
오류 경계는 서브어셈블리 트리의 모든 위치에서 JavaScript 오류를 캡처하는 React 구성 요소입니다.

Make sure to read about Error boundaries from React official docs

오류 경계 API는 클래스 구성 요소에만 적용되며, 이러한 라이프 사이클 방법static getDerivedStateFromError() 또는 componentDidCatch() 중 하나를 정의하면 클래스 구성 요소가 오류 경계가 됩니다.
React-error-boundary는 React error boundary API 기반의 간단한 재사용 가능한 구성 요소로 구성 요소에 패키지를 제공하고 하위 구성 요소 차원 구조의 모든 오류를 자동으로 포착하며 구성 요소 트리를 복구하는 좋은 방법을 제공합니다.
응용 프로그램의 모든 내비게이션 화면에react error boundary 구성 요소가 포함되어 있으며, 사용자가 무슨 일이 일어났는지 알 수 있도록 fullback component 을 제공해야 합니다. 아마도 리렌더를 사용하여 화면을 복구할 수 있을 것입니다.
가장 좋은 방법은 다음과 같은 Errorhandler 구성 요소를 만드는 것이다.

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 errors using sentry ( see part 3)
};

function ErrorFallback({ resetErrorBoundary }) {
  return (
    <View style={[styles.container]}>
      <View>
        <Text> Something went wrong: </Text>
        <Button title="try Again" onPress={resetErrorBoundary} />
      </View>
    </View>
  );
}

export const ErrorHandler = ({ children }: { children: React.ReactNode }) => (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    {children}
  </ErrorBoundary>
);

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

보시다시피, 저는 흰색 화면이 아니라 오류 응답 구성 요소를 사용하여 사용자에게 더 많은 정보를 제공합니다.
나는 화면을 복구하고 문제를 해결하는 방법으로 프로그래밍 방식으로 화면을 다시 렌더링하는 재시도 단추를 추가했다.사용자가 try again 단추를 누르면 오류 경계가 화면 구성 요소의 렌더링을 촉발하여 오류를 피하고 올바른 구성 요소를 표시하는 데 도움이 됩니다.

Read More about Error Recovery

나는 또한 오류를 일으킬 수 있는 모든 구성 요소를 위해 오류 경계 구성 요소를 포장했다.

JS 예외의 경우 오류 Boudry가 충분합니까?

불행히도 오류 경계는 다음 오류를 포착하지 않습니다.

이벤트 프로세서

비동기식 코드(예: setTimeout 또는 requestAnimationFrame 콜백)

오류 경계 자체(자항이 아닌)에서 던진 오류

이러한 제한으로 인해 우리는 react-native-exception-handler 응용 프로그램에 전역 처리 프로그램을 만들어서 포획되지 않은 Js 오류를 모두 포획할 수 있습니다.
react-native-exception-handler은react 본체 모듈로 치명적/비치명적인 미포획 이상을 포착하기 위해 전역 오류 처리 프로그램을 등록할 수 있습니다.
작업을 수행하려면 모듈을 설치하고 연결한 다음 다음과 같이 Js 예외 글로벌 프로세서를 등록해야 합니다.

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

setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});

본기 이상

내가 이미 언급한 바와 같이, 본 기기의 이상은 본 기기 모듈 오류와 내부 본 기기react 본 기기 코드에 의해 생성된 것이다.
제 경험에 따르면, Js에 비하면, 우리는 통상적으로 포획되지 않은 본기 이상을 만날 수 있습니다. 좋은 소식은 우리도 같은 라이브러리 (react 본기 이상 처리 프로그램) 를 사용하여 본기 이상을 처리할 것입니다. 그러나 당신은 Js 경보 상자를 표시하거나 Js 코드를 통해 어떤 UI 작업을 실행할 수 없습니다.유일한 해결 방안은 라이브러리에서 제공하는 기본 경보를 표시하는 것이지만, 사용자 정의 경보를 원하지 않도록 기본 코드를 작성해야 합니다.
이 컴퓨터의 이상을 위한 전역 프로세서를 만들려면 setNativeExceptionHandler 함수를 사용하여 프로세서를 등록하면 다음과 같습니다.

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

const exceptionhandler = (exceptionString) => {
  // your exception handler code here
};
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

추적 이상

이상을 처리하고 추적하지 않는 것은 무의미하다. 왜냐하면 우리가 토론한 모든 해결 방안은 사용자 체험을 개선하고 사용자에게 백스크린이나 응용 프로그램의 붕괴가 아니라 오류에 대한 더 많은 정보를 제공하기 때문이다.
Sentry는 클라우드 기반의 오류 감시 플랫폼으로 우리가 이 모든 오류를 실시간으로 추적할 수 있도록 도와준다.무료 계정을 만들고 react native sentry를 설치하면 프로세서 (js와 native) 에서 사용할 수 있습니다. captureException 로 창고 오류를 보냅니다. 아래와 같습니다.

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

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

이제 오류 수정 확인😉

총결산

React Native에서 오류를 처리하는 데 사용되는 라이브러리:

React-error-boundary

React-native-exception-handler

Sentry

나는 네가 이것이 매우 재미있고 정보가 풍부하며 매우 재미있다고 생각하길 바란다.나는 너의 평론과 생각을 듣고 매우 기뻤다.
만약 네가 다른 사람이 이 문장을 읽어야 한다고 생각한다면.트위터, 공유, 다음 글.

More React Native Guides :

👉 17 React Native libraries you should use in 2020
👉 Authentication in React Native, Easy, Secure, and Reusable solution 💪.
👉 Forms in React Native, The right way
👉 Spotify Login Animation With React Navigation V5