Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-error-boundary
Advanced tools
react-error-boundary - npm Package Compare versions
Comparing version 1.2.5 to 2.0.0
108
package.json
| { | ||
| "name": "react-error-boundary", | ||
| "version": "1.2.5", | ||
| "description": "Sample reusable React error boundary component for React 16+", | ||
| "homepage": "https://github.com/bvaughn/react-error-boundary", | ||
| "repository": "bvaughn/react-error-boundary", | ||
| "version": "2.0.0", | ||
| "description": "Simple reusable React error boundary component", | ||
| "main": "dist/react-error-boundary.cjs.js", | ||
| "module": "dist/react-error-boundary.esm.js", | ||
| "browser": "dist/react-error-boundary.umd.js", | ||
| "sideEffects": false, | ||
| "keywords": [ | ||
| "react", | ||
| "error boundary", | ||
| "error handling" | ||
| ], | ||
| "author": "Brian Vaughn <brian.david.vaughn@gmail.com>", | ||
| "license": "MIT", | ||
| "engines": { | ||
| "node": ">=10", | ||
| "npm": ">=6" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/bvaughn/react-error-boundary" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/bvaughn/react-error-boundary/issues" | ||
| }, | ||
| "homepage": "https://github.com/bvaughn/react-error-boundary#readme", | ||
| "files": [ | ||
| "dist", | ||
| "index.d.ts" | ||
| "dist" | ||
| ], | ||
| "main": "dist/commonjs/index.js", | ||
| "scripts": { | ||
| "build": "npm run build:commonjs && npm run build:es && npm run build:umd", | ||
| "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=production cross-env BABEL_ENV=commonjs babel src --out-dir dist/commonjs", | ||
| "build:es": "npm run clean:es && cross-env NODE_ENV=production cross-env BABEL_ENV=es babel src --out-dir dist/es", | ||
| "build:umd": "npm run clean:umd && cross-env NODE_ENV=production webpack --config webpack.config.umd.js --bail", | ||
| "clean": "npm run clean:commonjs && npm run clean:es && npm run clean:umd", | ||
| "clean:commonjs": "rimraf dist/commonjs", | ||
| "clean:es": "rimraf dist/es", | ||
| "clean:umd": "rimraf dist/umd", | ||
| "flow": "flow check src", | ||
| "lint": "eslint 'src/**/*.js'", | ||
| "prettier": "prettier --config .prettierrc --write \"src/**/*.js\"", | ||
| "test": "jest" | ||
| "build": "kcd-scripts build --bundle", | ||
| "lint": "kcd-scripts lint", | ||
| "setup": "npm install && npm run validate -s", | ||
| "test": "kcd-scripts test", | ||
| "test:update": "npm test -- --updateSnapshot --coverage", | ||
| "validate": "kcd-scripts validate", | ||
| "semantic-release": "semantic-release" | ||
| }, | ||
| "author": "Brian Vaughn <brian.david.vaughn@gmail.com>", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.8.4" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.24.1", | ||
| "babel-core": "^6.25.0", | ||
| "babel-eslint": "^8.0.1", | ||
| "babel-jest": "^23.4.2", | ||
| "babel-loader": "^7.1.1", | ||
| "babel-plugin-flow-react-proptypes": "^3.4.2", | ||
| "babel-plugin-transform-react-remove-prop-types": "^0.4.6", | ||
| "babel-plugin-transform-runtime": "^6.23.0", | ||
| "babel-plugin-typecheck": "^3.9.0", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-es2015-rollup": "^3.0.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-1": "^6.24.1", | ||
| "babel-runtime": "^6.23.0", | ||
| "cross-env": "^5.0.1", | ||
| "enzyme": "^3.5.0", | ||
| "enzyme-adapter-react-16": "^1.3.0", | ||
| "eslint": "^4.2.0", | ||
| "eslint-config-fbjs": "^2.0.0", | ||
| "eslint-plugin-babel": "^4.1.2", | ||
| "eslint-plugin-flowtype": "^2.39.1", | ||
| "eslint-plugin-jsx-a11y": "^6.0.2", | ||
| "eslint-plugin-prettier": "^2.3.1", | ||
| "eslint-plugin-react": "^7.4.0", | ||
| "eslint-plugin-relay": "^0.0.19", | ||
| "flow-bin": "^0.57.3", | ||
| "jest": "^23.5.0", | ||
| "prettier": "^1.7.4", | ||
| "prop-types": "^15.5.10", | ||
| "react": "^16.4.2", | ||
| "react-dom": "^16.4.2", | ||
| "react-test-renderer": "^16.4.2", | ||
| "rimraf": "^2.6.1", | ||
| "webpack": "^3.3.0" | ||
| "@testing-library/jest-dom": "^5.5.0", | ||
| "@testing-library/react": "^10.0.3", | ||
| "@testing-library/user-event": "^10.1.0", | ||
| "kcd-scripts": "^5.10.0", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "typescript": "^3.8.3", | ||
| "semantic-release": "^17.0.7" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.0.0-beta.1" | ||
| "react": ">=16.0.0" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "./node_modules/kcd-scripts/eslint.js", | ||
| "rules": { | ||
| "react/prop-types": "off", | ||
| "react/no-did-update-set-state": "off" | ||
| } | ||
| } | ||
| } |
236
README.md
@@ -1,24 +0,80 @@ | ||
| react-error-boundary | ||
| ==================== | ||
| <div align="center"> | ||
| <h1>react-error-boundary</h1> | ||
| **A simple, reusable React error boundary component for React 16+.** | ||
| <p>Simple reusable React error boundary component</p> | ||
| </div> | ||
| [](https://yarnpkg.com/en/package/react-error-boundary) | ||
| [](LICENSE) | ||
| --- | ||
| React [v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html) introduced the concept of [“error boundaries”](https://reactjs.org/docs/error-boundaries.html). | ||
| <!-- prettier-ignore-start --> | ||
| [![Build Status][build-badge]][build] | ||
| [![Code Coverage][coverage-badge]][coverage] | ||
| [![version][version-badge]][package] | ||
| [![downloads][downloads-badge]][npmtrends] | ||
| [![MIT License][license-badge]][license] | ||
| This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled. | ||
| [![PRs Welcome][prs-badge]][prs] | ||
| [![Code of Conduct][coc-badge]][coc] | ||
| <!-- prettier-ignore-end --> | ||
| # Usage | ||
| ## The problem | ||
| The simplest way to use `<ErrorBoundary>` is to wrap it around any component that may throw an error. | ||
| This will handle errors thrown by that component and its descendants too. | ||
| React [v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html) introduced the | ||
| concept of [“error boundaries”](https://reactjs.org/docs/error-boundaries.html). | ||
| ## This solution | ||
| This component provides a simple and reusable wrapper that you can use to wrap | ||
| around your components. Any rendering errors in your components hierarchy can | ||
| then be gracefully handled. | ||
| ## Table of Contents | ||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
| - [Installation](#installation) | ||
| - [Usage](#usage) | ||
| - [Error Recovery](#error-recovery) | ||
| - [fallback prop](#fallback-prop) | ||
| - [Issues](#issues) | ||
| - [🐛 Bugs](#-bugs) | ||
| - [💡 Feature Requests](#-feature-requests) | ||
| - [LICENSE](#license) | ||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
| ## Installation | ||
| This module is distributed via [npm][npm] which is bundled with [node][node] and | ||
| should be installed as one of your project's `dependencies`: | ||
| ``` | ||
| npm install --save react-error-boundary | ||
| ``` | ||
| ## Usage | ||
| The simplest way to use `<ErrorBoundary>` is to wrap it around any component | ||
| that may throw an error. This will handle errors thrown by that component and | ||
| its descendants too. | ||
| ```jsx | ||
| import ErrorBoundary from 'react-error-boundary'; | ||
| import ErrorBoundary from 'react-error-boundary' | ||
| <ErrorBoundary> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary> | ||
| function ErrorFallback({error, componentStack}) { | ||
| return ( | ||
| <div role="alert"> | ||
| <p>Something went wrong:</p> | ||
| <pre>{error.message}</pre> | ||
| <pre>{componentStack}</pre> | ||
| </div> | ||
| ) | ||
| } | ||
| const ui = ( | ||
| <ErrorBoundary FallbackComponent={ErrorFallback}> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary>, | ||
| ) | ||
| ``` | ||
@@ -29,3 +85,3 @@ | ||
| ```jsx | ||
| import ErrorBoundary from 'react-error-boundary'; | ||
| import ErrorBoundary from 'react-error-boundary' | ||
@@ -35,43 +91,137 @@ const myErrorHandler = (error: Error, componentStack: string) => { | ||
| // E.g. log to an error logging client here | ||
| }; | ||
| } | ||
| <ErrorBoundary onError={myErrorHandler}> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary> | ||
| const ui = ( | ||
| <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary>, | ||
| ) | ||
| ``` | ||
| You can also customize the fallback component’s appearance: | ||
| You can also use it as a | ||
| [higher-order component](https://reactjs.org/docs/higher-order-components.html): | ||
| ```jsx | ||
| import { ErrorBoundary } from 'react-error-boundary'; | ||
| import {withErrorBoundary} from 'react-error-boundary' | ||
| const MyFallbackComponent = ({ componentStack, error }) => ( | ||
| <div> | ||
| <p><strong>Oops! An error occured!</strong></p> | ||
| <p>Here’s what we know…</p> | ||
| <p><strong>Error:</strong> {error.toString()}</p> | ||
| <p><strong>Stacktrace:</strong> {componentStack}</p> | ||
| </div> | ||
| ); | ||
| const ComponentWithErrorBoundary = withErrorBoundary(ComponentThatMayError, { | ||
| FallbackComponent: ErrorBoundaryFallbackComponent, | ||
| onError(error, componentStack) { | ||
| // Do something with the error | ||
| // E.g. log to an error logging client here | ||
| }, | ||
| }) | ||
| <ErrorBoundary FallbackComponent={MyFallbackComponent}> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary> | ||
| const ui = <ComponentWithErrorBoundary /> | ||
| ``` | ||
| You can also use it as a [higher-order component](https://reactjs.org/docs/higher-order-components.html): | ||
| ### Error Recovery | ||
| Often you may want to recover from the error. You can do this using the | ||
| `resetErrorBoundary` prop: | ||
| ```jsx | ||
| import { ErrorBoundaryFallbackComponent, withErrorBoundary } from 'react-error-boundary'; | ||
| function ErrorFallback({error, resetErrorBoundary}) { | ||
| return ( | ||
| <div role="alert"> | ||
| <div>Oh no</div> | ||
| <pre>{error.message}</pre> | ||
| <button onClick={resetErrorBoundary}>Try again</button> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
| const ComponentWithErrorBoundary = withErrorBoundary( | ||
| ComponentThatMayError, | ||
| ErrorBoundaryFallbackComponent, // Or pass in your own fallback component | ||
| onErrorHandler: (error, componentStack) => { | ||
| // Do something with the error | ||
| // E.g. log to an error logging client here | ||
| }, | ||
| ); | ||
| However, normally "trying again" like that will just result in the user | ||
| experiencing the same error. Typically some other state in your app will need to | ||
| be reset as well. The problem is, the `ErrorFallback` component won't usually | ||
| have access to the state that needs to be reset. | ||
| <ComponentWithErrorBoundary /> | ||
| So alternatively, you can use the `fallbackRender` prop: | ||
| ```jsx | ||
| const ui = ( | ||
| <ErrorBoundary | ||
| fallbackRender={({error, resetErrorBoundary}) => ( | ||
| <div role="alert"> | ||
| <div>Oh no</div> | ||
| <pre>{error.message}</pre> | ||
| <button | ||
| onClick={() => { | ||
| resetComponentState() // <-- this is why the fallbackRender is useful | ||
| resetErrorBoundary() | ||
| }} | ||
| > | ||
| Try again | ||
| </button> | ||
| </div> | ||
| )} | ||
| > | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary> | ||
| ) | ||
| ``` | ||
| I know what you're thinking: I thought we ditched render props when hooks came | ||
| around. Unfortunately, the current React Error Boundary API only supports class | ||
| components at the moment, so render props are the best solution we have to this | ||
| problem. | ||
| ### fallback prop | ||
| In the spirit of consistency with the `React.Suspense` component, we also | ||
| support a simple `fallback` prop which you can use for a generic fallback. This | ||
| will not be passed any props so you can't show the user anything actually useful | ||
| though, so it's not really recommended. | ||
| ```jsx | ||
| const ui = ( | ||
| <ErrorBoundary fallback={<div>Oh no</div>}> | ||
| <ComponentThatMayError /> | ||
| </ErrorBoundary> | ||
| ) | ||
| ``` | ||
| ## Issues | ||
| _Looking to contribute? Look for the [Good First Issue][good-first-issue] | ||
| label._ | ||
| ### 🐛 Bugs | ||
| Please file an issue for bugs, missing documentation, or unexpected behavior. | ||
| [**See Bugs**][bugs] | ||
| ### 💡 Feature Requests | ||
| Please file an issue to suggest new features. Vote on feature requests by adding | ||
| a 👍. This helps maintainers prioritize what to work on. | ||
| [**See Feature Requests**][requests] | ||
| ## LICENSE | ||
| MIT | ||
| <!-- prettier-ignore-start --> | ||
| [npm]: https://www.npmjs.com | ||
| [node]: https://nodejs.org | ||
| [build-badge]: https://img.shields.io/travis/bvaughn/react-error-boundary.svg?style=flat-square | ||
| [build]: https://travis-ci.org/bvaughn/react-error-boundary | ||
| [coverage-badge]: https://img.shields.io/codecov/c/github/bvaughn/react-error-boundary.svg?style=flat-square | ||
| [coverage]: https://codecov.io/github/bvaughn/react-error-boundary | ||
| [version-badge]: https://img.shields.io/npm/v/react-error-boundary.svg?style=flat-square | ||
| [package]: https://www.npmjs.com/package/react-error-boundary | ||
| [downloads-badge]: https://img.shields.io/npm/dm/react-error-boundary.svg?style=flat-square | ||
| [npmtrends]: http://www.npmtrends.com/react-error-boundary | ||
| [license-badge]: https://img.shields.io/npm/l/react-error-boundary.svg?style=flat-square | ||
| [license]: https://github.com/bvaughn/react-error-boundary/blob/master/LICENSE | ||
| [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square | ||
| [prs]: http://makeapullrequest.com | ||
| [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square | ||
| [coc]: https://github.com/bvaughn/react-error-boundary/blob/master/other/CODE_OF_CONDUCT.md | ||
| [bugs]: https://github.com/bvaughn/react-error-boundary/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug | ||
| [requests]: https://github.com/bvaughn/react-error-boundary/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement | ||
| [good-first-issue]: https://github.com/bvaughn/react-error-boundary/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22 | ||
| <!-- prettier-ignore-end --> |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-76.47%
8
- Number of low maintenance alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by197.37%
226
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-76.82%
27336
- Dependency count
- increased by100%
2
- Number of package files
- decreased by-47.37%
10
- Lines of code
- decreased by-88.73%
222
- Number of low quality alerts
- increased byInfinity%
1
Dependency changes
+ Added@babel/runtime@^7.8.4
+ Added@babel/runtime@7.26.0(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact@16.14.0(transitive)
- Removedreact-is@16.13.1(transitive)