Sentry React Native 项目教程

Sentry React Native 项目教程

sentry-react-nativeOfficial Sentry SDK for React-Native项目地址:https://gitcode.com/gh_mirrors/se/sentry-react-native

1. 项目的目录结构及介绍

Sentry React Native 项目的目录结构如下：

sentry-react-native/
├── android/
├── assets/
├── ios/
├── plugin/
├── samples/
├── scripts/
├── src/
│   └── js/
├── test/
├── typings/
├── craft.yml
├── eslintignore
├── eslintrc.js
├── gitignore
├── npmignore
├── prettierignore
├── prettierrc.json
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── RNSentry.podspec
├── app.plugin.js
├── babel.config.js
├── expo.d.ts
├── jest.config.js
├── metro.d.ts
├── metro.js
├── package.json
├── react-native.config.js
├── sentry.gradle
├── tsconfig.build.json
├── tsconfig.build.tools.json
├── tsconfig.json
└── yarn.lock

目录介绍

• android/: 包含 Android 平台相关的代码和配置文件。
• assets/: 包含项目所需的静态资源文件。
• ios/: 包含 iOS 平台相关的代码和配置文件。
• plugin/: 包含插件相关的代码和文件。
• samples/: 包含示例代码和项目。
• scripts/: 包含项目构建和部署的脚本文件。
• src/js/: 包含 JavaScript 源代码文件。
• test/: 包含测试代码和配置文件。
• typings/: 包含 TypeScript 类型定义文件。
• craft.yml: 项目构建和部署的配置文件。
• eslintignore: ESLint 忽略文件配置。
• eslintrc.js: ESLint 配置文件。
• gitignore: Git 忽略文件配置。
• npmignore: npm 忽略文件配置。
• prettierignore: Prettier 忽略文件配置。
• prettierrc.json: Prettier 配置文件。
• CHANGELOG.md: 项目更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE.md: 项目许可证。
• README.md: 项目说明文档。
• RNSentry.podspec: CocoaPods 配置文件。
• app.plugin.js: 应用插件配置文件。
• babel.config.js: Babel 配置文件。
• expo.d.ts: Expo 类型定义文件。
• jest.config.js: Jest 测试配置文件。
• metro.d.ts: Metro 类型定义文件。
• metro.js: Metro 配置文件。
• package.json: npm 包配置文件。
• react-native.config.js: React Native 配置文件。
• sentry.gradle: Sentry Gradle 配置文件。
• tsconfig.build.json: TypeScript 构建配置文件。
• tsconfig.build.tools.json: TypeScript 构建工具配置文件。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

Sentry React Native 项目的启动文件主要是 index.js 或 App.js，具体取决于项目的结构。通常，index.js 是入口文件，负责初始化 React Native 应用并加载 App.js。

index.js

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: '__DSN__',
  tracesSampleRate: 1.0,
});

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello Sentry</Text>
    </SafeAreaView>
  );
};

export default App;

3. 项目的配置文件

sentry-react-nativeOfficial Sentry SDK for React-Native项目地址:https://gitcode.com/gh_mirrors/se/sentry-react-native