jayden-sdk

A lightweight web performance monitoring, error tracking and behavior analytics SDK.

Features

• Performance Monitoring - LCP, FCP, FP, resource loading, XHR/Fetch timing
• Error Tracking - JS runtime errors, resource load failures, unhandled promise rejections, Vue/React integration
• Behavior Analytics - Click events, page navigation, page views (PV)

Installation

npm install jayden-sdk

Usage

Basic (ESM)

import { init } from 'jayden-sdk';

init({
  url: 'https://your-server.com/api/report',
  projectName: 'my-app',
  appId: 'your-app-id',
  userId: 'user-123',
  enable: {
    performance: true,
    error: true,
    behavior: true,
  },
});

CDN (IIFE)

<script src="https://unpkg.com/jayden-sdk/dist/monitor.js"></script>
<script>
  monitor.init({
    url: 'https://your-server.com/api/report',
    projectName: 'my-app',
    appId: 'your-app-id',
    userId: 'user-123',
    enable: {
      performance: true,
      error: true,
      behavior: true,
    },
  });
</script>

Vue Integration

import { install } from 'jayden-sdk';

const app = createApp(App);
install(app, {
  url: 'https://your-server.com/api/report',
  projectName: 'my-app',
  appId: 'your-app-id',
});

React Integration

import { errorBoundary } from 'jayden-sdk';

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    errorBoundary(error, info);
  }
  render() {
    return this.props.children;
  }
}

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | url | string | '' | Report endpoint URL (required) | | projectName | string | '' | Project name | | appId | string | '' | Application ID | | userId | string | '' | Current user ID | | isImageUpload | boolean | false | Use image beacon for reporting | | batchSize | number | 5 | Number of events to batch before sending |

License

MIT