@syntropysoft/syntropyfront

SyntropyFront

Capture frontend errors and user actions. One line. ~34 KB. Zero dependencies.

What it does

When something breaks in production, you get what broke and what the user did before it. No giant platform, no per-seat pricing. One import and it starts capturing:

• Errors — uncaught exceptions and unhandled promise rejections
• Clicks — on buttons, links, and interactive elements (throttled)
• HTTP — fetch calls (URL, method; no sensitive headers)
• Breadcrumbs — timeline you can extend with addBreadcrumb()

Optional: PII masking, sampling, offline retry (IndexedDB), and sending to your endpoint or onError callback. That’s it. It’s not a full APM; it’s enough to stop debugging blind.

Why use it

Network: Data is sent only to the endpoint or callback you configure. No third parties, no telemetry. See SECURITY.md.

Quick Start

pnpm add @syntropysoft/syntropyfront

In your app entry (e.g. main.jsx or index.js):

import syntropyFront from '@syntropysoft/syntropyfront';
// Done. Errors and breadcrumbs go to the console by default.

To send to your backend or handle in code:

syntropyFront.configure({
  endpoint: 'https://your-api.com/errors',
  headers: { 'Authorization': 'Bearer YOUR_TOKEN' },
  // optional: samplingRate, batchSize, batchTimeout, usePersistentBuffer, onError
});

Main API

Optional: PII masking

Sensitive data is masked before leaving the client (emails, tokens, cards, SSN/phone patterns). You can add custom rules via configure({ maskingRules: [...] }). See the full config example below.

Advanced configuration

syntropyFront.configure({
  endpoint: 'https://your-api.com/v1/telemetry',
  headers: { 'Authorization': 'Bearer token', 'X-Environment': 'production' },
  samplingRate: 0.1,           // send 10% of events
  batchSize: 10,
  batchTimeout: 5000,
  usePersistentBuffer: true,   // retry when offline (IndexedDB)
  onError: (payload) => {
    console.warn('Error captured:', payload.type);
    return payload;
  },
  context: { device: true, window: ['url', 'title'], storage: false }
});

Context fields (when enabled): device, window, network, session, ui, performance, storage. See docs in the repo for the full list.

Design (short)

Built to be predictable and safe: SOLID-style modules, pure functions where it matters, PII masking by default. Data goes only to your endpoint or callback—see SECURITY.md.

Quality

• 87% test coverage
• Zero runtime dependencies
• Mutation testing (Stryker) >71%

Examples

examples/README.md — Overview and how to run each demo.

Contributing / local dev

git clone https://github.com/Syntropysoft/syntropyfront.git
cd syntropyfront
pnpm install
pnpm test
pnpm run build

License

Apache-2.0 — use in commercial and open-source projects.

Developed for a clearer and more stable web.