Skip to content
fintcorePublic

About

Lightweight, Sentry-style error monitoring SDK for React and the browser: errors, breadcrumbs, PII scrubbing and pluggable transports.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

2 stars

Watchers

0 watching

Forks

Repository files navigation

CoreWatch

Lightweight, Sentry-style error monitoring for React, React Native and the browser.
Capture errors with full context, keep personal data out, send events wherever you want.

npm version CI bundle size zero dependencies TypeScript types included MIT license

Getting started · Configuration · React · Transports · Privacy · React Native · Platforms


CoreWatch captures what breaks in your frontend (uncaught errors, unhandled promise rejections, React render crashes, failed resources) together with the trail of what the user did before it happened. Every event is scrubbed of credentials and personal data before it leaves the SDK, and is delivered through transports you control.

It was built at DynamiCore to monitor production fintech apps that run on legacy and modern React stacks alike.

Features

  • 🪲 Automatic capture: uncaught errors, unhandled rejections and failed scripts, images or stylesheets.
  • ⚛️ React first: <ErrorBoundary> with component stacks, withErrorBoundary() and a useCaptureError() hook for event handlers and async code.
  • 🍞 Breadcrumbs: clicks, navigation, fetch/XHR requests, console warnings and Redux actions leading up to each error.
  • 🔒 Privacy by default: passwords, tokens, cards, emails, phones and Mexican identifiers (CURP, RFC, CLABE) are replaced with [Filtered].
  • 🎛️ Control the noise: sampling, ignoreErrors, duplicate suppression and a beforeSend hook.
  • 🚚 Pluggable transports: console for development, HTTP with a queue and retries, or your own in a few lines.
  • 🪶 Small and safe: zero runtime dependencies, no side effects on import, never throws into your app.
  • 📱 React Native and Expo: same package and imports; Metro picks the native entry with crash, promise, touch, navigation and app lifecycle capture.
  • 🧩 Built for more platforms: a platform-agnostic core with small adapters per runtime (Node is next).

Install

npm install @dynamicore/corewatch
yarn / pnpm
yarn add @dynamicore/corewatch
pnpm add @dynamicore/corewatch

Requirements: React 16.8+ (only for the React APIs). Works with webpack 4/5 (including Create React App), Vite, Rollup and esbuild. The published code is already transpiled for browsers matching >0.2%, not dead.

Quick start

1. Initialize in a file imported before anything else:

// src/instrument.js
import * as CoreWatch from '@dynamicore/corewatch';

CoreWatch.init({
  project: 'my-app',
  environment: process.env.NODE_ENV,
  release: process.env.REACT_APP_VERSION,
});
// src/index.js
import './instrument'; // first line

2. Catch render errors with an error boundary:

import { ErrorBoundary } from '@dynamicore/corewatch/react';

<ErrorBoundary fallback={({ eventId, reset }) => <CrashScreen eventId={eventId} onRetry={reset} />}>
  <App />
</ErrorBoundary>

3. Add context and capture what you handle yourself:

import { setUser, setTag, captureException, logger } from '@dynamicore/corewatch';

setUser({ id: account.id, role: account.role });
setTag('feature', 'new-checkout');

try {
  await payments.confirm(order);
} catch (error) {
  captureException(error, { orderId: order.id });
}

logger.warn('Slow response', { durationMs: 5300 });

By default events are printed to the browser console, so you can try it without any backend. When you are ready, add a transport:

import { init, createConsoleTransport, createHttpTransport } from '@dynamicore/corewatch';

init({
  project: 'my-app',
  transports: [createConsoleTransport(), createHttpTransport({ baseUrl: process.env.REACT_APP_API_URL })],
});

What an event looks like

{
  "eventId": "1a0fedc7cef584b49311869581000000",
  "level": "error",
  "message": "TypeError: Cannot read properties of undefined (reading 'name')",
  "exception": {
    "type": "TypeError",
    "value": "Cannot read properties of undefined (reading 'name')",
    "stack": [{ "function": "BrokenWidget", "filename": "https://app.example.com/static/js/70.chunk.js", "lineno": 1903, "colno": 25 }]
  },
  "mechanism": "react.errorBoundary",
  "project": "my-app",
  "release": "1.4.2",
  "environment": "production",
  "user": { "id": "7eb4f765", "email": "[Filtered]" },
  "breadcrumbs": [
    { "category": "http", "message": "GET https://api.example.com/dashboard → 200" },
    { "category": "ui.click", "message": "button \"Show report\"" }
  ],
  "context": { "url": "https://app.example.com/dashboard", "browser": { "name": "Chrome", "version": "154.0.0.0" }, "os": { "name": "macOS" } },
  "sdk": { "name": "corewatch", "version": "0.2.0" }
}

Full reference: Event schema.

Entry points

Import Contents
@dynamicore/corewatch init(), capture and scope API, logger, transports, Redux enhancer, React bindings
@dynamicore/corewatch/react ErrorBoundary, withErrorBoundary, useCaptureError
@dynamicore/corewatch/core Platform-agnostic core for writing adapters (no DOM, no React)
@dynamicore/corewatch/native React Native entry (Metro resolves it automatically for the root import)

Shipped as ES modules and CommonJS, with TypeScript declarations for every entry point.

API at a glance

Function Description
init(options) Starts the SDK. Idempotent. Options
captureException(error, extra?) Reports an error. Returns the eventId or null if dropped.
captureMessage(message, level?, extra?) Reports a message ('info' by default).
logger.fatal / error / warn / info / debug Shortcuts for captureMessage with a level.
setUser(user) / setTag(key, value) / setExtra(key, value) Context attached to every following event.
addBreadcrumb(crumb) Adds a custom step to the trail.
getClient() The active client, or null before init().
flush() Sends queued events now (resolves when transports are done).
createReduxEnhancer(options?) Redux actions as breadcrumbs and state as context. Redux
createConsoleTransport() / createHttpTransport() Built-in transports. Transports

Platform support

Platform Status
React web (CRA, Vite, Next.js client, webpack) ✅ Supported
Browser JavaScript without React ✅ Supported
Server-side rendering ⚠️ Safe to import; call init() on the client
React Native (Expo and bare) ✅ Supported
Node.js 🗺️ Planned

The core has no browser dependencies; each runtime plugs in through a small platform adapter. See Platforms and architecture for the design and the roadmap.

Documentation

Contributing

Issues and pull requests are welcome. Read the contributing guide to set up the project, and the security policy to report vulnerabilities privately.

License

MIT © DynamiCore

About

Lightweight, Sentry-style error monitoring SDK for React and the browser: errors, breadcrumbs, PII scrubbing and pluggable transports.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages