# @baselime/react-rum 中文文档

规范地址：https://npmcn.com/package/%40baselime/react-rum/

版本：0\.3\.1
npm 元数据更新时间：2024-09-09T10:21:46.405Z
中文译文更新时间：2026-11-07T17:40:20.937Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40baselime/react-rum
原文对照：https://npmcn.com/package/%40baselime/react-rum/?lang=original
项目主页：https://github.com/baselime/react-rum#readme
源码仓库：https://github.com/baselime/react-rum

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：36.4 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^18\.2\.0
- 首次发布：2023-09-22T10:55:48.011Z
- 最新版本发布：2024-09-09T10:21:46.190Z
- 近 30 天下载量：28340（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）

## 中文简介

优化您反应应用程序的真实世界性能

## 安装

```sh
npm install @baselime/react-rum
```

也可以使用：`pnpm add @baselime/react-rum`、`yarn add @baselime/react-rum`、`bun add @baselime/react-rum`

## README

# Baselime 反应真实用户监视

[![Documentation](https://img.shields.io/badge/docs-reference-blue.svg?style=flat-square)](https://baselime.io/docs/) [![Latest Release](https://img.shields.io/github/release/baselime/react-rum.svg?style=flat-square&ghcache=unused)](https://github.com/baselime/react-rum/releases/latest) [![License](https://img.shields.io/github/license/baselime/react-rum.svg?color=blue&style=flat-square&ghcache=unused)](https://opensource.org/licenses/MIT)

[巴塞尔](https://baselime.io/) 使下一代云应用具有可观察性.

此库允许您监视您的 React 和 Next.js 应用程序的真实用户行为 .

## 使用量

```bash
npm i --save @baselime/react-rum
```

添加数据 `BaselimeRum` 组件位于您的 React 应用程序的根 .

> 拿着 `publicApiKey` 从巴塞利姆控制台。 确保使用公用API密钥.

```tsx

function Page({ child }) {

return (
    <BaselimeRum apiKey={publicApiKey}>
        {child}
    </BaselimeRum>)
}
```

您的应用程序的每个页面视图自动抓取以下数据:

-   `timezone`
-   `language`
-   `os`
-   `userAgent`
-   `url`
-   `device`
-   `country`
-   `city`

## 网络维度

此外,你可以启用捕获 [网络元件](https://web.dev/vitals/) 从您的反应应用程序。 使用 `enableWebVitals` 道具 (英语).

-   [时间到第一个字节( TTFB)](https://web.dev/ttfb/)
-   [内容最丰富的涂料( LCP)](https://web.dev/lcp/)
-   [第一次输入延迟( FID)](https://web.dev/fid/)
-   [累积布局( CLS)](https://web.dev/cls/)

在您的应用程序上加载此内容, 以避免重新发送网络重要数据 .

```tsx
import { BaselimeRum } from '@baselime/react-rum';

function Page({ child }) {

return (
    <BaselimeRum apiKey={publicApiKey} enableWebVitals>
        {child}
    </BaselimeRum>)
}
```

* * *

## 抓取错误

BaselimeRum 自动捕获并发送应用程序中任何未处理的错误到 Baselime.

```tsx
import { BaselimeRum } from '@baselime/react-rum';

function Page({ child }) {

return (
    <BaselimeRum apiKey={publicApiKey} enableWebVitals fallback={<div>Something went wrong</div>}>
        {child}
    </BaselimeRum>)
}
```

### 边界

为终端用户提供更好的 UX , 请使用 React [边界](https://legacy.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries)。 。 。 .

BaseimeErrorBonborary捕获其任何子组件的错误,向Baseime报告错误. 它与 `<BaselimeRum />` 组件使所有出错都与页面加载和用户会话相关.

```jsx
import { BaselimeErrorBoundary } from '@baselime/react-rum';

function UserProfile({ child }) {

return (<BaselimeErrorBoundary fallback={<div>Could not display your user profile</div>}>
            <UserProfileImage />
            <UserName />
            <UserBiography />
        </BaselimeErrorBoundary>
    )
}
```

> 这是基于优秀的 [反应 - 过度边界](https://www.npmjs.com/package/react-error-boundary) 项目.

### 捕获例外

边界不抓取 [事件处理器内部出错](https://legacy.reactjs.org/docs/error-boundaries.html#how-about-event-handlers)。以抓住例外

```jsx
import { useBaselimeRum } from '@baselime/react-rum';

function MyButtonComponent() {
    const { captureException } = useBaselimeRum();

    function handleClick(e) {
        try { 
                 // Do something that could throw  
        } catch (error) {
            // sends errors to Baselime so they can be fixed   
            captureException(error)
       }
    }

    return <button onClick={handleClick}>Click Me</button>
}
```

* * *

## 自定义事件

抓取自定义事件用于分析和监测. 像木头,但拥有一切的 贝西米.

`sendEvent(message: string, payload)`

```jsx
import { useBaselimeRum } from '@baselime/react-rum';

function CheckoutComponent() {
    const { sendEvent } = useBaselimeRum();

    function handleClick() {

        const checkoutSession = await createImaginaryCheckoutSession()
        sendEvent("Checkout Started", {
            ...checkoutSession
        })
    }

    return <button onClick={handleClick}>Checkout</button>
}

```

* * *

## 设置活动的用户

从另一个组件设置用户然后调用

```tsx
import { useBaselimeRum } from '@baselime/react-rum';

function UserCard({ child }) {
    const { setUser } = useBaselimeRum();

    function login(user) {

        setUser(user.id);
    }
    return (
        <Button onClick={login}>Login</Button>
    }
```

## 使用您的数据

获取数据后,您可在 [巴塞尔控制台](https://console.baselime.io/)。您可以根据真实用户监测指标创建仪表板和提示.

## 道具

| 参数 | 说明 |
| --- | --- |
| `apiKey` | 您用于认证和授权的 Baselime API 密钥 . |
| `enableWebVitals` | (可选)布尔旗,表示是否允许跟踪网络生命特征. |
| `enableLocal` | (可选)布尔旗表示是否启用本地跟踪. |
| `dataset` | (备选) 用于存储数据的数据集 。 默认为 `web`。 。 。 . |
| `service` | 正在监测申请名称。 默认主机名 . |
| `fallback` | 程序崩溃时倒置的 UI 组件 |

## 许可证

2023年巴塞尔美有限公司

根据麻省理工学院许可证分发`The MIT License`) (中文(简体) ).

见 [自由主义](https://npmcn.com/package/%40baselime/react-rum/LICENSE) 更多信息.

## 常见问题

### @baselime/react-rum 是什么？

优化您反应应用程序的真实世界性能

### 如何安装 @baselime/react-rum？

在项目目录运行 npm install @baselime/react-rum，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @baselime/react-rum 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @baselime/react-rum 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @baselime/react-rum 可以商用吗？

@baselime/react-rum 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @baselime/react-rum 的下载量有多少？

根据 npm 官方下载统计，@baselime/react-rum 在 2026/10/08 – 2026/11/06 这 30 天内被下载 28,340 次，日均约 945 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @baselime/react-rum 还在维护吗？

最新版本 0\.3\.1 发布于 2024/09/09（2 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/09/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。