Sentry에서 버그 리포트를 받는 【React Native Expo】

9707 단어 reactnativesentryexpo

Sentry란?



어플리케이션으로부터 이벤트 로그를 송신해 주는 것.
htps : // 센트리. 이오/

Expo와 호환 (bugsnag는 Expo 지원되지 않습니다.)

도입 방법



등록하여 프로젝트 만들기


  • Sentry에 등록하기
  • 언어나 프레임워크를 선택하고 project name을 기입하여 Create Project한다
  • 아래쪽에있는 Public DSN을 복사하십시오 (Sentry.config('https://**********@sentry.io/***').install(); 같은 곳의 주소 부분)
  • Sentry API에서 auth token을 만들고 (설정은 기본적으로 OK), auth token을 복사하십시오
  • 대시 보드로 이동하여 프로젝트의 설정 탭에서 이름을 복사하십시오.
  • 왼쪽 상단의 버튼에서 Organization settings로 가서 Name을 복사하십시오

  • Sentry 설치 및 구성


  • async/await를 사용하기 위해 Node 7.6+인지 확인
  • npm i sentry-expo --save
  • App.js에 추가

  • App.js
    import Sentry from 'sentry-expo';
    
    // Remove this once Sentry is correctly setup.
    Sentry.enableInExpoDevelopment = true;
    
    Sentry.config('your Public DSN goes here').install();
    
  • app.jsonpostPublish hook를 추가하고 방금 복사 한 항목을 작성하십시오.

    app.json
    {
      "expo": {
        // ... your existing configuration
    
        "hooks": {
          "postPublish": [
            {
              "file": "sentry-expo/upload-sourcemaps",
              "config": {
                "organization": "your organization's short name here",
                "project": "your project name here",
                "authToken": "your auth token here"
              }
            }
          ]
        }
      }
    

    동작 확인



    강제로 오류를 발생시킵니다 (버튼 추가).
    htps : // / cs. 센트리. 이오 / c 엔 ts / 그럼 sc 리 pt / 토끼 /

    App.js
    import React from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';
    import Sentry from 'sentry-expo';
    
    // Remove this once Sentry is correctly setup.
    Sentry.enableInExpoDevelopment = true;
    
    Sentry.config('https://********@sentry.io/****').install();
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <Text>Changes you make will automatically reload.</Text>
            <Text>Shake your phone to open the developer menu.</Text>
            <Button onPress={() => {throw new Error('sample error from expo')}} title="broken"/>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    

    Sentry 대시보드에서 오류를 확인할 수 있습니다.
  • 좋은 웹페이지 즐겨찾기