observare-react v0.1.7
Observare React
Observare-react
provides a observer that can be used to observe changes and collect usage metrics for an application.
Installation
- with
npm
:npm install observare-react
- with
yarn
:yarn add observare-react
- with
pnpm
:pnpm add observare-react
Getting Started
index.tsx
import React from 'react';
import ObservareClient, { ObservareConfig } from 'observare-react';
const config: ObservareConfig = {
retry: true,
eager: false, // don't do `eager` in production
maxLogs: 15, // defaults to 15
isSupabase: true,
supabaseConfig: {
url: '<supabase url>',
key: '<supabase key>',
table: 'logs' // set your table name
}
};
Supabase Config:
After creating a project, make sure you have a table which matches this schema:
export interface BrowserLog {
uniqueId: String;
time: Date;
phase: String;
actualDuration: number;
baseDuration: number;
startTime: number;
commitTime: number;
path: String;
domain: String;
}
Advanced Usage
Unique IDs:
To Identify Requests from Users, one can use uniqueId
which defaults to a randomly generated UUID
that persists in storage for future identifications. You can also provide your own uniqueId
by passing it in the config
object or even by storing it in the localStorage
with the key observare_uniqueId
.
Example:
const config: ObservareConfig = {
retry: true,
eager: false, // don't do `eager` in production
maxLogs: 15, // defaults to 15
isSupabase: true,
uniqueId: getUserEmail(), // get the user's email.
supabaseConfig: {
url: '<supabase url>',
key: '<supabase key>',
table: 'logs' // set your table name
}
};
Incase the user is not logged in during first load, you can do it once user has been authenticated by using the setUniqueId function exported by the package: // TODO: not implemented YET
import { setUniqueId } from 'observare-react';
setUniqueId('abc@xyz.com');
Or you can also set it in the localStorage with the key observare_uniqueId
.
localStorage.setItem('observare_uniqueId', 'abc@xyz.com')'