@pack/errors-react

React bindings for Pack error tracking.

Install

npm install @pack/errors-react

Exports

• usePackErrorTrack(isPreview?: boolean, errorTracking?, sessionId?)
• PackErrorBoundary (errorTracking?, sessionId?, fallback? props)

Usage

import { PackErrorBoundary, usePackErrorTrack } from '@pack/errors-react';

const errorTracking = {
  dsn: 'https://[email protected]/ingest/PROJECT_ID',
};

function ErrorTracking({ isPreview, sessionId }: { isPreview: boolean; sessionId?: string }) {
  usePackErrorTrack(isPreview, errorTracking, sessionId);
  return null;
}

export function App({ isPreview, sessionId }: { isPreview: boolean; sessionId?: string }) {
  return (
    <>
      <ErrorTracking isPreview={isPreview} sessionId={sessionId} />
      <PackErrorBoundary
        errorTracking={errorTracking}
        sessionId={sessionId}
        fallback={<div>Something went wrong.</div>}
      >
        <Routes />
      </PackErrorBoundary>
    </>
  );
}

Runtime config

Provide tracking config directly to the hook and boundary:

• dsn: https://PUBLIC_KEY@host/ingest/PROJECT_ID
• sessionId (optional): server session id for client/server correlation. If omitted, the client attempts to read session_id from the __pack cookie.

Behavior

• Tracks three client-side error types:
  • uncaught (window error)
  • unhandledrejection (window unhandledrejection)
  • react (PackErrorBoundary)
• No events are sent when:
  • isPreview is true
  • errorTracking?.dsn is missing
• Dedupes repeated errors per pathname and limits event volume:
  • max 10 errors per page
  • max 50 errors per session (sessionStorage)
• Uses keepalive: true for background-safe event delivery.

Error boundary fallback

fallback may be:

• a React node, or
• a function receiving { error, resetError }

Example:

<PackErrorBoundary
  errorTracking={errorTracking}
  fallback={({ error, resetError }) => (
    <div>
      <p>{error.message}</p>
      <button onClick={resetError}>Try again</button>
    </div>
  )}
>
  <Routes />
</PackErrorBoundary>

Development

yarn
yarn build