{"id":18803046,"url":"https://github.com/wutiange/log-listener-plugin","last_synced_at":"2025-04-13T18:34:15.702Z","repository":{"id":219107197,"uuid":"748179793","full_name":"wutiange/log-listener-plugin","owner":"wutiange","description":"log-record 客户端对应的的插件(Log-record client corresponding plugin)","archived":false,"fork":false,"pushed_at":"2025-02-18T02:23:25.000Z","size":23685,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T09:12:38.180Z","etag":null,"topics":["charles","debugger","log","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wutiange.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-25T12:50:46.000Z","updated_at":"2024-12-21T03:03:38.000Z","dependencies_parsed_at":"2024-12-09T15:24:16.658Z","dependency_job_id":"b5c0ae81-202f-483d-bd60-a745cf1ff9af","html_url":"https://github.com/wutiange/log-listener-plugin","commit_stats":null,"previous_names":["wutiange/log-listener-plugin"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutiange%2Flog-listener-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutiange%2Flog-listener-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutiange%2Flog-listener-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutiange%2Flog-listener-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wutiange","download_url":"https://codeload.github.com/wutiange/log-listener-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760784,"owners_count":21157429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charles","debugger","log","react-native"],"created_at":"2024-11-07T22:32:50.217Z","updated_at":"2025-04-13T18:34:15.697Z","avatar_url":"https://github.com/wutiange.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# log-listener-plugin\n[![Dependencies](https://img.shields.io/badge/dependencies-none-green)](https://www.npmjs.com/package/@wutiange/log-listener-plugin?activeTab=dependencies)\n[![npm](https://img.shields.io/npm/v/@wutiange/log-listener-plugin)](https://www.npmjs.com/package/@wutiange/log-listener-plugin)\n[![npm downloads](https://img.shields.io/npm/dm/@wutiange/log-listener-plugin)](https://www.npmjs.com/package/@wutiange/log-listener-plugin)\n[![License](https://img.shields.io/npm/l/@wutiange/log-listener-plugin)](./LICENSE)\n\n中文 | [English](packages/log-listener-plugin/README.md)\n\n要想正常使用 [log-record](https://github.com/wutiange/log-record) 客户端来收集日志，方便排查问题，那么就需要把这个插件安装到项目中。\n\n## 1. 安装\n\n使用 npm 安装\n\n```bash\nnpm install @wutiange/log-listener-plugin\n```\n\n使用 yarn 安装\n\n```bash\nyarn add @wutiange/log-listener-plugin\n```\n\n**由于日志系统使用 http ，所以需要配置项目支持 http 才能正常使用。**\n\n## 2. 使用\n\n在你需要开始记录日志的地方，调用下面的代码即可。\n\n### 2.1 基于自我发现的使用\n\n先安装 react-native-zeroconf ，这个的目的是发现局域网内可用的日志系统。\n\n```bash\nyarn add react-native-zeroconf\n# 或\nnpm install react-native-zeroconf\n```\n\n具体安装步骤请移步：[react-native-zeroconf](https://www.npmjs.com/package/react-native-zeroconf) ，请不要忽略这行，因为要想使用这个还需要做一些必要的步骤，我也把这些复制到下面，以免被人忽略。\n\nFor Android please ensure your manifest is requesting all necessary permissions.\n\n```xml\n\u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.CHANGE_WIFI_MULTICAST_STATE\" /\u003e\n```\n\nIOS 14 requires you to specify the services you want to scan for and a description for what you're using them.\n\nIn your `info.plist` add the following strings:\n\n```plist\n\u003ckey\u003eNSBonjourServices\u003c/key\u003e\n\t\u003carray\u003e\n\t\t\u003cstring\u003e_http._tcp\u003c/string\u003e\n\t\u003c/array\u003e\n\u003ckey\u003eNSLocalNetworkUsageDescription\u003c/key\u003e\n\u003cstring\u003eAccess nearby Log Records to view logs\u003c/string\u003e\n```\n\n接下来只需要在项目中找个合适的位置，一般是在 App.js 中调用。\n\n```ts\nimport logger from '@wutiange/log-listener-plugin';\n// 启动日志记录\nlogger.config({isAuto: true});\n```\n\n### 2.2 基于手动设置的方式使用\n\n```ts\nimport logger from '@wutiange/log-listener-plugin';\n// 填写日志服务器的地址，如果你使用自我发现功能，那么这一步可以省略\nlogger.config({isAuto: true, testUrl: 'http://127.0.0.1'});\n```\n\n### 2.3 设置基本数据\n\n设置基础数据，一般数据从 react-native-device-info 中获取，如果你没有特殊的可以不要调用，内部会根据你安装的 react-native-device-info 自动获取基础数据。这些基础数据的目的是为了过滤数据，不是必须的。\n\n```ts\nlogger.config({\n  baseData: {\n    Brand: DeviceInfo.getBrand(),\n    Model: DeviceInfo.getModel(),\n    AppVersion: DeviceInfo.getVersion(),\n    Carrier: DeviceInfo.getCarrierSync(),\n    Manufacturer: DeviceInfo.getManufacturerSync(),\n    SystemName: DeviceInfo.getSystemName(),\n  }\n});\n```\n\n### 2.4 单独记录和停止所有记录\n\n尽量不要使用以下 API ，这些 API 也没必要，这些数据都只会保存到你打开的日志系统中，所以都是能收集啥就都收集啥，目的是方便排查问题。\n\n```ts\n// 只抓取日志\nlogger.startRecordLog();\n// 只抓取网络日志\nlogger.startRecordNetwork();\n\n// 停止日志记录，会同时停止日志和网络\nlogger.unAuto();\n```\n\n### 2.5 其他使用说明\n\n如果你希望杀死手机后下次进来仍然能记住之前保存的 IP 地址，那么你可以考虑安装：\n\n```bash\nyarn add @react-native-async-storage/async-storage\n```\n\n如果你本地有安装其他的 storage ，那么你可以手动设置：\n\n```ts\nlogger.config({\n  storage: // 你的 storage ；或者你自己写的，只要遵循 getItem 和 setItem 接口规范即可  \n})\n```\n\n现在把若干配置相关的都放到了 config 中，以此来简化配置，配置的每一项都是可选的：\n\n```ts\ntype Options = {\n  /**\n   * storage 用于存储已设置的日志系统的 url\n   * @default @react-native-async-storage/async-storage\n   */\n  storage?: Storage\n  /**\n   * 设置上传日志的超时时间，单位为毫秒\n   * @default 3000\n   */\n  timeout?: number\n  /**\n   * 日志系统的url\n   */\n  testUrl?: string\n  /**\n   * 是否自动开启日志记录\n   * @default false\n   */\n  isAuto?: boolean\n  /**\n   * 设置日志系统的基础数据，这些数据会自动添加到每条日志中\n   */\n  baseData?: Record\u003cstring, any\u003e\n}\n```\n\n这是 config 每一项的说明。\n\n## 3. 其他重要说明\n\n1.  如果你使用的自我发现模式，那么要保证你的手机和 log-record 客户端在同一个局域网下。\n1.  在配置 baseUrl 的时候，必须填写的是 [log-record](https://github.com/wutiange/log-record) 的地址，也就是你在什么电脑打开的 log-record 客户端，那么这里添加的就是对应电脑的 ip 地址。集成这个插件的 app 端要保证跟 log-record 客户端在同一个局域网下。\n1.  如果你不知道日志系统的 IP ，可以在日志系统的 `设置 \u003e 链接说明（需要版本大于1.0.9）` 中找到，如下图所示：\n\n![0cf34d6cd25ee1f725b57dd2d076c336.png](https://raw.githubusercontent.com/wutiange/assets/refs/heads/master/images/0cf34d6cd25ee1f725b57dd2d076c336.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwutiange%2Flog-listener-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwutiange%2Flog-listener-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwutiange%2Flog-listener-plugin/lists"}