{"id":13447556,"url":"https://github.com/xpl/panic-overlay","last_synced_at":"2025-04-13T11:30:22.746Z","repository":{"id":38420083,"uuid":"174879960","full_name":"xpl/panic-overlay","owner":"xpl","description":"Displays JS errors in browsers. Shows sources. Use with any framework. 💥✨","archived":false,"fork":false,"pushed_at":"2022-06-23T09:40:55.000Z","size":1306,"stargazers_count":80,"open_issues_count":3,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-17T22:41:02.348Z","etag":null,"topics":["debug","error-handling","error-overlay","error-reporting","javascript","panic-overlay","parcel","snowpack","stack","stacktrace","vanilla-js","webpack"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/panic-overlay","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xpl.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}},"created_at":"2019-03-10T20:56:12.000Z","updated_at":"2024-06-09T16:44:05.000Z","dependencies_parsed_at":"2022-08-18T08:21:03.208Z","dependency_job_id":null,"html_url":"https://github.com/xpl/panic-overlay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpl%2Fpanic-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpl%2Fpanic-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpl%2Fpanic-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpl%2Fpanic-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xpl","download_url":"https://codeload.github.com/xpl/panic-overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248705469,"owners_count":21148544,"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":["debug","error-handling","error-overlay","error-reporting","javascript","panic-overlay","parcel","snowpack","stack","stacktrace","vanilla-js","webpack"],"created_at":"2024-07-31T05:01:20.890Z","updated_at":"2025-04-13T11:30:22.721Z","avatar_url":"https://github.com/xpl.png","language":"JavaScript","readme":"# panic-overlay \u003csup\u003eBETA\u003c/sup\u003e 💥✨[![Build Status](https://travis-ci.org/xpl/panic-overlay.svg?branch=master)](https://travis-ci.org/xpl/panic-overlay) [![NPM](https://img.shields.io/npm/v/panic-overlay.svg)](http://npmjs.com/package/panic-overlay)\n\nA lightweight standalone plain JS alternative to `react-error-overlay` that is not tied to React / Webpack and works with any framework or even without one.\n\nIf you miss that thing from `create-react-app` but do not want to use that framework (e.g. you want to use [Parcel](https://parceljs.org/) as a lightweight zero-configuration alternative) — here you go!\n\n## Features\n\n- Displays runtime errors in browsers\n- Minimalistic implementation (bare DOM API), [easily hackable](https://github.com/xpl/panic-overlay/blob/master/README.md#hacking)\n- Full sourcemap support (shows original code, not transpiled)\n- Clickable locations (opens in VS Code), [see the notes here](https://github.com/xpl/panic-overlay#vs-code-notes)\n- Uncluttered stacktraces (collapses third party library calls)\n\n## How It Looks\n\n\u003cimg width=\"1420\" alt=\"Screen Shot 2019-03-11 at 00 11 00\" src=\"https://user-images.githubusercontent.com/1707/54091547-44332700-4392-11e9-81a8-8593c48980b1.png\"\u003e\n\n## Installation\n\n```bash\nnpm install panic-overlay\n```\n\n```javascript\nimport 'panic-overlay' // should be the very first import in your app!\n```\n\n## Using Without A Bundler\n\nAll-in-one browser bundle (batteries included), served from a CDN of your choice. Creates a global `panic` object.\n\n- jsDelivr: https://cdn.jsdelivr.net/npm/panic-overlay/build/panic-overlay.browser.js\n- unpkg: https://unpkg.com/panic-overlay\n\n```html\n\u003cscript src=\"https://unpkg.com/panic-overlay\"\u003e\u003c/script\u003e\n```\n\n## Demos\n\nHere's how you can find an example usage of `panic-overlay` with various bundlers:\n\n```sh\ngit clone https://github.com/xpl/panic-overlay.git\ncd panic-overlay\nnpm install\n```\n\n| Environment             | Run with                            | Source folder                                             |\n| ----------------------- | ----------------------------------- | --------------------------------------------------------- |\n| `\u003cscript\u003e` tag          | `npm run demo-no-bundler`           | [`demo/no-bundler`](/demo/no-bundler)                     |\n| Parcel                  | `npm run demo-parcel-vanilla`       | [`demo/parcel-vanilla`](/demo/parcel-vanilla)             |\n| Parcel (React JSX)      | `npm run demo-parcel-react`         | [`demo/parcel-react`](/demo/parcel-react)                 |\n| Webpack                 | `npm run demo-webpack-vanilla`      | [`demo/webpack-vanilla`](/demo/webpack-vanilla)           |\n| Snowpack                | `npm run demo-snowpack-vanilla`     | [`demo/snowpack-vanilla`](/demo/snowpack-vanilla)         |\n\n## Disabling Automatic Error Handling\n\nOnce imported, `panic-overlay` shows itself whenever an uncaught error occurs in a browser. This can be undesirable in a production environment. You can disable that behavior in run-time:\n\n```javascript\nimport panic from 'panic-overlay'\n\npanic.configure ({ handleErrors: false })\n```\n\nAlthough it is better to _not import_ the `panic-overlay` in a production build, to minimize the bundle size. Unfortunately, there is no universal way to do a conditional module import at compile-time — in each bundler/framework it is achieved in its own way.\n\n## Showing Manually\n\n```javascript\npanic (error) // where error is either an instance of an Error or a string taken from Error.stack\n```\n\n## VS Code Notes\n\nCurrently there is a problem with automatically determining the full file paths (at least, when using Parcel bundler), so you need to provide it manually, otherwise the error locations won't be clickable:\n\n```javascript\nimport panic from 'panic-overlay'\n\npanic.configure ({ projectRoot: '/full/path/to/my/project' })\n```\n\n## Custom Click Handler\n\nYou can intercept clicks on call stack entries. For the `entry` format, [see this](https://github.com/xpl/stacktracey#how-to).\n\n```javascript\npanic.configure ({\n    stackEntryClicked (entry) {\n        alert (`Clicked on ${entry.fileRelative}:${entry.line}:${entry.column}`)\n    }\n})\n```\n\n## Hacking\n\nThe `panic-overlay` is just a GUI for the [**`stacktracey`**](https://github.com/xpl/stacktracey) library that provides all the magic related to callstack parsing, source code extraction and filtering of the clutter. I also maintain that library, so any contributions to its code are welcome as well.\n\nI highly appreciate any help from the community with the following:\n\n- [ ] Testing with various module bundlers / frameworks\n- [ ] Implementing parsing of React JSX errors in [**`stacktracey`**](https://github.com/xpl/stacktracey) ([see more here](https://github.com/parcel-bundler/parcel/issues/2765))\n- [ ] Determining the full file paths for [clickable locations](https://github.com/xpl/panic-overlay#vs-code-notes)\n- [ ] Animations \u0026 better layout (probably need to center it for wide screens)\n\n## ...One More Thing™\n\nThere is also a way to improve your Node errors (and the overall debug output) legibility by using the **[`Ololog`](https://github.com/xpl/ololog)** library which is built on the same stack and is maintained by me also. Check it out!\n\n```javascript\nconst log = require ('ololog').handleNodeErrors () // intercepts process errors\n```\n\n\u003ca href=\"https://github.com/xpl/ololog\"\u003e\u003cimg width=\"1091\" alt=\"Screen Shot 2019-04-06 at 00 56 17\" src=\"https://user-images.githubusercontent.com/1707/55658599-d8b06e00-5806-11e9-935c-32a11d689c92.png\"\u003e\u003c/a\u003e\n\nColor logging with displaying of the _log call location_ (file + line), so you can quickly find out from the logs, where it was called in the code:\n\n```javascript\nlog.bright.green ('Syncing order books...')\n```\n\n\u003cimg width=\"423\" alt=\"Screen Shot 2019-05-15 at 17 38 15\" src=\"https://user-images.githubusercontent.com/1707/57784232-3f934200-7738-11e9-8136-d2cc88879c92.png\"\u003e\n","funding_links":[],"categories":["JavaScript","javascript","webpack"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpl%2Fpanic-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxpl%2Fpanic-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpl%2Fpanic-overlay/lists"}