반응 본체 디버깅

본 논문에서, 우리는 React 본체 응용 프로그램의 생산 오류를 원격으로 디버깅하고 고장을 제거하는 방법을 설명할 것이다.이를 위해, 우리는 Bugfender 무료 통합을 사용하여 실시간 로그를 사용하고, 사용자가 응용 프로그램에 대한 조작을 추적할 수 있도록 할 것입니다.

What is React Native?

Remotely Production Debugging

Ok, how I can start debug my React Native App?

Creating a RN new project compatible with Bugfender

Adding Bugfender to your project

Android React Native Debugging

iOS React Native Debugging

RNBugfender Usage

Cocoapods Troubleshooting

무엇이 본토박이입니까?
네, 이 제품에 대해 잘 알고 있을 거예요.하지만 만약 당신이 아니라면 다음은 당신이 알아야 할 React Native에 관한 모든 것들입니다.

은 페이스북이 로컬 모바일 애플리케이션을 만들기 위해 구축한 소스 솔루션이다.

의 주요 장점은 개발자가 서로 다른 플랫폼에서 같은 코드 라이브러리를 사용할 수 있다는 것이다.

주요 건축 자재는 JavaScript입니다.모든 프로젝트는 플랫폼에 특정한 언어의 일부분만 필요합니다.

은 플랫폼별 UI 구성 요소를 사용하여 각 애플리케이션을 구축하고 사용자가 구축한 플랫폼마다 사용자 코드를 조정합니다.

은 자바스크립트 코드를 바탕으로 자바와 Objective-C로 구축된 구성 요소를 응용 프로그램에 배치할 수 있도록 합니다.

은 팽보사, 테슬라, 에어비앤비 등 세계 유명 브랜드에 의해 인기를 끌었고 GitHub에서 70000건의 다운로드를 받았다.

Bugfender를 사용한 원격 프로덕션 디버깅
Bugfender는 응용 프로그램 개발자를 위한 로그 저장 서비스입니다.Bugfender는 충돌이 발생하지 않았더라도, 오류를 더욱 효과적으로 복제하고 해결하며, 더 좋은 고객 지원을 제공하기 위해 프로그램에서 발생하는 모든 것을 수집합니다.
Bugfender는 모든 장치의 오류를 기록하고 몇 초 안에 결과를 보내서 사용자가 오류 메시지를 받기 전에 오류를 찾아 복구할 수 있습니다.
Google의 로그 도구는 한 사용자를 대상으로 개성화된 고객 지원을 제공할 수 있습니다. 고객을 만족시키고 그들을 붙잡을 수 있도록 합니다.

알겠습니다. 제 React 원본 프로그램을 어떻게 디버깅합니까?
React Native의 Bugfender 바인딩은 네이티브 iOS 및 Android Bugfender SDK에 의존합니다.

Bugfender와 호환되는 새 항목 만들기
를 사용하여 새 항목 작성$ react-native init AwesomeProject또는 도구 create-react-native-app을 사용하여 프로젝트를 시작한 경우 이 모듈을 추가하려면 eject이 필요합니다.
자세한 내용은 official docs을 참조하십시오.
다음 단계로 이동하기 전에 항목을 컴파일하고 실행할 수 있는지 확인하십시오.
이렇게 하면 우리는 다음 단계에서 문제를 포기할 수 있다.

프로젝트에 Bugfender 추가
참고: Expo를 사용하여 개발한 경우 “bare workflow”을 사용해야 합니다.$ cd path_to_your_project1. npm에서 bugfender 플러그인 추가$ npm install @bugfender/rn-bugfender --savecocoapods(추천)를 사용하고 싶으면 2단계를 건너뛰고 3B로 들어가세요.
수동 설치의 경우 2단계와 3A단계를 계속합니다.
2. 항목에 링크

// Add the classes of the plugin to your android and iOS projects $ react-native link @bugfender/rn-bugfender`

Android React 네이티브 디버깅
너 망했어!

iOS가 네이티브 디버깅에 응답
3A.수동 설치
Github에서 최신 버전을 다운로드하고 BugfenderSDK.framework을 YourAwesomeProjectDirectory/ios(Awesome Project.xcodeproj 디렉터리와 동일)으로 복사합니다.그런 다음 지침에 따라 항목을 수동으로 설정합니다.

은 프로젝트 > 목표 > 일반 > 링크된 프레임워크와 라이브러리에 들어가서 BugfenderSDK.framework을 거기로 드래그합니다. ('항목 복사, 필요하면' 콤보 상자를 선택 취소합니다.)

은 SystemConfiguration.framework, Security.framework, MobileCoreServices.framework 및 libc++.tbd이 연결되어 있는지 확인합니다.

Swift를 사용하는 경우 프로젝트에 Bugfender.swift 도움말을 추가합니다.

3B.야자꼬투리(추천)

iOS 프로젝트에 pod 파일이 있는지 확인하십시오. 그렇지 않으면 지금 추가해야 합니다.

$ cd path\_to\_your\_project/ios $ pod init

링크 항목:

// Add the classes of the plugin to your android and iOS projects $ react-native link @bugfender/rn-bugfender`

iOS 플랫폼 버전 10 이상(platform :ios, '10.0' 지정)이 목표인지 확인합니다.
팟캐스트 파일에 새 행이 자동으로 추가됩니다.pod 'RNBugfender', :path => '../node_modules/@bugfender/rn-bugfender'

podfile 구성 후 이제 콘솔에서

실행$ pod install설치가 완료되면 iOS와 Android에서 프로젝트를 실행할 수 있어야 합니다.
지금부터 xcodeproj 파일이 아닌 Xcode 작업 영역을 사용해야 한다는 것을 기억하십시오.
중요 프롬프트: RNBug의 podspec 선언이 종속성으로 응답합니다.Podfile에서 React 종속성을 명시적으로 다시 작성해야 합니다.이렇게:pod 'React', path: '../node_modules/react-native'react-native 0.60 또는 업데이트된 react-native cli로 프로젝트를 만들면podfile가 준비되어 있어야 합니다.react native의 이전 버전은 덮어써야 합니다.그렇지 않으면,cocoapods는 iOS 폴더에 새 버전을 다운로드하고 설치합니다. 최종적으로 모든 복사된 React 라이브러리를 얻을 수 있습니다.
이 문서의 끝에서 recommended podfile을 찾을 수 있습니다.너는 그것을 예로 쓸 수 있다.
컴파일하거나 실행할 때 문제가 발생하면 이 문서의 끝에 있는 Troubleshooting section을 시도해 보십시오.

어떻게 진흙막이판을 사용합니까

import Bugfender from '@bugfender/rn-bugfender'; // Init Bugfender with your APP key Bugfender.init("your\_app\_key"); // Sending logs with default level Bugfender.d ("REACT", "This is a debug log in Bugfender from React Native"); // Sending logs with warning level Bugfender.w ("REACT", "This is a debug log in Bugfender from React Native"); // Sending logs with error level Bugfender.e ("REACT", "This is a debug log in Bugfender from React Native"); // Low level logs Bugfender.log (1001, "method", "file", "Debug", "tag", "Sending low level log."); Bugfender.log (1001, "method", "file", "Error", "tag", "Sending low level log."); Bugfender.log (1001, "method", "file", "Warning", "tag", "Sending low level log."); // Creating issues Bugfender.sendIssue ("New issue", "This will create a new issue in Bugfender"); // Send user feedback Bugfender.sendUserFeedback ("New feedback", "This will create a new feedback in Bugfender"); // Set values Bugfender.setDeviceString ("device.key.string", "fake.string.value"); Bugfender.setDeviceBoolean ("device.key.boolean", true); Bugfender.setDeviceFloat ("device.key.float", 101); Bugfender.setDeviceInteger ("device.key.integer", 102);

코코넛 꼬투리 고장 제거
우리는 대부분의 사용자에게 적용되는 설치 과정을 만들기 위해 최선을 다했다.그러나 React 네이티브 구성은 때때로 까다로울 수 있습니다.
대부분의 문제는 대량의 의존항과 그것들 간의 호환성과 관련이 있다.항목마다 다르고 수요가 다르기 때문에 상자를 열 수 있는 신기한 영수증을 제공하기는 어렵지만, 아래의 Podfile는 대부분의 상황에서 정확하게 컴파일하고 운행할 수 있다는 것을 알 수 있다.너는 그것을 실험의 기초로 삼아 너에게 적합한 배치를 찾을 수 있다.

추천 팟캐스트 파일

platform :ios, '9.0' target 'SampleProject' do # Comment the next line if you don't want to use dynamic frameworks use\_frameworks! # Pods for SampleProject pod 'AFNetworking' # Add new pods below this line pod 'RNBugfender', :path => '../node\_modules/@bugfender/rn-bugfender' rn\_path = '../node\_modules/react-native' pod 'yoga', path: "#{rn\_path}/ReactCommon/yoga" pod 'Folly', :podspec => '../node\_modules/react-native/third-party-podspecs/Folly.podspec' pod 'React', path: rn\_path, subspecs: ['Core', 'CxxBridge', 'DevSupport', 'RCTActionSheet', 'RCTAnimation', 'RCTGeolocation', 'RCTImage', 'RCTLinkingIOS', 'RCTNetwork', 'RCTSettings', 'RCTText', 'RCTVibration', 'RCTWebSocket',] end

프로젝트가 제대로 작동하지 않으면 수동 설치를 통해 RNBugfender를 추가하거나 Github에서 질문을 열 수 있습니다. 아마도 저희가 도와드릴 수 있을 것입니다.
디버깅 즐거웠어요!