Expo (React Native)에서 Sentry를 이용해보기
4673 단어 reactnative
Sentry란?
Sentry는 에러 트래킹 시스템으로, 앱에서 일어나는 에러를 수집·열람·경보 발화 등을 할 수 있다. 서버 측 시스템의 오류는 서버에 남아 있지만 응용 프로그램을 모르기 때문에 오류 추적 시스템이 필요합니다.
Sentry는 다양한 언어를 지원하지만 React Native에도 대응하고 있으며, Expo에서는 표준으로 Sentry와 연계하기 위한 모듈을 제공하고 있으므로 그것을 이용해 본다(RN과 Expo 그럼 약간 도입 방법이 다르다).
준비
Sentry에 등록
아무것도 없어도 우선 엔트리에 등록합니다.
서버 이용(설정) 정보 얻기
추적 대상 앱에서 Sentry를 사용하려면 Auth Token이나 DSN 등의 정보가 필요하기 때문에 취득합니다.
이러한 정보는 초기 마법사에서도 얻을 수 있지만 나중에 얻을 수 있습니다.
Auth Token
이런 화면이 있으므로 생성, 취득합니다.
DSN
이런 화면이 있기 때문에 취득합니다.
프로젝트 만들기
적당히 UI를 보면 알 수 있습니다. 가입할 때 자동으로 마법사가 시작될 수 있습니다.
React-Native용 프로젝트를 만들어 둡니다.
Expo에 코드 넣기
기본적으로는 Expo 페이지 대로 하면 좋을 뿐. 만지는 파일은 App.js와 app.json의 2개.
App.js
초기화 및 오류 발생. 초기화에는 DSN 정보가 필요합니다.
App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
+import * as Sentry from 'sentry-expo';
+//Sentry初期化
+Sentry.init({
+ dsn: 'https://[email protected]',
+ enableInExpoDevelopment: true,
+ debug: true
+});
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text>App</Text>
<Button
title="throw error"
onPress={() => {
+ throw new Error('test error'); //button pushでエラー発生させる
}}
/>
</View>
);
}
}
app.json
app.json에 후크를 추가하고 다양한 정보를 설정합니다.
app.json
{
"expo": {
"name": "test",
"slug": "test",
"privacy": "public",
"sdkVersion": "36.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
+ "hooks": {
+ "postPublish": [
+ {
+ "file": "sentry-expo/upload-sourcemaps",
+ "config": {
+ "organization": "xxxxxxxxxx",
+ "project": "test",
+ "authToken": "e38ab7b80e8b424584673d18ac04c3e9743b7287967b4cf08857c8xxxxxxxxxx",
+ "url": "option"
+ }
+ }
+ ]
+ }
}
}
동작 확인
오류가 발생하면 Sentry에 표시됩니다.
기타
기본적으로 에러시에 메일이 송신되는 것 같습니다 (당연히 On, Off 가능). 또한 Slack과 함께 작동하여 오류를 알릴 수 있습니다.
Reference
이 문제에 관하여(Expo (React Native)에서 Sentry를 이용해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zaburo/items/abb1734bba1bb6f7db03텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
