{"id":18781737,"url":"https://github.com/dillonchanis/vue-error-boundary","last_synced_at":"2025-06-13T07:02:25.847Z","repository":{"id":57395806,"uuid":"130289250","full_name":"dillonchanis/vue-error-boundary","owner":"dillonchanis","description":"A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.","archived":false,"fork":false,"pushed_at":"2024-01-03T10:35:45.000Z","size":143,"stargazers_count":93,"open_issues_count":2,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-13T07:01:43.907Z","etag":null,"topics":["error-handling","frontend","javascript","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/dillonchanis.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}},"created_at":"2018-04-20T00:58:06.000Z","updated_at":"2025-02-27T04:32:58.000Z","dependencies_parsed_at":"2024-01-03T11:42:37.288Z","dependency_job_id":"265bca28-a23a-45b9-95ea-b8300dbd631a","html_url":"https://github.com/dillonchanis/vue-error-boundary","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"894028aa3638bcae8b5405eba6d3a67abb630a77"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dillonchanis/vue-error-boundary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dillonchanis%2Fvue-error-boundary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dillonchanis%2Fvue-error-boundary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dillonchanis%2Fvue-error-boundary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dillonchanis%2Fvue-error-boundary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dillonchanis","download_url":"https://codeload.github.com/dillonchanis/vue-error-boundary/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dillonchanis%2Fvue-error-boundary/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259599313,"owners_count":22882349,"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","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-handling","frontend","javascript","vue"],"created_at":"2024-11-07T20:33:18.529Z","updated_at":"2025-06-13T07:02:25.258Z","avatar_url":"https://github.com/dillonchanis.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vue-error-boundary\n\n[![NPM version](https://img.shields.io/npm/v/vue-error-boundary.svg?style=for-the-badge\u0026colorA=BEC8BE\u0026colorB=47B784)](https://www.npmjs.com/package/vue-error-boundary)\n\nA reusable error boundary component for catching JavaScript errors and displaying fallback UIs.\n\nThe ErrorBoundary component is based on [React's example component](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).\n\n**Requires Vue3**\n\n## Install\n\n```bash\nyarn add vue-error-boundary\n\nnpm i vue-error-boundary --save\n```\n\n## Usage\n\nTo use this component simply wrap any other component which may throw an Error. Errors thrown in child components will automatically bubble up to the `VErrorBoundary` component.\n\n```html\n\u003cVErrorBoundary\u003e\n  \u003cImUnstable /\u003e\n\u003c/VErrorBoundary\u003e\n```\n\nIf you are using it inside a `v-for`, ensure to set the `stop-propagation` prop on your `VErrorBoundary` component.\n\n```html\n\u003cdiv v-for=\"...\"\u003e\n  \u003cVErrorBoundary stop-propagation\u003e\n    ...\n  \u003c/VErrorBoundary\u003e\n\u003c/div\u003e\n```\n\n## Props\n\n| Attribute        | Description  | Type | Required | Default |\n|------------------|--------------|------|----------|---------|\n| fall-back        | Fallback component to render in case of error. | Component | `false` | DefaultFallback |\n| on-error         | Callback function to perform on error. | `Function`  | `false`  | `null` |\n| params           | Props to pass to your fall back component.  | `Object` | `false` | `{}` |\n| stop-propagation | Stop propagation of errors to other `errorCaptured` hooks. | `boolean` | `false` | `false` |\n\n\n## Scoped Slots\n\n| Property | Description | Type    |\n|----------|-------------|---------|\n| error    | The error   | `Error` |\n| hasError | Whether an error occurred. | `boolean` |\n| info     | Information on where the error was captured | `string` |\n\n\n## How to Use\n\n### Fallback UI via fall-back\n\nWe can provide a fallback UI to display via the `fall-back` prop.  It simply takes a Vue component to render.\n\n#### Basic Example\n\n```html\n\u003ctemplate\u003e\n  \u003cVErrorBoundary :fall-back=\"productError\"\u003e\n    \u003cProductCard ... /\u003e\n  \u003c/VErrorBoundary\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ProductErrorCard from '...'\n\nexport default {\n  // ...\n  data () {\n    return {\n      productError: ProductErrorCard\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### With Props\n\nYou can pass props to your fallback component through the `params` prop.  `params` expects an object containing the data you wish to pass.\n\n```html\n\u003ctemplate\u003e\n  \u003cul class=\"contact-list\"\u003e\n    \u003ctemplate v-for=\"contact in contacts\"\u003e\n      \u003cVErrorBoundary :key=\"contact.id\" \n                      :fall-back=\"fallBack\" \n                      :params=\"{ id: contact.id }\"\u003e\n        \u003capp-contact :contact=\"contact\" /\u003e\n      \u003c/VErrorBoundary\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport MyCustomFallbackComponent from '...'\n\nexport default {\n  data: () =\u003e ({\n    fallBack: MyCustomFallbackComponent,\n    contacts: [...]\n  })\n}\n\u003c/script\u003e\n```\n\nThen in your custom fallback component:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    Could not render - {{ id }}\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  props: ['id'],\n}\n\u003c/script\u003e\n```\n\nFurthermore, we can directly access the contents of the `VErrorBoundary` component's `errorCaptured` hook either through a callback or Vue's emit.\n\n### Scoped Slots\n\nIf you do not wish to use a fallback component you can alternatively utilize scoped slots to present data in your current template.\n\n#### Basic Example\n\n```html\n\u003cVErrorBoundary\u003e\n  \u003ctemplate #boundary=\"{ hasError }\"\u003e\n    \u003cdiv v-if=\"!hasError\"\u003eNo error occurred.\u003c/div\u003e\n    \u003cdiv v-else\u003eMessage to appear if error occurred.\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/VErrorBoundary\u003e\n```\n\n## Events\n\n### Callbacks via on-error\n\nThe `VErrorBoundary` can receive a callback function through the `on-error` prop.\n\n```html\n\u003ctemplate\u003e\n  \u003cVErrorBoundary :on-error=\"handleError\"\u003e...\u003c/VErrorBoundary\u003e\n\u003ctemplate\u003e\n\n\u003cscript\u003e\n// ...\nmethods: {\n  handleError (err, vm, info) {\n    // do something\n  }\n}\n// ...\n\u003c/script\u003e\n```\n\n### @errorCaptured event\n\nThe callback function will receive the same parameters as the `errorCaptured` method.\n\nWe can also listen to a Vue event via an `errorCaptured` event.\n\n```html\n\u003ctemplate\u003e\n  \u003cVErrorBoundary @error-captured=\"handleError\"\u003e...\u003c/VErrorBoundary\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// ...\nmethods: {\n  handleError (err, vm, info) {\n    // do something\n  }\n}\n// ...\n\u003c/script\u003e\n```\n\n### Stop Propagation\n\nThe `errorCaptured` hook will continue to propagate errors up the component tree unless it returns `false`.  Doing so will stop any additional `errorCaptured` hooks to execute **and** the global `errorHandler` from being invoked for the error.  To do this we can use the `stop-propagation` prop.\n\n```html\n\u003cVErrorBoundary stop-propagation\u003e\n  ...\n\u003c/VErrorBoundary\u003e\n```\n\n## Contributors\n\n[wallyjue](https://github.com/wallyjue)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdillonchanis%2Fvue-error-boundary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdillonchanis%2Fvue-error-boundary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdillonchanis%2Fvue-error-boundary/lists"}