{"id":20347637,"url":"https://github.com/jeron-diovis/react-app-error-boundary","last_synced_at":"2025-07-30T02:08:42.856Z","repository":{"id":65871976,"uuid":"437074235","full_name":"jeron-diovis/react-app-error-boundary","owner":"jeron-diovis","description":"Opt-out of react-error-overlay in your react-app","archived":false,"fork":false,"pushed_at":"2023-02-14T14:41:05.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-10T23:11:46.589Z","etag":null,"topics":["error-boundary","react-app","react-error-overlay"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeron-diovis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-10T18:17:09.000Z","updated_at":"2023-05-25T14:55:47.000Z","dependencies_parsed_at":"2023-02-22T13:31:12.650Z","dependency_job_id":null,"html_url":"https://github.com/jeron-diovis/react-app-error-boundary","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jeron-diovis/react-app-error-boundary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeron-diovis%2Freact-app-error-boundary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeron-diovis%2Freact-app-error-boundary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeron-diovis%2Freact-app-error-boundary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeron-diovis%2Freact-app-error-boundary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeron-diovis","download_url":"https://codeload.github.com/jeron-diovis/react-app-error-boundary/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeron-diovis%2Freact-app-error-boundary/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267797531,"owners_count":24145705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["error-boundary","react-app","react-error-overlay"],"created_at":"2024-11-14T22:17:24.307Z","updated_at":"2025-07-30T02:08:42.839Z","avatar_url":"https://github.com/jeron-diovis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-app-error-boundary\n\nAllows you to turn `react-error-overlay` in your react-app from a *mandatory-thing-you-never-asked-for* into a *handy-opt-in-feature*.\n\nInspired by [this SO question](https://stackoverflow.com/questions/46589819/disable-error-overlay-in-development-mode).\n\n## Why ever need this?\n\nSee discussion under [this answer](https://stackoverflow.com/a/47400249/3437433).\n\nIn very short:\n\n\u003e When developing error boundary components and styling/testing how they look, this is an extremely annoying feature. It slows down development and adds no value. You should allow developers to decide whether they want this feature turned on or not\n\n## Why not *just* disable overlay?\n\nMeaning, you always can simply do this:\n```js\nimport { stopReportingRuntimeErrors } from \"react-error-overlay\"\nstopReportingRuntimeErrors()\n```\nwhich will disable overlay once and for all.\n\nWell, because overlay is handy for *unexpected* errors. It works great on it's own.\nBut when you know for sure that in some specific place you don't need overlay (for example, you **want** error from API to be caught by error boundary, this is an expected flow) – you don't have options for that. All or nothing.\n\nThat's where this solution comes into play.\n\n## Demo\n\n[Here](https://github.com/jeron-diovis/react-app-error-boundary-demo) is a repo where you can see this package in action.\n\n## Installation\n\n```\nnpm install --save react-app-error-boundary\n# or\nyarn add react-app-error-boundary\n```\n\n## Usage\n\n1. Set up error handler in entry point:\n```jsx\n// src/index.jsx\nimport { setupReactAppOverlayErrorHandler } from 'react-app-error-boundary'\n\nReactDOM.render(...)\n\nsetupReactAppOverlayErrorHandler()\n```\n\n2. Wrap desired application part into `\u003cErrorBoundary\u003e` component:\n```jsx\nimport { ErrorBoundary } from 'react-app-error-boundary'\n\n\u003cErrorBoundary\u003e\n  \u003cDangerousComponent /\u003e\n\u003c/ErrorBoundary\u003e\n```\n\nThat's it. With this configuration, if `\u003cDangerousComponent /\u003e` will throw, you should observe following:\n* error message, written in red, in place of broken component\n* error log in console, starting with `Following error has been caught by \u003cErrorBoundary\u003e component...`\n* **no `react-error-overlay` displayed!**\n\n## Additional configuration\n\nFor general usage of `ErrorBoundary` component, see [documentation in original repo](https://github.com/bvaughn/react-error-boundary#usage). All original props are available here too. \nOther stuff from repo also is re-exported, so you may also use extra features like `useErrorHandler` hook.\n\n#### `setDefaultErrorBoundaryFallback(errorRenderer)`\n\nIn difference from original `ErrorBoundary`, here you have a default `FallbackComponent` provided. So you don't need to specify it explicitly every time.\n\nTo customize default fallback, use `setDefaultErrorBoundaryFallback` method:\n```jsx\n// src/index.jsx\nimport { setDefaultErrorBoundaryFallback } from 'react-app-error-boundary'\n\nsetDefaultErrorBoundaryFallback(({ error }) =\u003e (\n  \u003cMyBeautifulErrorRenderer\u003e{error.message}\u003c/MyBeautifulErrorRenderer\u003e\n))\n```\n\n#### `allowDevErrorOverlay`\n\nIf for some reason you want `react-error-overlay` displayed as it does normally, you may allow it for particular `ErrorBoundary`:\n```jsx\n\u003cErrorBoundary allowDevErrorOverlay\u003e...\u003c/ErrorBoundary\u003e\n```\n\n#### `logCaughtErrors`\n\nBy default, errors handled by `ErrorBoundary` will still be logged in console (only in development mode).\nIf you want to absolutely suppress caught errors, you may set it for particular `ErrorBoundary`:\n\n```jsx\n\u003cErrorBoundary logCaughtErrors={false}\u003e...\u003c/ErrorBoundary\u003e\n```\n\n#### `setDefaultErrorBoundaryOptions(options)`\n\nDefault behavior of `ErrorBoundary` can be changed globally:\n```js\nimport { setDefaultErrorBoundaryOptions } from 'react-app-error-boundary'\n\nsetDefaultErrorBoundaryOptions({\n  logCaughtErrors: false,\n  allowDevErrorOverlay: true,\n})\n```\n\n#### `craOverlaySelector`\n\nThis is an emergency option, just in case if styles of `react-error-overlay` will change – so this package will fail to hide it – and patch won't be released for some reason.\n\nWith this, you'll be able to patch this issue yourself:\n\n```js\nimport { setupReactAppOverlayErrorHandler } from 'react-app-error-boundary'\n\nsetupReactAppOverlayErrorHandler({\n  craOverlaySelector: 'any-css-selector-here'\n})\n```\n\n## How it works\n\nIn general, it's based on [this answer](https://stackoverflow.com/a/54549601/3437433).\n\nIt sets up a global error handler – to intercept uncaught errors before react-error-overlay does, and handle them in a special way.\n\nAnd it provides customized `ErrorBoundary` component (based on [react-error-boundary](https://github.com/bvaughn/react-error-boundary)), which marks errors handled by it as caught, so our global handler can decide whether to show overlay.\n\nUnfortunately, using `event.stopImmediatePropagation()` to prevent react-error-overlay from handling errors is not appropriate (see comment under the mentioned answer),\nbecause it breaks all error-boundaries too. So instead, to \"disable\" overlay we'll just hide it via `display: none`.\n\n## Credits\n\nBig thanks to [react-error-boundary](https://github.com/bvaughn/react-error-boundary) for a super convenient error-boundaries api.\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeron-diovis%2Freact-app-error-boundary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeron-diovis%2Freact-app-error-boundary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeron-diovis%2Freact-app-error-boundary/lists"}