Error tracking for Remix loaders, actions, and server rendering with automatic breadcrumbs.
Remix Integration
Error tracking for Remix applications. Wraps loaders and actions with automatic error capture, provides a drop-in handleError export, and tracks client-side navigation. Sensitive headers are stripped and form data keys (never values) are captured for debugging.
npm install @codmir/sdkQuick Start
Server (entry.server.tsx)
import * as Codmir from '@codmir/sdk/remix';
Codmir.init({
dsn: process.env.CODMIR_DSN,
environment: process.env.NODE_ENV,
});
// Drop-in error handler
export const handleError = Codmir.handleError;Client (entry.client.tsx)
import * as Codmir from '@codmir/sdk/remix';
Codmir.init({ dsn: window.ENV.CODMIR_DSN });
Codmir.setupBrowserTracking();
startTransition(() => {
hydrateRoot(document, <RemixBrowser />);
});Wrapping Loaders and Actions
wrapLoader
Wraps a loader with error tracking and request breadcrumbs. Errors are captured then re-thrown so Remix error boundaries still work.
import { wrapLoader } from '@codmir/sdk/remix';
import { json } from '@remix-run/node';
export const loader = wrapLoader(async ({ request, params }) => {
const user = await getUser(params.userId);
return json({ user });
});wrapAction
Wraps an action with error tracking. Captures form data keys (never values) for debugging context.
import { wrapAction } from '@codmir/sdk/remix';
import { json } from '@remix-run/node';
export const action = wrapAction(async ({ request }) => {
const form = await request.formData();
await updateUser(form);
return json({ ok: true });
});Server Rendering Errors
Capture errors during server-side rendering in entry.server.tsx:
import { captureRemixServerError } from '@codmir/sdk/remix';
import { renderToPipeableStream } from 'react-dom/server';
export default function handleRequest(request, status, headers, remixContext) {
return new Promise((resolve, reject) => {
const stream = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onError(error) {
captureRemixServerError(error, request);
},
}
);
});
}Configuration
import { init } from '@codmir/sdk/remix';
init({
dsn: process.env.CODMIR_DSN,
environment: 'production',
// Loader/action capture (both default to true)
captureLoaderErrors: true,
captureActionErrors: true,
// Track client-side navigation (default: true)
captureRouteChanges: true,
// Capture Response errors (status >= 400, default: true)
captureResponseErrors: true,
});Config Reference
| Option | Type | Default | Description |
|---|---|---|---|
captureLoaderErrors | boolean | true | Capture errors thrown in wrapped loaders |
captureActionErrors | boolean | true | Capture errors thrown in wrapped actions |
captureRouteChanges | boolean | true | Track navigation as breadcrumbs |
captureResponseErrors | boolean | true | Capture Response errors with status >= 400 |
Browser Tracking
Call setupBrowserTracking() in entry.client.tsx to enable:
- Global error and unhandled rejection capture
- Route change tracking via history API
import { setupBrowserTracking } from '@codmir/sdk/remix';
setupBrowserTracking();TypeScript Support
import type {
RemixConfig,
OverseerConfig,
UserContext,
Breadcrumb,
SeverityLevel,
} from '@codmir/sdk/remix';