@perfio/web-vitals NPM

@perfio/web-vitals

Perfio is a service for collecting and analyzing performance metrics. The @perfio/web-vitals library helps gather these metrics effectively. This README provides instructions on how to use the library in different environments, such as Next.js and browser environments.

Installation

You can install the @perfio/web-vitals library using npm or yarn:

npm install @perfio/web-vitals

yarn add @perfio/web-vitals

Usage

Next.js Integration

For integrating with Next.js, you can use the entry point @perfio/web-vitals/next. This entry point is designed to work seamlessly with the Next.js framework.

Setup

Import the Provider: In your Next.js application, import the PerfioProvider from @perfio/web-vitals/next.
```
import { PerfioProvider } from '@perfio/web-vitals/next';
```

Add to Your Application.

import { PerfioProvider } from '@perfio/web-vitals/next';

import '../styles/globals.css';

function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NEXT_PUBLIC_PERFIO_TOKEN && (
          <PerfioProvider token={process.env.NEXT_PUBLIC_PERFIO_TOKEN} />
        )}
      </body>
    </html>
  );
}

export default RootLayout;

This setup ensures that performance metrics are collected and sent to Perfio for analysis.

Browser Integration

For usage in a browser environment, you have two options: importing the library via a script with type module or using the default index entry point.

Import via Script

Include Script Tag: Add the following script tag to your HTML file to load the library.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@perfio/web-vitals@1/browser.esm.js?token=1234567890"
></script>

This approach allows you to load the library directly in the browser and start collecting. Replace 1234567890 with your Perfio token.

Default Import

Import the Library: In your JavaScript file, import the reportMetrics function.
```
import { reportMetrics } from '@perfio/web-vitals';
```
Call the Function: Simply call the reportMetrics function to start collecting performance metrics.
```
reportMetrics({
  token: '123456789',
});
```

This setup is suitable for most standard web projects where you want to collect and report performance metrics to Perfio.

web-vitals monitoring performance analytics perfio

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago