{"id":13630754,"url":"https://github.com/commissure/redbox-react","last_synced_at":"2025-05-14T21:05:01.041Z","repository":{"id":56242562,"uuid":"39391122","full_name":"commissure/redbox-react","owner":"commissure","description":":red_circle: A redbox (rsod) component to display your JavaScript errors.","archived":false,"fork":false,"pushed_at":"2022-12-06T16:30:21.000Z","size":265,"stargazers_count":687,"open_issues_count":14,"forks_count":78,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-28T01:35:21.949Z","etag":null,"topics":["react","red-boxes","sourcemaps","stack-traces"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/commissure.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-20T15:12:39.000Z","updated_at":"2025-01-17T15:42:05.000Z","dependencies_parsed_at":"2023-01-24T07:00:25.571Z","dependency_job_id":null,"html_url":"https://github.com/commissure/redbox-react","commit_stats":null,"previous_names":["keywordbrain/redbox-react"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commissure%2Fredbox-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commissure%2Fredbox-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commissure%2Fredbox-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commissure%2Fredbox-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commissure","download_url":"https://codeload.github.com/commissure/redbox-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251951286,"owners_count":21670236,"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":["react","red-boxes","sourcemaps","stack-traces"],"created_at":"2024-08-01T22:01:58.571Z","updated_at":"2025-05-14T21:05:00.999Z","avatar_url":"https://github.com/commissure.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# redbox-react\n\n[![Build Status](https://travis-ci.org/commissure/redbox-react.svg?branch=master)](https://travis-ci.org/commissure/redbox-react)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nThe red box (aka red screen of death) renders an error in this “pretty” format:\n\n\u003cimg src=\"http://i.imgur.com/9Jhlibk.png\" alt=\"red screen of death\" width=\"700\" /\u003e\n\n## Usage\n\nCatch an error and give it to `redbox-react`. Works great with\n\n- [react-transform-catch-errors]\n  - [Example][react-transform-example]\n  - [react-transform-boilerplate]\n- [react-hot-loader]\n  - :warning: ️ based on `3.0.0-beta.2`! This depends on `ErrorBoundaries` which\n    will likely not land in react! You should probably not use this\n    before 3.0.0 comes out.\n  - [Example][react-hot-loader-example]\n\n[react-transform-catch-errors]: https://github.com/gaearon/react-transform-catch-errors\n[react-transform-example]: https://github.com/commissure/redbox-react/tree/master/examples/react-transform-catch-errors\n[react-transform-boilerplate]: https://github.com/gaearon/react-transform-boilerplate/\n[react-hot-loader]: https://github.com/gaearon/react-hot-loader\n[react-hot-loader-example]: https://github.com/commissure/redbox-react/tree/master/examples/react-hot-loader\n\nor manually:\n\n```javascript\nimport RedBox from 'redbox-react'\n\nconst e = new Error('boom')\nconst box = \u003cRedBox error={e} /\u003e\n```\n\nHere is a more useful, full-fleged example:\n\n```javascript\n/* global __DEV__ */\nimport React from 'react'\nimport { render } from 'react-dom'\nimport App from './components/App'\n\nconst root = document.getElementById('root')\n\nif (__DEV__) {\n  const RedBox = require('redbox-react').default\n  try {\n    render(\u003cApp /\u003e, root)\n  } catch (e) {\n    render(\u003cRedBox error={e} /\u003e, root)\n  }\n} else {\n  render(\u003cApp /\u003e, root)\n}\n```\n\n## What Is This Good For?\n\nAn error that's only in the console is only half the fun. Now you can\nuse all the wasted space where your app would be if it didn’t crash to\ndisplay the error that made it crash.\n\n**Please use this in development only.**\n\n## Will this catch errors for me?\nNo. This is only a UI component for rendering errors and their stack\ntraces. It is intended to be used with with other existing solutions\nthat automate the error catching for you. See the list at the top of\nthis document or take a look at the [examples].\n\n  [examples]: https://github.com/commissure/redbox-react/tree/master/examples\n\n## Optional Props\n\nThe `RedBox` component takes a couple of props that you can use to\ncustomize its behaviour:\n\n### `editorScheme` `[?string]`\nIf a filename in the stack trace is local, the component can create the\nlink to open your editor using this scheme eg:\n  - `subl` to create\n    `subl://open?url=file:///filename`.\n  - or `vscode` to create\n    `vscode://file/filename`.\n\n### `useLines` `[boolean=true]`\nLine numbers in the stack trace may be unreliable depending on the\ntype of sourcemaps. You can choose to not display them with this flag.\n\n### `useColumns` `[boolean=true]`\nColumn numbers in the stack trace may be unreliable depending on the\ntype of sourcemaps. You can choose to not display them with this flag.\n\n### `style` `[?object]`\nAllows you to override the styles used when rendering the various parts of the\ncomponent. It will be shallow-merged with the [default styles](./src/style.js).\n\nIf you’re using [react-transform-catch-errors] you can add these\noptions to your `.babelrc` through the [`imports` property][imports].\n\n  [imports]: https://github.com/gaearon/react-transform-catch-errors#installation\n\n## Sourcemaps With Webpack\n\nIf you’re using [Webpack](https://webpack.github.io) you can get\naccurate filenames in the stacktrace by setting the\n`output.devtoolModuleFilenameTemplate` settings to `/[absolute-resource-path]`.\n\nIt's recommended to set the `devtool` setting to `'eval'`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommissure%2Fredbox-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommissure%2Fredbox-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommissure%2Fredbox-react/lists"}