rn-vconsole-panel

A Logger that runs on the device is the same as the chrome console or vConsole. rn-vconsole-panel can log the Console, Network, Router Stack, Storage, System Info automatic.

Features

• 无侵入、分日志类型、数据类型分颜色展示Console日志

• 可以记录自定义Console类型的日志

• Log networks requests on iOS and Android

• Debug console, network requests and storage on release builds

• 监听API耗时

• 记录用户操作App时的页面栈变化及所携带参数

• 监听用户在每个页面停留时间

• 可以展示所有缓存数据，删除所有或者某一条缓存，修改某一条缓存

• 展示设备信息：os、版本、宽高、分辨率、状态栏高度等，可以展示用户自定义数据，如：用户信息、uuid、app version、当前环境等

Installation

1npm install rn-vconsole-panel
2# or
3yarn add rn-vconsole-panel

Quick Start

1import RNConsole, { handleRNNavigationStateChange } from 'rn-vconsole-panel'
2import { NavigationContainer } from '@react-navigation/native'
3
4return (
5  <View flex>
6    <NavigationContainer
7      onStateChange={(state) => {
8        handleRNNavigationStateChange(state) // listen to the change of navigation
9        // ...
10      }
11    >
12      // Stack & Screen & Tab
13    </NavigationContainer>
14    {['dev', 'sit'].includes(RNConfig.NODE_ENV) ? 
15      <RNConsole
16        definedData={{
17          userInfo: props.userInfo,
18        }} // Add user-defined data in "System" board
19      /> : null}
20  </View>
21)

Screenshots

Entry & Console Board:

Network Board & Stack Board:

Storage Board & System Board:

Configuration

1import RNConsole, { statusBarHeight, RNStackRef, handleRNNavigationStateChange, networkLogger } from 'rn-vconsole-panel';

下面分别介绍rn-vconsole导出的RNConsole组件和其余四个值：

1. RNConsole Component

一般接入在顶层App容器中，共分5个面板

Properties：

1interface RNConsole {
2  entryVisible?: boolean; // 可以通过父组件控制面板是否展示
3  entryText?: string; // 入口Button显示的文字，默认为RNConsole
4  entryStyle?: ViewStyle; // 入口Button的样式
5  consoleType?: string[]; // 需要console打印出来的日志类型，可以传入自定义类型，默认为['log', 'info', 'warn', 'error']
6  maxLogLength?: number; // 各种类型日志数组的长度，超出长度则删除之前暂存的日志，默认200
7  ignoredHosts?: string[]; // Network中需要忽略的host
8  storage?: {
9    getAllKeys: () => Promise<string[]>;
10    getItem: (key: string) => Promise<string>;
11    setItem?: (key: string, value: string) => Promise<void>;
12    removeItem?: (key: string) => Promise<void>;
13    clear?: () => Promise<void>;
14   }; // 读取缓存的各种方式，根据传入方法数展示功能，API参考 https://github.com/react-native-async-storage/async-storage#react-native-async-storage
15  definedData?: Record<string, any>; // 在SystemBoard展示的自定义数据
16}

consoleType

为Console面板展示的console类型，默认为['log', 'info', 'warn', 'error']，可以添加自定义类型

1// example: Add "monitor" type
2console.monitor(111111, [1,{a: 'wefawef', c: { d: 1234134}}, [4,5,6]])
3console.monitor(222222, [2, { a: 'wefawef', c: { d: 1234134 } }, [4, 5, 6]])

1<RNConsole consoleType={['log', 'error', 'monitor']} />

Result:

maxLogLength

所有面板展示日志的长度，超出长度前面的出栈，默认为200

ignoredHosts

Network面板中需要忽略的host数组，默认忽视'localhost:8081'

storage

操作storage所需的方法，如没有，则Storage面板展示为空，参考react-native-async-storage 的API

有getAllKeys、getItem方法则正常展示storage列表

有setItem方法允许重新设置每一项

有removeItem方法允许删除某一项

有clear方法允许删除所有storage列表

1import AsyncStorage from '@react-native-async-storage/async-storage'
2
3// example: Use the functions of "AsyncStorage" to operate storage
4...
5<RNConsole storage={{getAllKeys: AsyncStorage.getAllKeys, getItem: AsyncStorage.getItem, setItem: AsyncStorage.setItem, removeItem: AsyncStorage.removeItem, clear: AsyncStorage.clear}} />

definedData

需要在System面板展示的用户自定义Data

1<RNConsole
2  definedData={{
3    userInfo: props.userInfo,
4    version: configs.version,
5      ...
6  }}
7/>

2. statusBarHeight: number

The statusBar height of Android or iOS.

3. RNStackRef：createRef<stack[]>()

存储所有页面栈的数据，可以供监控或者埋点，当前页面就是栈中的最后一项。是Stack面板的数据源。

1interface stack {
2  type: 'stack' | 'tab' | 'drawer'; // The type of screen, same as @react-navigation/native
3  name: string; // Screen name
4  params: Record<string, unknown> | undefined; // The params of this screen
5  changeTime: number; // The time of this screen's DidMount, similar
6  duration?: number; // Time on this screen, similar
7}

4. handleRNNavigationStateChange: (state) => void

需要在NavigationContainer的onStateChange方法中调用，用来监听页面变化，如没有监听则Stack面板为空

1<NavigationContainer
2  onStateChange={(state) => {
3    handleRNNavigationStateChange(state) // listen to the change of navigation
4    // ...
5  }
6>
7  // Stack & Screen & Tab
8</NavigationContainer>

5. networkLogger

The instance of networkLogger. You can get or handle all requests.

1networkLogger.getRequests(); // get all data of request list
2networkLogger.clearRequests(); // clear all data
3...

Others

"Clear" means clear all data in this board.

"Close" means close the model of rn-vconsole.

Issues

tsc(tsconfig.json) compile react-native npm library：ReferenceError: React is not defined

Origin tsconfig.json:

1{
2  "compilerOptions": {
3    /* Basic Options */
4    "target": "es5",
5    "module": "commonjs",
6    "lib": [],
7    "allowJs": true,                          /* Allow javascript files to be compiled. */
8    "jsx": "react-native",
9    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
10    "outDir": "./lib",
11    "isolatedModules": true,
12    "strict": false,
13    "moduleResolution": "node",
14    "allowSyntheticDefaultImports": true,
15    "esModuleInterop": true
16  },
17  "exclude": [
18    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
19  ],
20}
21

Change "target、modules、lib" to:

1{
2  "compilerOptions": {
3    /* Basic Options */
4    "target": "es2017", 
5    "module": "ESNext",
6    "lib": [ "es2017" ],
7	...
8}

OK, success. https://stackoverflow.com/questions/57182197/react-native-jest-ts-jest-referenceerror-react-is-not-defined