Web Eye SDK

A comprehensive web monitoring SDK for behavior tracking, error monitoring, and performance analysis in frontend applications.

Features

• Behavior Tracking: Page changes, click events, user interactions
• Error Monitoring: JavaScript errors, Vue errors, React error boundaries
• Performance Monitoring: LCP (Largest Contentful Paint), fetch performance
• Real-time Reporting: Batch reporting with lazy loading

Installation

# npm
npm install web-eye-sdk

# yarn
yarn add web-eye-sdk

# pnpm
pnpm add web-eye-sdk

Quick Start

Browser (Script Tag)

<script src="./node_modules/web-eye-sdk/dist/monitor.js"></script>
<script>
    monitor.init({
        url: 'http://your-server/reportData'
    });
</script>

ES Modules

import monitor from 'web-eye-sdk';

monitor.init({
    url: 'http://your-server/reportData'
});

Vue.js

import Vue from 'vue';
import monitor from 'web-eye-sdk';

Vue.use(monitor, {
    url: 'http://your-server/reportData'
});

React

import { errorBoundary } from 'web-eye-sdk';

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

Configuration

monitor.init({
    url: 'http://your-server/reportData',  // Required: Data reporting endpoint
    appId: 'your-app-id',                  // Optional: Application identifier
    userId: 'user-123',                    // Optional: User identifier
    // More configuration options...
});

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

License

MIT