Baselime 反应真实用户监视

巴塞尔 使下一代云应用具有可观察性.

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

使用量

npm i --save @baselime/react-rum

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

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

function Page({ child }) {

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

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

• timezone
• language
• os
• userAgent
• url
• device
• country
• city

网络维度

此外,你可以启用捕获 网络元件 从您的反应应用程序。 使用 enableWebVitals 道具 (英语).

• 时间到第一个字节( TTFB)
• 内容最丰富的涂料( LCP)
• 第一次输入延迟( FID)
• 累积布局( CLS)

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

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

function Page({ child }) {

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

抓取错误

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

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

function Page({ child }) {

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

边界

为终端用户提供更好的 UX , 请使用 React 边界。 。 。 .

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

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

function UserProfile({ child }) {

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

这是基于优秀的 反应 - 过度边界 项目.

捕获例外

边界不抓取 事件处理器内部出错。以抓住例外

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)

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>
}

设置活动的用户

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

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

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

    function login(user) {

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

使用您的数据

获取数据后,您可在 巴塞尔控制台。您可以根据真实用户监测指标创建仪表板和提示.

道具

许可证

2023年巴塞尔美有限公司

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

见 自由主义 更多信息.