open-index/open-npm huggingface dataset:
npm package: @pvinis/signals-storage
Description: Signals are awesome. Make them even more awesome by **persisting them across sessions**.
Author: Pavlos Vinieratos
Latest version: 0.2.1

# Signals with Storage

Signals are awesome. Make them even more awesome by **persisting them across sessions**.

This library allows you to easily persist your signals across sessions. It works in everywhere. React, React Native, Expo, Deno, Node, web, mobile, server etc.

It's as simple as this:

```ts
export const tempCount = signal(0)
export const persistedCount = signalWithStorage("persistedCount", 0)
```

## Installation

```sh
npx jsr add @pvinis/signals-storage

or 

pnpx jsr add @pvinis/signals-storage

or

deno add @pvinis/signals-storage
```

## Usage

The suggested way to use this library is to create a simple wrapper around the `signalWithStorageCustom` function.

Example for web/React:

```ts
import { signalWithStorageCustom, Storage } from "@pvinis/signals-storage"

const storage: Storage = window.localStorage


export const signalWithStorage = <T>(key: string, initialValue: T) =>
  signalWithStorageCustom(key, initialValue, storage)
```


Example for mobile/Expo/React Native:

```ts
import { signalWithStorageCustom, Storage } from "@pvinis/signals-storage"
import { MMKV } from "react-native-mmkv"

const mmkvStore = new MMKV()

const mmkvStorage: Storage = {
  getItem: (key) => {
    const value = mmkvStore.getString(key)
    return value ? JSON.parse(value) : null
  },
  setItem: (key, value) => (mmkvStore.set(key, JSON.stringify(value))),
  removeItem: (key) => (mmkvStore.delete(key)),
  clearAll: () => (mmkvStore.clearAll()),
}

export const signalWithStorage = <T>(key: string, initialValue: T) =>
  signalWithStorageCustom(key, initialValue, mmkvStorage)
```

## Examples
- [web example](./examples/web)
- [mobile example](./examples/mobile)
- [desktop/server example](./examples/other)
npm package: @pvjs/js-monitor-sdk
Description: 前端的日志监控
Latest version: 0.0.1

# @pvjs/js-monitor-sdk

@pvjs/js-monitor-sdk, 前端 AMP 日志上报 SDK，支持性能、运行错误、接口性能、资源加载、接口非 200 监控

## 使用

实例化之后，自采集数据

TODO:

数据的收集服务需要自己建设，这里需要修改接口在 core/config 文件中 `SERVER_URL`、`IP_SERVER_URL`，并实现 `core/lib/upload#uploadLogData` 的逻辑代码。

```JS
import JSLogger from 'js-monitor-sdk'


const monitor = new JSLogger({
  performance: true,// 采集性能，默认关闭
  resourceError: true,// 采集资源加载错误，默认关闭
  request: true,// 采集请求异常与慢请求，默认关闭
  runtimeError: true,// 采集错误，默认关闭
  userActions: true;// 采集错误上下文，默认关闭
  trace: {
    open: true,// 接入trace，请务必关注后端是否允许请求头「X-B3-Traceid」跨域，默认关闭
    apiList: ['localhost', '127.0.0.1', '/api/v1'],// 配置需要支持trace的接口，支持字符串匹配
    ignoreList: [] // 忽略的接口地址，会覆盖hostList
  },
  common: { // 采集的公共字段
    disableLog: process.env.NODE_ENV==='development',// 是否禁止日志上报，建议本地改为 true
    projectId: 'test', // 项目id，唯一标识，必传
    // xxx 也可以在这里配置上传的字段，例如userId,
    userId: 'xxx',// 非必传，
    extra:{
      // ... 其他字段，非必传
    }
  },
});

```

配置环境变量

```JS
// vite
 define: {
    },

// webpack

{
   new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env),
    })
}

```

CDN 接入方式

```html
<script src="https://unpkg.com/@pvjs/js-monitor-sdk@版本号/dist/js-monitor-sdk.umd.js"></script>
<script>

  const monitor = new __JSLogger__({
    performance: true,// 采集性能，默认关闭
    resourceError: true,// 采集资源加载错误，默认关闭
    request: true,// 采集请求异常，默认关闭
    runtimeError: true,// 采集错误，默认关闭
    userActions: true;// 采集错误上下文，默认关闭
    trace: {
      open: true,// 接入trace，请务必关注后端是否允许请求头「X-B3-Traceid」跨域
      apiList: ['localhost', '127.0.0.1', '/api/v1'],// 配置需要支持trace的接口，支持字符串匹配
      ignoreList: [] // 忽略的接口地址，会覆盖hostList
    },// 接入trace，默认关闭
    common: {
     disableLog: false,// 是否禁止日志上报，建议本地改为 true
      projectId: 'test', // 项目id，唯一标识，必传
      // xxx 也可以在这里配置上传的字段，例如userId,
      userId: 'xxx',// 非必传，出入 userId 可以按照用户进行区分
      extra:{
        // ... 其他字段，非必传
      }
    },
  });
</script>
```

### 其他说明

1、如果对资源错误的捕获比较敏感，需要捕获全部的资源错误，在 html 的 header 中添加如下代码，如果不是特别敏感（或者不清楚），可以不写。

```js
window.__RESOURCE_ERROR__ = [];
window.addEventListener(
  'error',
  (event) => {
    window.__RESOURCE_ERROR__.push(event);
  },
  true
);
```

2、默认包括 polyfill，如果对 polyfill 不敏感，可以使用不包括 polyfill 的包

```js
import JSLogger from 'js-monitor-sdk/dist/js-monitor-sdk.esm.js';
```

ps: 业务接入要关注一下需要兼容的设备浏览器，如果对兼容有不清楚的地方详询鲍立磊。

## 监控大盘建设

前端的日志分析、监控、预警平台

## 参考资料

- [如何从 0 - 1 设计前端 APM 监控服务](https://zhuanlan.zhihu.com/p/584948647)
- [前端监控预警实战](https://zhuanlan.zhihu.com/p/514786984)
npm package: @pvjs/nodejs-monitor
Description: nodejs APM 服务监控
Author: 地铁程序员
Latest version: 1.1.0

# nodejs APM 监控

nodejs APM 服务监控

如果 node <= 16 使用 0.0.x 版本的 https://www.npmjs.com/package/@pvjs/nodejs-monitor/v/0.0.2
如果 node >= 18 使用 1.x.x 版本的 https://www.npmjs.com/package/@pvjs/nodejs-monitor?activeTab=readme

## 快速开始

参数均为非必传，未传入则使用默认值

### 内存监控

```js
import {
  memoryMonitor
  getV8Profile,
  getHeapSnapshot
} from '@pvjs/nodejs-monitor';

// 内存、gc 监控
memoryMonitor({
  reporter: function (data) {
    // eslint-disable-next-line no-console
    console.log(data);
  } // 基于韦伯进行上报，上报类型 `nodejs_monitor_gc` `nodejs_monitor`，支持自定义 reporter
});

```

### 诊断接入

自定义路由接入，在项目的 controller 中调用下面的方法

```js
// 性能看板.cpuprofile
getV8Profile({
  TIME: 3 * 60 * 1000, // 收集 v8Profile 时长。默认 3 分钟
  STATIC_PATH: '<root>/public', // 文件存储的路径，会存在服务中, 默认 join(process.cwd(), '../public')
});

// 内存快照
getHeapSnapshot({
  STATIC_PATH: '<root>/public', // 文件存储的路径，会存在服务中, 默认 join(process.cwd(), '../public')
});
```

## 指标看板

可以使用指标服务

## v8Profile 使用

1、访问 `router`,生成 `main.cpuprofile`文件

2、wget `${STATIC_PATH}/main.cpuprofile` 获取线上 .`cpuprofile` 文件，然后基于 vscode 进行性能分析,`Flame Chart Visualizer for JavaScript Profiles`，下载 vscode 插件可以直接生成火焰图

注意 📢：请确保 `baseRouter` 在 `nginx` 配置指向当前的服务

### 示例

[profile](./public/profile.png) [profile flame](./public/profile-flame.png)

## heapSnapshot 使用

1、访问 `router`,生成 `heapSnapshot` 文件

2、wget `${STATIC_PATH}/main.heapSnapshot` 获取线上 `.heapSnapshot` 文件，然后使用 `Chrome Memory` 功能，加载生成的文件

注意 📢：

1、请确保 `baseRouter` 在 `nginx` 配置指向当前的服务

2、等到服务人少的时候进行收集文件，因为生成 `heapSnapshot` 可能比较耗时，文件可能会比较大，超出系统存储上线（特别是本身申请的内存就比较小的服务，可能需要手动清理生成的 `heapSnapshot` 文件）

## 指标说明

### 内存相关指标说明

#### 堆内存

- rss：常驻内存，node 进程分配的总内存大小
- external：v8 管理的 C++所占用的内存大小
- arrayBuffers：分配给 ArrayBuffer 的内存大小
- heapTotal：v8 申请的堆内存大小
- heapUsed：v8 已使用的堆内存大小

#### 堆内存详情

- ready_only_space：只读空间
- old_space：老生代空间，用来存放 New Space 晋升的对象
- code_space: 存放 v8 JIT 编译后的可执行代码
- map_space：：存放 Object 指向的隐藏类的指针对象，隐藏类指针是 v8 根据运行时记录下的对象布局结构，用于快速访问对象成员
- large_object_space：用于存放大于 1MB 而无法分配到页的对象
- code_large_object_space：代码大对象空间
- new_large_object_space：新生代大对象空间
- new_space:新生代空间，用来存放一些生命周期比较短的对象数据

#### 其他

- number_of_native_contextsnative_context 的值是当前活动的顶级上下文的数量。该数字随着时间的推移而增加表明存在内存泄漏。
- number_of_detached_contextsdetached_context 的值是已分离但尚未进行垃圾收集的上下文的数量。该数字非零表示存在潜在的内存泄漏。
- heap_size_limit: 就是老生代可以使用的最大内存

### GC 监控

- gc_ts: 1700642047578587,GC 发生的时间，精度可能需要提高到 ms 级别，而不是 second 级别
- gcScavengeCount: 23, 清除数量, V8 新生代内存中垃圾回收使用 Scavenge 算法。
- gcScavengeTime: 33933875, 清除耗时 ns，1ns = 十亿分之一秒，1 纳秒（ns）等于 0.000001 毫秒（ms）
- gcMarkSweepCompactCount: 3,gc 标记扫描压缩计数
- gcMarkSweepCompactTime: 19564916, gc 标记扫描压缩时间
- gcIncrementalMarkingCount: 6, gc 增量标记计数
- gcIncrementalMarkingTime: 2438334, gc 增量标记时间
- gcProcessWeakCallbacksCount: 3, gc 进程弱回调计数
- gcProcessWeakCallbacksTime: 24542, gc 进程弱回调时间
- gc_time: 3474250 gc 时间

## 更多材料

[Nodejs APM 监控](https://zhuanlan.zhihu.com/p/670656224)