Citadel error tracking SDK for JavaScript and TypeScript
npm install @citadel-logs/error-trackingZero-dependency error tracking SDK for JavaScript and TypeScript with React bindings.
``bash`
npm install @citadel/error-tracking
`typescript
import { init } from '@citadel/error-tracking';
init({
endpoint: 'https://citadel.example.com',
apiKey: 'ck_...',
environment: 'production',
release: 'v1.2.3',
});
`
`tsx
import { CitadelErrorBoundary } from '@citadel/error-tracking/react';
function App() {
return (
);
}
`
`tsx
import { useCitadelError } from '@citadel/error-tracking/react';
function MyComponent() {
const { captureError, captureMessage } = useCitadelError();
const handleClick = async () => {
try {
await riskyOperation();
} catch (error) {
captureError(error);
}
};
return ;
}
`
`tsx
import { withCitadelErrorBoundary } from '@citadel/error-tracking/react';
const MyComponent = () =>
export default withCitadelErrorBoundary(MyComponent, {
fallback:
Features
- Zero Dependencies: Vanilla JavaScript, <5KB minified+gzipped
- Tree-Shakeable: React bindings only loaded when imported
- TypeScript Support: Full type definitions included
- Automatic Batching: Errors batched and sent every 5s
- Rate Limiting: Client-side limit of 100 errors/minute
- Defensive: Graceful degradation if Citadel unreachable
- React 18+ Compatible: Works with concurrent features
API Reference
$3
####
init(config: CitadelConfig)Initialize the SDK.
`typescript
init({
endpoint: 'https://citadel.example.com',
apiKey: 'ck_...',
environment: 'production', // optional
release: 'v1.2.3', // optional
captureConsoleErrors: true, // optional
beforeSend: (error) => error, // optional
sampleRate: 1.0, // optional (0-1)
debug: false, // optional
});
`####
captureError(error: Error, context?: ErrorContext)Capture an error.
`typescript
try {
riskyOperation();
} catch (error) {
captureError(error, {
extra: { userId: '123' },
});
}
`####
captureMessage(message: string, context?: ErrorContext)Capture a message.
`typescript
captureMessage('Something unexpected happened', {
extra: { details: 'Additional context' },
});
`####
setContext(context: ErrorContext)Set global context for all errors.
`typescript
setContext({
user: { id: '123', email: 'user@example.com' },
extra: { appVersion: '1.0.0' },
});
`$3
####
Error boundary component.
`tsx
fallback={ } // or function
onError={(error, componentStack) => {}}
context={{ extra: { page: 'dashboard' } }}
>
####
withCitadelErrorBoundary(Component, options?)HOC to wrap component with error boundary.
`tsx
const WrappedComponent = withCitadelErrorBoundary(MyComponent, {
fallback: Error,
onError: (error, stack) => console.log(error),
context: { extra: { component: 'MyComponent' } },
});
`####
useCitadelError()Hook for manual error reporting.
`tsx
const { captureError, captureMessage, setContext, isInitialized } =
useCitadelError();
``- Infinite Loop Protection: Error boundary never throws
- Stack Truncation: Stack traces limited to 50KB
- Component Stack Truncation: Limited to 50 frames
- Rate Limiting: Max 100 errors/minute client-side
- Graceful Degradation: App continues if Citadel unreachable
- Core SDK: ~3KB minified+gzipped
- React bindings: ~2KB minified+gzipped (when imported)
- Total (with React): ~5KB minified+gzipped
MIT