{"id":24910677,"url":"https://github.com/ruimve/microspot","last_synced_at":"2025-04-08T03:16:57.634Z","repository":{"id":65524234,"uuid":"593901397","full_name":"Ruimve/microspot","owner":"Ruimve","description":"🐱 🐱 轻量级前端异常监控和性能监控系统，帮助工程师定位并解决各种线上问题 🐞，使项目保持高性能运行的同时拥有健康良好的 🚗 代码环境。","archived":false,"fork":false,"pushed_at":"2023-03-12T13:43:08.000Z","size":813,"stargazers_count":261,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T22:32:18.660Z","etag":null,"topics":["cls","fid","font-monitor","lcp","monitor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ruimve.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2023-01-27T05:07:23.000Z","updated_at":"2024-10-01T08:46:08.000Z","dependencies_parsed_at":"2024-10-29T21:24:54.413Z","dependency_job_id":null,"html_url":"https://github.com/Ruimve/microspot","commit_stats":{"total_commits":33,"total_committers":3,"mean_commits":11.0,"dds":0.1515151515151515,"last_synced_commit":"28da0a5fad00c3243d78efb71594a52c889accf5"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":"Ruimve/TEMPALTE-LIB-ROLLUP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fmicrospot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fmicrospot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fmicrospot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fmicrospot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ruimve","download_url":"https://codeload.github.com/Ruimve/microspot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767237,"owners_count":20992548,"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":["cls","fid","font-monitor","lcp","monitor"],"created_at":"2025-02-02T03:37:55.774Z","updated_at":"2025-04-08T03:16:57.615Z","avatar_url":"https://github.com/Ruimve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003emicrospot\u003c/h1\u003e\n\n  \u003ca href=\"https://github.com/Ruimve\"\u003e\n    \u003cimg\n      width=\"80\"\n      alt=\"Ruimve\"\n      src=\"https://github.com/Ruimve/materials/blob/main/images/spirit.png?raw=true\"\n    /\u003e\n  \u003c/a\u003e\n\n  \u003cp\u003e前端监控 SDK\u003c/p\u003e\n\u003c/div\u003e\n\u003chr /\u003e\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n\u003c!-- [![Code Coverage][coverage-badge]][coverage] --\u003e\n\n## 内容列表\n\n- [简介](#简介)\n- [如何消费](#如何消费)\n  - [支持 CDN 引入](#支持-cdn-引入)\n  - [支持 ES Module](#支持-es-module)\n- [监控项](#监控项)\n  - [异常监控](#异常监控)\n    - [运行时异常](#监控-js-运行时异常)\n    - [资源加载异常](#监控资源加载异常)\n    - [Promise 拒绝未处理](#捕获拒绝未处理的-promise)\n    - [白屏](#白屏)\n    - [Ajax 请求](#监控-ajax)\n    - [Fetch 请求](#监控-fetch)\n  - [性能监控](#性能监控)\n    - [核心指标](#lcp-largest-contentful-paint-最大内容绘制)\n      - [最大内容绘制（LCP）](#lcp-largest-contentful-paint-最大内容绘制)\n      - [首次输入延迟（FID）](#fid-first-input-delay-首次输入延迟)\n      - [累计布局位移（CLS）](#cls-cumulative-layout-shift-累计布局位移)\n    - [其他指标](#fp-first-paint-首次绘制时间)\n      - [首次绘制时间（FP）](#fp-first-paint-首次绘制时间)\n      - [首次内容绘制时间（FCP）](#fcp-first-contentful-paint-首次内容绘制时间)\n      - [长任务（LongTask）](#longtask-长任务)\n      - [阶段耗时（Timing）](#timing-阶段耗时)\n  - [业务埋点](#业务埋点)\n    - [页面访问量（PV）](#page-view-页面访问量)\n    - [自定义埋点](#自定义埋点)\n- [指标配置项](#指标配置项)\n\n## 简介\n\n在前端系统中，通常异常是不可控的，并不能确定什么时候或者什么场景会发生异常，但它却会实实在在的影响用户体现。所以，我们非常有必要去做这样一件事情，就是去监控异常的发生并防范它。\n\n不过有时候尽管没有异常发生，功能也正常，但是由于编码的问题导致运行十分缓慢，这就需要监控 web 应用的性能指标。\n\n除此之外，去了解用户的行为，以用户数据为基础，来指导我们产品的优化方向，也是前端监控的重要课题之一。\n\n所以前端监控主要可以分为三大类：数据监控、性能监控和异常监控。\n\n## 如何消费\n\n`microspot` 支持 CDN 和 ES Module 的方式使用，但是必须确保的是需要在所有资源之前引入。\n\n### 支持 CDN 引入\n\n打包之后会在 `es` 文件夹中生成 `index.global.js`，我们将它挂到 CDN 上通过路径引入，它会在 `window` 上定义一个 `microspot` 对象，通过对象上的 `set` 方法来配置监听项，通过 `start` 方法启动监听。\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"https://www.cdn.com/index.global.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      microspot.set({\n        tracker: [\n          'STABILITY',\n          'EXPERIENCE',\n          'BUSINESS'\n        ],\n        lastEvent: true,\n        send: (spot) =\u003e {\n          console.log('上传', spot)\n        }\n      });\n\n      microspot.start(() =\u003e {\n        console.log('启动监听');\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 支持 ES Module\n\n#### 安装\n\n本模块通过 [npm][npm] 分发，需要将其添加到项目的 `dependencies` 中：\n\n```\nnpm install microspot --save\n```\n或\n\n通过 [yarn][yarn] 安装:\n```\nyarn add microspot\n```\n\n#### 使用\n\n```ts\nimport { Microspot } from 'microspot';\nconst microspot = new Microspot();\nmicrospot.set({\n  tracker: [\n    'STABILITY',\n    'EXPERIENCE',\n    'BUSINESS'\n  ],\n  lastEvent: true,\n  send: (spot) =\u003e {\n    console.log('上传', spot)\n  }\n});\n\nmicrospot.start(() =\u003e {\n   console.log('启动监听');\n});\n```\n\n## 配置项\n\n我们通过 `set` 方法可以传入监控配置，下面是具体的配置项：\n\n### Config 定义\n\n|字段|类型|默认值|描述|\n|:-:|:-:|:----:|:--|\n|**`tracker`**|`{Array\u003cstring\\|TrackerOption\u003e}`|`['STABILITY','EXPERIENCE','BUSINESS']`|需要监控的大类有：`STABILITY 稳定性`、`EXPERIENCE 体验`、`BUSINESS 业务`|\n|**`lastEvent`**|`{boolean\\|Array\u003cstring\u003e}`|`true`|是否监听最后操作事件, 也可以通过事件数组指定监听的事件|\n|**`send`**|`{(spot: SendSpot\\|SendSpot[], options: DefaultIndexOption) =\u003e void}`|模块提供了 gif 上传方法|自定义埋点数据上传的方法，当埋点被触发时会调用该方法|\n\n## 监控项\n\n监控用户数据的上报格式，如下：\n\n\n### 异常监控\n\n#### 监控 JS 运行时异常\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"JS_RUNTIME_ERROR\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  filename: string;\n  message: string;\n  position: string;\n  stack: { at: string; scope: string; filename: string; lineno: string; colno: string; }[];\n  selector: string;\n}\n```\n\n#### 监控资源加载异常\n\n##### 配置\n\n|资源类型|对应字段|\n|:-----:|:-----:|\n|**`脚本`**|`SCRIPT_LOAD_ERROR`|\n|**`样式`**|`CSS_LOAD_ERROR`|\n|**`图像`**|`IMAGE_LOAD_ERROR`|\n|**`音频`**|`AUDIO_LOAD_ERROR`|\n|**`视频`**|`VIDEO_LOAD_ERROR`|\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"SCRIPT_LOAD_ERROR\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  filename: string;\n  tagName: string;\n  selector: string;\n}\n```\n\n#### 捕获拒绝未处理的 Promise\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"PROMISE_REJECTION\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  message: string;\n  filename: string;\n  position: string;\n  stack: { at: string; scope: string; filename: string; lineno: string; colno: string; }[];\n  selector: string;\n}\n```\n\n#### 白屏\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"BLANK_SCREEN\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  emptyPoints: string;\n  screen: string;\n  viewPoint: string;\n  selector: string[];\n}\n```\n\n#### 监控 Ajax\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"XHR\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n          /** 接口白名单，名单中的接口不会进行打点 **/\n          \"apiWhiteList\": [/^http:\\/\\/127.0.0.1:5500\\/.+/],\n          /** 监听的状态码列表 **/\n          \"statusList\": [404, 405]\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  eventType: string;\n  pathname: string;\n  status: string;\n  statusText: string;\n  duration: string;\n  response: string;\n  params: string | Document | Blob | ArrayBufferView | ArrayBuffer | FormData;\n}\n```\n\n#### 监控 Fetch\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"STABILITY\",\n      \"index\": [\n        {\n          \"type\": \"FETCH\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n          /** 接口白名单，名单中的接口不会进行打点 **/\n          \"apiWhiteList\": [/^http:\\/\\/127.0.0.1:5500\\/.+/],\n          /** 监听的状态码列表 **/\n          \"statusList\": [404, 405]\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  pathname: string;\n  status: string;\n  statusText: string;\n  contentType: string;\n  duration: string;\n}\n```\n\n### 性能监控\n\nWeb 指标是 Google 开创的一项新计划，旨在为网络质量信号提供统一指导，这些信号对于提供出色的网络用户体验至关重要。\n\n网站所有者要想了解他们提供给用户的体验质量，并非需要成为性能专家。Web 指标计划为了简化场景，帮助网站专注于最重要的指标，即 [核心 Web 指标（LCP FID CLS）][web-index]。\n\n除此核心指标之外还有另外一些指标，如 FP、FCP、longTask、内存使用情况和阶段耗时等也是重要的指标。\n\n#### LCP (Largest Contentful Paint) 最大内容绘制\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"LARGEST_CONTENTFUL_PAINT\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  startTime: string;\n  duration: string;\n  selector: string;\n  url: string;\n}\n```\n\n#### FID (First Input Delay) 首次输入延迟\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"FIRST_INPUT_DELAY\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  cancelable: string,\n  processingStart: string,\n  processingEnd: string,\n  startTime: string;\n  duration: string;\n}\n```\n\n#### CLS (Cumulative Layout Shift) 累计布局位移\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"CUMULATIVE_LAYOUT_SHIFT\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  value: string;\n  sources: string[];\n}\n```\n\n#### FP (First Paint) 首次绘制时间\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"FIRST_PAINT\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  startTime: string;\n  duration: string;\n}\n```\n\n#### FCP (First Contentful Paint) 首次内容绘制时间 \n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"FIRST_CONTENTFUL_PAINT\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  startTime: string;\n  duration: string;\n}\n```\n\n#### LongTask 长任务\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"LONG_TASK\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n          /** 长任务埋点设定时长，超过这个时长会进行打点，默认 200 毫秒 */\n          \"limitTime\": 200\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  eventType: string;\n  startTime: string;\n  duration: string;\n  selector: string;\n}\n```\n\n#### Timing 阶段耗时\n\n在 Web 应用中还有很多耗时的指标计算如下：\n\n|名称|计算方法|描述|\n|:-:|:-----:|:-:|\n|**`loadTiming`**|`loadEventEnd - startTime`|`页面加载总耗时`|\n|**`dnsTiming`**|`domainLookupEnd - domainLookupStart`|`DNS 解析耗时`|\n|**`tcpTiming`**|`connectEnd - connectStart`|`TCP 连接耗时`|\n|**`sslTiming`**|`connectEnd - secureConnectionStart`|`SSL 连接耗时`|\n|**`requestTiming`**|`responseStart - requestStart`|`网路请求耗时`|\n|**`responseTiming`**|`responseEnd - responseStart`|`数据请求耗时`|\n|**`domTiming`**|`domContentLoadedEventEnd - responseEnd`|`DOM 解析耗时`|\n|**`resourceTiming`**|`loadEventEnd - domContentLoadedEventEnd`|`资源加载耗时`|\n|**`firstPacketTiming`**|`responseStart - startTime`|`首包耗时`|\n|**`renderTiming`**|`loadEventEnd - responseEnd`|`页面渲染耗时`|\n|**`htmlTiming`**|`responseEnd - startTime`|`HTML 加载完时间`|\n|**`firstInteractiveTiming`**|`domInteractive - startTime`|`首次可交互时间`|\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"EXPERIENCE\",\n      \"index\": [\n        {\n          \"type\": \"TIMING\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  /** 性能元数据 */\n  raw: PerformanceNavigationTiming;\n  loadTiming: string;\n  dnsTiming: string;\n  tcpTiming: string;\n  sslTiming: string;\n  requestTiming: string;\n  responseTiming: string;\n  domTiming: string;\n  resourceTiming: string;\n  firstPacketTiming: string;\n  renderTiming: string;\n  htmlTiming: string;\n  firstInteractiveTiming: string;\n}\n```\n\n### 业务埋点\n\n#### Page View 页面访问量\n\n##### 配置\n\n```js\n{\n  \"tracker\": [\n    {\n      \"type\": \"BUSINESS\",\n      \"index\": [\n        {\n          \"type\": \"PAGE_VIEW\",\n          /** 采样率 0-1， 比如 0.2，只有百分之 20 的埋点会被上传*/\n          \"sampling\": 1,\n          /** 缓存，会收集埋点数据批量上传 */\n          // \"buffer\": 10,\n        },\n      ]\n    }\n  ],\n}\n```\n\n##### 埋点数据\n\n```ts\ninterface Spot {\n  type: string;\n  env: { title: string; url: string; timestamp: number; userAgent: string; };\n  subType: string;\n  href: string;\n}\n```\n\n#### 自定义埋点\n\n不管是 `CDN` 还是 `ES Module`，`microspot` 对象都会提供一个 send 方法，可以手动发送埋点数据，参数有两个：\n\n- 拥有任意属性的自定义对象\n- [指标配置项](#指标配置项)\n\n\n\n```ts\nimport { Microspot } from 'microspot';\nconst microspot = new Microspot();\nmicrospot.set(/** ... **/ );\nmicrospot.start(/** ... **/);\n\n/**\n * 第一个入参数是自定义的对象，不限制属性\n * 第二个入参数是指标配置项\n */\nmicrospot.send(\n  { type: '自定义 type', arg2: '自定义属性' }, \n  { sampling: 1, buffer: 10 }\n);\n```\n\n## 指标配置项\n\n从上面的配置中，应该已经大概了解，下面具体列举下：\n\n|名称|适用的指标|描述|\n|:-:|:-----:|:-:|\n|**`type`**|`all`|`指标类型`|\n|**`sampling`**|`all`|`采样率 0 - 1`|\n|**`buffer`**|`all`|`缓冲发送`|\n|**`routerMode`**|`PAGE_VIEW`|`路由模式`|\n|**`apiWhiteList`**|`XHR, FETCH`|`请求域名白名单`|\n|**`statusList`**|`XHR, FETCH`|`请求监听 status`|\n|**`limitTime`**|`LONG_TASK`|`长任务埋点设定时长`|\n\n[npm]: https://www.npmjs.com/\n[yarn]: https://classic.yarnpkg.com\n[build-badge]: https://img.shields.io/github/workflow/status/microspot/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/Ruimve/microspot/actions/workflows/ci.yml/badge.svg\n[coverage-badge]: https://img.shields.io/codecov/c/github/Ruimve/microspot.svg?style=flat-square\n[coverage]: https://codecov.io/github/microspot\n[version-badge]: https://img.shields.io/npm/v/microspot.svg?style=flat-square\n[package]: https://www.npmjs.com/package/microspot\n[downloads-badge]: https://img.shields.io/npm/dm/microspot.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/microspot\n[license-badge]: https://img.shields.io/npm/l/microspot.svg?style=flat-square\n[license]: https://github.com/Ruimve/microspot/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[github-watch-badge]: https://img.shields.io/github/watchers/Ruimve/microspot.svg?style=social\n[github-watch]: https://github.com/Ruimve/microspot/watchers\n[github-star-badge]: https://img.shields.io/github/stars/Ruimve/microspot.svg?style=social\n[github-star]: https://github.com/Ruimve/microspot/stargazers\n\n[web-index]: https://web.dev/i18n/zh/defining-core-web-vitals-thresholds/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruimve%2Fmicrospot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruimve%2Fmicrospot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruimve%2Fmicrospot/lists"}