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/sdk

Quick 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';

Next.js

Next.js App Router integration

Express

Express.js middleware integration

Browser

Vanilla JS browser integration