{"_id":"@andrewkepson/react-error-boundary","_rev":"4-8d384886af9272799f4f454f4e02ab3c","name":"@andrewkepson/react-error-boundary","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@andrewkepson/react-error-boundary","version":"0.1.0","keywords":["react","error-boundary","error-handling","fallback","react-component"],"license":"MIT","_id":"@andrewkepson/react-error-boundary@0.1.0","maintainers":[{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"}],"homepage":"https://github.com/AndrewKepson/react-error-boundary#readme","bugs":{"url":"https://github.com/AndrewKepson/react-error-boundary/issues"},"dist":{"shasum":"8480b1ec85a7f8b02b46f181029806496823896f","tarball":"https://registry.npmjs.org/@andrewkepson/react-error-boundary/-/react-error-boundary-0.1.0.tgz","fileCount":7,"integrity":"sha512-q6d6xE5EY8yDqBmH+mRd4afcWFN5HB93s3fEADW0Uv5TvZ2RSvOYCvsrQY62EetMFnc1wB7fhhU4svBg7JvbZA==","signatures":[{"sig":"MEYCIQDTeWpToQYwmnaMrojg0glxAyOS71bc/sebJnayX/q2ggIhAI9IymcLY8AGrDY2fFL8sPkL1LLPDjjcnWCf7G766Qow","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11060},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"9205122097b9c52b0526fd701a5cd85ae6883f68","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup src/index.ts --format esm,cjs --dts","typecheck":"tsc --noEmit","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build"},"_npmUser":{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"},"repository":{"url":"git+https://github.com/AndrewKepson/react-error-boundary.git","type":"git"},"_npmVersion":"11.12.1","description":"React error boundary component with fallback, reset, and error callback support","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","jsdom":"^29.1.1","react":"^19.2.7","eslint":"^10.7.0","vitest":"^4.1.10","react-dom":"^19.2.7","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","typescript-eslint":"^8.64.0","@vitest/coverage-v8":"^4.1.10","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^7.1.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-error-boundary_0.1.0_1784321472845_0.19981824007837967","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@andrewkepson/react-error-boundary","version":"0.1.1","keywords":["react","error-boundary","error-handling","fallback","react-component"],"license":"MIT","_id":"@andrewkepson/react-error-boundary@0.1.1","maintainers":[{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"}],"homepage":"https://github.com/AndrewKepson/react-error-boundary#readme","bugs":{"url":"https://github.com/AndrewKepson/react-error-boundary/issues"},"dist":{"shasum":"c6d2ae475e6ee2ab856e767ece656827aa47bb5b","tarball":"https://registry.npmjs.org/@andrewkepson/react-error-boundary/-/react-error-boundary-0.1.1.tgz","fileCount":7,"integrity":"sha512-otYrMzkk06UQqWtOZxZxM2PrfSnkRwekIpOoUP8d8RRVfuesttLdgjOSEsARdAz1RHcqDVRtMsgYuxncqQGjcw==","signatures":[{"sig":"MEQCICB/ToQRwFjB9iENbk18kIVslgqab35spNRS/BIMeoqEAiBCaufrO7seXCwP+l+n26nSKJCSaoBmCaib2x2eGv1/lg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11393},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"04f5f0a2bb2f9428352684b5cad34775afd79ea9","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup src/index.ts --format esm,cjs --dts","typecheck":"tsc --noEmit","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build"},"_npmUser":{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"},"repository":{"url":"git+https://github.com/AndrewKepson/react-error-boundary.git","type":"git"},"_npmVersion":"11.12.1","description":"React error boundary component with fallback, reset, and error callback support","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","jsdom":"^29.1.1","react":"^19.2.7","eslint":"^10.7.0","vitest":"^4.1.10","react-dom":"^19.2.7","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","typescript-eslint":"^8.64.0","@vitest/coverage-v8":"^4.1.10","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^7.1.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/react-error-boundary_0.1.1_1784322502837_0.3550849790216457","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@andrewkepson/react-error-boundary","version":"0.1.2","keywords":["react","error-boundary","error-handling","fallback","react-component"],"license":"MIT","_id":"@andrewkepson/react-error-boundary@0.1.2","maintainers":[{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"}],"homepage":"https://github.com/AndrewKepson/react-error-boundary#readme","bugs":{"url":"https://github.com/AndrewKepson/react-error-boundary/issues"},"dist":{"shasum":"66a079d5c4c05bbaa841546efdb9d72c51f1ebbd","tarball":"https://registry.npmjs.org/@andrewkepson/react-error-boundary/-/react-error-boundary-0.1.2.tgz","fileCount":7,"integrity":"sha512-nLaFyl9VO3ggXGYfuSqN2vT4moxdDyQRRzai8Efxc8G3gbKdH+vy1oImlSu2y/QSiW2fYpSX4wbq5Q/Ubi98tg==","signatures":[{"sig":"MEUCIEJGyXzefg6cCv2NG1y0EVnoam4vpAyG/PDcYQSlje78AiEA5r377dMa0liH2kGuthO3d9AqNpNb2wVcLgQxjYVJ+Js=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13074},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"7dcc3b36b3e59699575a15c1c443a591c0dcfbf2","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup src/index.ts --format esm,cjs --dts","typecheck":"tsc --noEmit","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build"},"_npmUser":{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"},"repository":{"url":"git+https://github.com/AndrewKepson/react-error-boundary.git","type":"git"},"_npmVersion":"11.12.1","description":"React error boundary component with fallback, reset, and error callback support","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","jsdom":"^29.1.1","react":"^19.2.7","eslint":"^10.7.0","vitest":"^4.1.10","react-dom":"^19.2.7","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","typescript-eslint":"^8.64.0","@vitest/coverage-v8":"^4.1.10","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^7.1.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/react-error-boundary_0.1.2_1784323351051_0.5538624059366826","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@andrewkepson/react-error-boundary","version":"0.2.0","description":"React error boundary component with fallback, reset, and error callback support","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"keywords":["react","error-boundary","error-handling","fallback","react-component"],"engines":{"node":">=18"},"scripts":{"build":"tsup src/index.ts --format esm,cjs --dts","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","typecheck":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\"","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/AndrewKepson/react-error-boundary.git"},"license":"MIT","devDependencies":{"@eslint/js":"^10.0.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitest/coverage-v8":"^4.1.10","eslint":"^10.7.0","eslint-plugin-react-hooks":"^7.1.1","jsdom":"^29.1.1","react":"^19.2.7","react-dom":"^19.2.7","tsup":"^8.5.1","typescript":"^5.9.3","typescript-eslint":"^8.64.0","vitest":"^4.1.10"},"gitHead":"e41835990aee0f6820974aab176af7bac6824533","_id":"@andrewkepson/react-error-boundary@0.2.0","bugs":{"url":"https://github.com/AndrewKepson/react-error-boundary/issues"},"homepage":"https://github.com/AndrewKepson/react-error-boundary#readme","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-x2D+xQJD+yf28psXc8RKn1Q8dRYRalpS9DIPIIObkMkrw+dBLTooQzfrTrR8ia0mGatd+j8lX6ACBKwAXA5dIA==","shasum":"1f5275016e1c99e716557bcf59b210a36c5d2081","tarball":"https://registry.npmjs.org/@andrewkepson/react-error-boundary/-/react-error-boundary-0.2.0.tgz","fileCount":7,"unpackedSize":18781,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDrfmZ53jCS5fgsvr5wuiD85eRp9HPCg3IHd5Y57EJ+xAiEAnmH6Eh0+YQNNWoXbqbyarZiBugeqUzuT8RF9oLFoXQQ="}]},"_npmUser":{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"},"directories":{},"maintainers":[{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-error-boundary_0.2.0_1784325010059_0.8315824113539865"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-17T20:51:12.661Z","modified":"2026-07-17T21:50:10.331Z","0.1.0":"2026-07-17T20:51:12.976Z","0.1.1":"2026-07-17T21:08:22.960Z","0.1.2":"2026-07-17T21:22:31.190Z","0.2.0":"2026-07-17T21:50:10.189Z"},"bugs":{"url":"https://github.com/AndrewKepson/react-error-boundary/issues"},"license":"MIT","homepage":"https://github.com/AndrewKepson/react-error-boundary#readme","keywords":["react","error-boundary","error-handling","fallback","react-component"],"repository":{"type":"git","url":"git+https://github.com/AndrewKepson/react-error-boundary.git"},"description":"React error boundary component with fallback, reset, and error callback support","maintainers":[{"name":"andrewkepson","email":"websites@redrockswebdevelopment.com"}],"readme":"# @andrewkepson/react-error-boundary\n\nReact error boundary with fallback UI, reset, error callbacks, and context tagging.\n\n## Install\n\n```bash\nnpm install @andrewkepson/react-error-boundary\n```\n\nRequires React 16.8+.\n\n*Note: This package uses class components, which are client-side only. For Next.js App Router or other SSR frameworks, wrap usage in `\"use client\"` directives or use it in pages/layouts that render on the client.*\n\n## Usage\n\n### Default fallback\n\n```tsx\nimport { ErrorBoundary } from '@andrewkepson/react-error-boundary';\n\n<ErrorBoundary errorContext=\"CheckoutProviders\">\n  <CheckoutFlow />\n</ErrorBoundary>\n```\n\nRenders a minimal `role=\"alert\"` UI with the context.\n\n*Note: The default fallback does not render `error.message` to prevent accidentally leaking sensitive information (like API keys or internal file paths) into the DOM in production. If you need to display the error message to users, use a custom fallback render function.*\n\n### Custom fallback node\n\n```tsx\n<ErrorBoundary fallback={<FullPageError />}>\n  <App />\n</ErrorBoundary>\n```\n\n### Fallback render function with reset\n\nThe `fallback` render function runs during the boundary's own render, so defining the fallback UI inline here is fine — there's no separate component re-rendering to optimize. The `reset` callback it hands you is stable:\n\n```tsx\nfunction renderFallback(error: Error, reset: () => void) {\n  return (\n    <div role=\"alert\">\n      <p>{error.message}</p>\n      <button onClick={reset}>Retry</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary fallback={renderFallback}>\n      <Dashboard />\n    </ErrorBoundary>\n  );\n}\n```\n\nThis is the intended pattern for surfacing `error.message` — opt in explicitly where you control the context, rather than leaking it from the default fallback.\n\nHoisting `renderFallback` to module scope (as above) gives it a stable identity for free. Only reach for `useCallback` when the fallback must close over props/state from the parent **and** that parent re-renders often enough to matter — otherwise a plain function is the right call.\n\n### Async errors with `useErrorBoundary`\n\nFor async/data-loading errors, use `useErrorBoundary` to pass caught errors to the nearest boundary:\n\n```tsx\nimport { ErrorBoundary, useErrorBoundary } from '@andrewkepson/react-error-boundary';\n\nfunction UserProfile({ username }: { username: string }) {\n  const { showBoundary, resetBoundary } = useErrorBoundary();\n\n  async function loadProfile() {\n    try {\n      await fetchUserProfile(username);\n      resetBoundary();\n    } catch (err) {\n      if (err instanceof Error) {\n        showBoundary(err);\n      }\n    }\n  }\n\n  return (\n    <button onClick={loadProfile}>\n      Load profile\n    </button>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary fallback={<p>Could not load profile</p>}>\n      <UserProfile username=\"andrew\" />\n    </ErrorBoundary>\n  );\n}\n```\n\nThis hook returns `{ resetBoundary, showBoundary }` for handling errors in async flows within React components. Use it to manually trigger or clear errors within components protected by an `ErrorBoundary`.\n\n### Safe error message extraction with `getErrorMessage`\n\nUse `getErrorMessage` to safely extract error messages for display (handles non-Error objects):\n\n```tsx\nimport { ErrorBoundary, getErrorMessage } from '@andrewkepson/react-error-boundary';\n\nfunction renderFallback(error: Error) {\n  return (\n    <div role=\"alert\">\n      <p>{getErrorMessage(error)}</p>\n      {/* ... */}\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary fallback={renderFallback}>\n      <Dashboard />\n    </ErrorBoundary>\n  );\n}\n```\n\nThis is the intended pattern for surfacing `error.message` — opt in explicitly where you control the context, rather than leaking it from the default fallback.\n\n### Error reporting\n\n`onError` receives the error, React error info, and the boundary's `errorContext` — useful for attributing errors when one handler serves many boundaries. Define it as a named function rather than inline so a frequently re-rendering parent doesn't hand the boundary a new prop identity every render:\n\n```tsx\nfunction reportError(error: Error, errorInfo: ErrorInfo, errorContext?: string) {\n  sentry.captureException(error, {\n    tags: { boundary: errorContext },\n    extra: { componentStack: errorInfo.componentStack },\n  });\n}\n\nfunction Layout() {\n  return (\n    <ErrorBoundary errorContext=\"Sidebar\" onError={reportError}>\n      <Sidebar />\n    </ErrorBoundary>\n  );\n}\n```\n\nIf the handler needs values from the component's scope, wrap it in `useCallback` so its identity stays stable across renders — but only when it actually closes over changing values:\n\n```tsx\nfunction Layout({ userId }: { userId: string }) {\n  const handleError = useCallback(\n    (error: Error, errorInfo: ErrorInfo) => {\n      sentry.captureException(error, {\n        tags: { userId },\n        extra: { componentStack: errorInfo.componentStack },\n      });\n    },\n    [userId],\n  );\n\n  return (\n    <ErrorBoundary errorContext=\"Sidebar\" onError={handleError}>\n      <Sidebar />\n    </ErrorBoundary>\n  );\n}\n```\n\n### Auto-reset with resetKeys\n\nThe boundary resets when any key changes (compared with `Object.is`). Pair with route params or resource IDs so navigation clears the error state:\n\n```tsx\n<ErrorBoundary resetKeys={[userId]} fallback={<ErrorState />}>\n  <UserProfile userId={userId} />\n</ErrorBoundary>\n```\n\nThe inline `[userId]` array is intentional — the boundary compares keys by value, not by array identity, so a fresh array each render is harmless. Don't wrap it in `useMemo`.\n\n## Props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `children` | `ReactNode` | Tree to protect. |\n| `fallback` | `ReactNode \\| ((error, reset) => ReactNode)` | UI to show on error. Function form receives the error and a `reset` callback. Defaults to a minimal built-in UI (which omits `error.message` for security). |\n| `onError` | `(error, errorInfo, errorContext?) => void` | Called in `componentDidCatch`. Use for logging/reporting. |\n| `onReset` | `() => void` | Called when the boundary resets (manual or via `resetKeys`). |\n| `resetKeys` | `readonly unknown[]` | Boundary resets when any key changes. |\n| `errorContext` | `string` | Label for this boundary, rendered in the default fallback and passed to `onError`. |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}