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

npm install rn-vconsole-panel
# or
yarn add rn-vconsole-panel

Quick Start

import RNConsole, { handleRNNavigationStateChange } from 'rn-vconsole-panel'
import { NavigationContainer } from '@react-navigation/native'

return (
  <View flex>
    <NavigationContainer
      onStateChange={(state) => {
        handleRNNavigationStateChange(state) // listen to the change of navigation
        // ...
      }
    >
      // Stack & Screen & Tab
    </NavigationContainer>
    {['dev', 'sit'].includes(RNConfig.NODE_ENV) ? 
      <RNConsole
        definedData={{
          userInfo: props.userInfo,
        }} // Add user-defined data in "System" board
      /> : null}
  </View>
)

Screenshots

Entry & Console Board:

Network Board & Stack Board:

Storage Board & System Board:

Configuration

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

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

1. RNConsole Component

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

Properties：

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

consoleType

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

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

<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列表

import AsyncStorage from '@react-native-async-storage/async-storage'

// example: Use the functions of "AsyncStorage" to operate storage
...
<RNConsole storage={{getAllKeys: AsyncStorage.getAllKeys, getItem: AsyncStorage.getItem, setItem: AsyncStorage.setItem, removeItem: AsyncStorage.removeItem, clear: AsyncStorage.clear}} />

definedData

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

<RNConsole
  definedData={{
    userInfo: props.userInfo,
    version: configs.version,
      ...
  }}
/>

2. statusBarHeight: number

The statusBar height of Android or iOS.

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

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

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

4. handleRNNavigationStateChange: (state) => void

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

<NavigationContainer
  onStateChange={(state) => {
    handleRNNavigationStateChange(state) // listen to the change of navigation
    // ...
  }
>
  // Stack & Screen & Tab
</NavigationContainer>

5. networkLogger

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

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

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:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "lib": [],
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react-native",
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "outDir": "./lib",
    "isolatedModules": true,
    "strict": false,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ],
}

Change "target、modules、lib" to:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es2017", 
    "module": "ESNext",
    "lib": [ "es2017" ],
	...
}

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

ludejun / rn-vconsole-panel Goto Github PK