Skip to content

Commit e33bbff

Browse files
vforgevforge
authored
Merge pull request #54 from Wikia/error-boundary
withErrorBoundary HOC
2 parents 76df5a5 + 71d5a24 commit e33bbff

File tree

16 files changed

+699
-77
lines changed

16 files changed

+699
-77
lines changed

‎config/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = {
2020
'date-fns',
2121
// we ony use one function from date-fns
2222
'date-fns/distance_in_words_strict',
23+
'deepmerge',
2324
'prop-types',
2425
'react',
2526
'react-dom',

‎config/rollup.config.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,15 @@ const buildConfig = file => {
8080
exclude: 'node_modules/design-system/dist/svg/sprite.svg',
8181
}),
8282
babel(babelConfig),
83-
commonjs(),
83+
commonjs({
84+
namedExports: {
85+
'node_modules/react-is/index.js': [
86+
'isElement',
87+
'isValidElementType',
88+
'ForwardRef',
89+
],
90+
}
91+
}),
8492
postprocess([
8593
/**
8694
* reference the assets directly

‎config/styleguide.config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
"items": [
8080
"withHideComponent",
8181
"withTimeoutFallback",
82+
"withErrorBoundary",
8283
"withDisabledSSR"
8384
]
8485
},

‎docs/build/1.e49454a3.js‎ renamed to ‎docs/build/1.768c9348.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.8d1f97e4.js‎

Lines changed: 72 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.a9e21da6.js‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.a9e21da6.js"></script></body></html>
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.8d1f97e4.js"></script></body></html>

‎source/hocs/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* importable.
55
*/
66

7-
// eslint-disable-next-line
87
export { default as withTimeoutFallback } from './withTimeoutFallback';
8+
export { default as withErrorBoundary } from './withErrorBoundary';
99
export { default as withHideComponent } from './withHideComponent';
1010
export { default as withDisabledSSR } from './withDisabledSSR';

‎source/hocs/withErrorBoundary/InComponentError.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
const InComponentWrapper = styled.div`
5+
background: #fff;
6+
padding: 10px;
7+
`;
8+
9+
const Heading = styled.h4`
10+
align-content: center;
11+
color: red;
12+
display: flex;
13+
margin-top: 0;
14+
margin-bottom: 0;
15+
padding: 10px;
16+
`;
17+
18+
export default function DefaultFallbackComponent() {
19+
return (
20+
<InComponentWrapper>
21+
<Heading>
22+
Sorry, we’re having trouble displaying this content right now
23+
</Heading>
24+
</InComponentWrapper>
25+
);
26+
}

‎source/hocs/withErrorBoundary/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
Add an error boundary to any component. By default every error will be sent to the remote log.
2+
3+
```js static
4+
withErrorBoundary(Component, options);
5+
```
6+
7+
The `options` param is optional and can have the following:
8+
9+
* `options.name` - Boundary's name; this will be used in `console.log` and will be sent to remote log
10+
**NOTE**: By default it's equal to `Component.name` (class name of the `Component` HoC param)
11+
* `options.fallbackComponent` - either a component, a function that returns a component or `null` if there should be no fallback
12+
* `options.skipLog` - if `false` the remote log will not be used; useful for developing/debugging local code
13+
* `options.appName` - Front-End application's name; this is sent to remote log
14+
* `options.appVersion` - Front-End application's verion; this is sent to remote log
15+
16+
## Examples
17+
18+
Very basic usage:
19+
```js static
20+
import withErrorBoundary from '@react-common/hocs/withErrorBoundary';
21+
22+
const Component = props => (<div> Test </div>);
23+
const ComponentWithErrorBoundary = withErrorBoundary(Component);
24+
25+
// Usage
26+
<ComponentWithErrorBoundary />
27+
```
28+
29+
Options:
30+
31+
```js static
32+
import withErrorBoundary from '@react-common/hocs/withErrorBoundary';
33+
34+
const Component = props => (<div> Test </div>);
35+
const AlternateFallBack = props => (<div> Alternate error message </div>);
36+
const ComponentWithErrorBoundary = withErrorBoundary(Component, {
37+
name: 'BoundaryName',
38+
fallbackComponent: AlternateFallback,
39+
});
40+
41+
// Usage
42+
<ComponentWithErrorBoundary />
43+
```

0 commit comments

Comments
 (0)