乐趣区

关于前端:reactnative之异常监控平台sentry接入指南

前言

sentry 介绍

sentry 是国外出的一款异样监控平台,反对市面上大多数的语言和框架。

就 react-native 来说:

  • 能主动捕捉包含 native 谬误和 js 谬误。
  • 上报的信息包含机型,零碎版本号、app 版本号、consolex.log 信息、谬误栈信息、异样源码地位、commit 记录等。
  • 性能包含错误信息看板、监控预警、性能监控等。

长处:

  • 收费
  • 上报信息丰盛

毛病:

  • 须要迷信上网
  • 还没有汉化版

接入步骤

创立我的项目

登录

注册并登录 sentry 账号。

创立组织

点击后输出组织名称,确认即可。我创立了一个叫 test 的组织。

创立我的项目

抉择 react-native,能够批改项目名称和组织,这里我就不改了,点创立我的项目。

配置 sentry

装置

npm install --save @sentry/react-native
# or
yarn add @sentry/react-native

批改原生配置

npx @sentry/wizard -i reactNative -p ios android
# or
yarn sentry-wizard -i reactNative -p ios android

# 下面命令实现后记得更新 ios 依赖
npx pod-install

这个时候,命令行会关上浏览器(如果没关上,手动点击命令行呈现的链接),而后你抉择一个我的项目,这里抉择test / react-native 我的项目。代表 test 组织上面的 react-native 我的项目。

抉择实现后会主动配置四个文件(本文编写的时候 sentry 版本为 4.2.4,当前新版本兴许会不一样)。

批改内容
iOS 和 android

都多了一个 sentry.properties 文件。

sentry.properties 外面的内容是一样的:

defaults.url=https://sentry.io/
defaults.org=test-5yn
defaults.project=react-native
auth.token=4824f7eb99fc06e55d01ad794dd9743fdxxxxxxxxxxx
  • url:官网地址
  • org:组织名称
  • project:项目名称
  • token:鉴权令牌

留神,不要试图在 sentry.properties 文件加正文,不然上传 sourcemap 的时候会报错,上传的时候会用到 url 参数。

android

android 还批改了 android/app/build.gradle 文件。

iOS

ios 批改了 ios/rn_demo.xcodeproj/project.pbxproj 文件。

其中退出了一个构建阶段工作。工作内容大略就是打包的时候上传一些内容到 sentry 平台,不便定位异样。预计是为了定位 native 异样。

而后还改了一下 react-native 原来的打包工作:

这里格式化一下脚本内容:

  • 原脚本

    set -e
    
    WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
    REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
    
    /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
  • 批改后的脚本

    export SENTRY_PROPERTIES=sentry.properties
    export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
    set -e
    
    WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
    ../node_modules/@sentry/cli/bin/sentry-cli react-native xcode REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
    
    /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

大略变动就是加一个 sentry 的 cli 命令,而后上传 sourcemap 便于定位 js 异样地位。

初始化 SDK

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://04c9544cd0104f97ad0a9c2599f9cd49@o1379748.ingest.sentry.io/6692866', // 这里替换成你我的项目的 dsn
  tracesSampleRate: 1.0, // 上传异样的比例,1.0 代表百分之百上传
});

包裹你的 App

批改 App.tsx

export default Sentry.wrap(App);

验证

js 谬误

throw new Error("My first Sentry error!");

在后盾查看:

native 谬误

Sentry.nativeCrash();

在后盾查看:

踩坑记录

error: No such file or directory (os error 2)

新版本 rn 会呈现下列问题,版本 >0.69 的。

解决方案

须要手动批改一下打包脚本,将下列代码复制到图片所示的中央:

set -e
export SENTRY_PROPERTIES=sentry.properties
export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
SENTRY_CLI_PATH="../node_modules/@sentry/cli/bin/sentry-cli"
/bin/sh -c "$WITH_ENVIRONMENT \"$SENTRY_CLI_PATH react-native xcode $REACT_NATIVE_XCODE\""

env: node: No such file or directory

如果应用 nvm 治理 node,运行时会呈现下列问题:

解决方案

创立一个 node 的软连贯:

ln -s $(which node) /usr/local/bin/node

后记

对于被墙的问题,能够思考私有化部署,详情能够查看:https://github.com/getsentry/…。

参考:sentry 官网文档

退出移动版