npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@baselime/react-rum

v0.3.1

Published

Optimise the real world performance of your react applications

Downloads

18,621

Readme

Baselime React Real User Monitoring

Documentation Latest Release License

Baselime enables observability for the next generation of cloud applications.

This library enables you to monitor real-user behaviour of your React and Next.js applications.

Usage

npm i --save @baselime/react-rum

Add the BaselimeRum Component at the root of your React application application.

Get the publicApiKey from the Baselime console. Make sure to use a public API key.


function Page({ child }) {

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

The following data is automatically captured for every page view of your application:

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

Web Vitals

Additionally, you can enable capturing web vitals from your React applications. Use the enableWebVitals prop.

Load this at the top of your application to avoid resending the web vital data.

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

function Page({ child }) {

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

Capture Errors

BaselimeRum automatically captures and sends any Unhandled Errors in your application to Baselime.

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

function Page({ child }) {

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

Error Boundaries

To provide a better UX for end users, use React Error Boundaries.

The BaselimeErrorBoundary catches errors in any of its child components, reports the error to Baselime. It works in conjunction with the <BaselimeRum /> Component so that all errors are correlated by Page Load, and User Session.

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

function UserProfile({ child }) {

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

This is based on the excellent react-error-boundary project.

Capture Exceptions

Error Boundaries do not catch errors inside event handlers. To catch Exceptions

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

Custom Events

Capture custom events for analytics and monitoring. Like logs but with all the power of Baselime.

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

Setting the active user

To set the User from another component then call

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

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

    function login(user) {

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

Using your data

Once the data is captured, you can query, search and analyse your data in the Baselime console. You can create dashboards and alerts based on the Real User Monitoring metrics.

Props

| Parameter | Description | |---------------------|---------------------------------------------------------------------------------| | apiKey | Your Baselime API key for authentication and authorization. | | enableWebVitals | (Optional) A boolean flag indicating whether to enable tracking of web vitals. | | enableLocal | (Optional) A boolean flag indicating whether to enable local tracking. | | dataset | (Optional) The dataset to store the data to. Defaults to web. | | service | The name of the application being monitored. Defaults to the hostname. | | fallback | A fallback UI component in case the application crashes |

License

© Baselime Limited, 2023

Distributed under MIT License (The MIT License).

See LICENSE for more information.