-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[SDPA-3209] Added error capture and UI handling (#560)
* [SDPA-3209] Added error capture and UI handling * Fixed lagoon condition and updated tests
- Loading branch information
Showing
21 changed files
with
493 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <ol class="rpl-dev-error" v-if="rplOptions.isDev"> | ||
| <li v-for="(error, index) in errors" :key="index" > | ||
| {{ error }} | ||
| </li> | ||
| </ol> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'RplDevError', | ||
| props: { | ||
| errors: { | ||
| type: Array, | ||
| default: function () { | ||
| return [] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| @import "~@dpc-sdp/ripple-global/scss/settings"; | ||
| $rpl-dev-error-bg-color: $rpl-danger-bg-color !default; | ||
| $rpl-dev-error-text-color: $rpl-danger-color !default; | ||
| .rpl-dev-error { | ||
| background-color: $rpl-dev-error-bg-color; | ||
| color: $rpl-dev-error-text-color; | ||
| padding: $rpl-space-4 $rpl-space-4 * 2; | ||
| } | ||
| </style> |
52 changes: 52 additions & 0 deletions
52
packages/components/Atoms/Global/components/dev-error.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Story, Preview, Meta } from '@storybook/addon-docs/blocks'; | ||
| import RplDevError from './DevError.vue' | ||
|
|
||
| <Meta title="Atoms/Global/Dev error"/> | ||
|
|
||
| # Docs for dev error | ||
|
|
||
| This is a component not for end users. It shows errors to devs or testers in Ripple dev mode only. | ||
|
|
||
| It will render a error message if the `isDev` in `rplOptions` is set to `true`. | ||
| For more about `rplOptions` and `isDev`, check out [@dpc-sdp/ripple-global Docs](https://github.com/dpc-sdp/ripple/tree/develop/packages/components/Atoms/Global#rploptions). | ||
|
|
||
| <Preview> | ||
| <Story name="Dev error in dev mode"> | ||
| {{ | ||
| components: { RplDevError }, | ||
| template: '<rpl-dev-error :errors="errors" />', | ||
| data () { | ||
| return { | ||
| errors: ['Something wrong', 'Another error'] | ||
| } | ||
| }, | ||
| created () { | ||
| // You shouldn't set `isDev` in created and destoryed as here. | ||
| // This is just for demo purpose. | ||
| // You should set it in Ripple global plugins. | ||
| this.rplOptions.isDev = true | ||
| }, | ||
| destroyed () { | ||
| // This is just for demo purpose. | ||
| // You should set it in Ripple global plugins. | ||
| this.rplOptions.isDev = false | ||
| } | ||
| }} | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| It will not be rendered if `rplOptions.isDev` is set to `false`( by default). | ||
|
|
||
| <Preview> | ||
| <Story name="Dev error in none dev mode"> | ||
| {{ | ||
| components: { RplDevError }, | ||
| template: '<rpl-dev-error :errors="errors" />', | ||
| data () { | ||
| return { | ||
| errors: ['Something wrong', 'Another error'] | ||
| } | ||
| } | ||
| }} | ||
| </Story> | ||
| </Preview> |
9 changes: 9 additions & 0 deletions
9
packages/components/Atoms/Global/components/divider.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
|
|
||
| import RplDivider from './Divider.vue' | ||
|
|
||
| export default { title: 'Atoms | Global' } | ||
|
|
||
| export const divider = () => ({ | ||
| components: { RplDivider }, | ||
| template: '<rpl-divider />' | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
packages/components/Atoms/Global/mixins/catch-child-error.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /** | ||
| * A Vue mixin to capture child component's error. | ||
| * | ||
| * Useful to e.g. grid col component want to hide itself if the child component has a error. | ||
| * | ||
| * Use within a component: | ||
| * | ||
| * import catchChildError from '@dpc-sdp/ripple-global/mixins/catch-child-error' | ||
| * | ||
| * export default { | ||
| * name: 'my-component', | ||
| * mixins: [catchChildError], | ||
| * ... | ||
| * | ||
| * Then you can capture child errors, by set `catchChildError` Boolean prop. | ||
| * If you didn't set `catchChildError`, it won't catch error by default. The error will go to next parent. | ||
| * | ||
| * <my-component catchChildError> | ||
| * <child-component></child-component> | ||
| * </my-component> | ||
| * | ||
| * Inside component template you can display some error: | ||
| * | ||
| * <div v-if="gotChildError"> | ||
| * We got a problem! | ||
| * </div> | ||
| * | ||
| * You can use "RplDevError" component display the error, which will be render in dev mode only. | ||
| * | ||
| * <rpl-dev-error v-if="gotChildError" :errors="childErrors" /> | ||
| * | ||
| * This mixin also provide a error class, add it like below. | ||
| * If there is no error captured, no class will be added, otherwise it will add "rpl-child-component-error". | ||
| * You can then apply your own style when error captured. | ||
| * | ||
| * <div class="my-component" :class="childErrorClass"> | ||
| */ | ||
|
|
||
| const catchChildError = { | ||
| data: function () { | ||
| return { | ||
| gotChildError: false, | ||
| childErrorClass: '', | ||
| childErrors: [] | ||
| } | ||
| }, | ||
| props: { | ||
| catchChildError: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| methods: { | ||
| interceptError (error) { | ||
| if (this.catchChildError) { | ||
| this.gotChildError = true | ||
| this.childErrors.push(error) | ||
| this.childErrorClass = 'rpl-child-component-error' | ||
| return false | ||
| } else { | ||
| return true | ||
| } | ||
| } | ||
| }, | ||
| errorCaptured (error) { | ||
| return this.interceptError(error) | ||
| } | ||
| } | ||
|
|
||
| export default catchChildError |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { createLocalVue, mount } from '@vue/test-utils' | ||
| import RplCol from './../Col.vue' | ||
| import RplGlobal from '@dpc-sdp/ripple-global' | ||
|
|
||
| const localVue = createLocalVue() | ||
|
|
||
| localVue.use(RplGlobal, { isDev: true }) | ||
|
|
||
| const colNotCatchError = mount(RplCol) | ||
|
|
||
| const colCatchErrorDev = mount(RplCol, { | ||
| propsData: { | ||
| catchChildError: true | ||
| }, | ||
| localVue | ||
| }) | ||
|
|
||
| const colCatchErrorNotDev = mount(RplCol, { | ||
| propsData: { | ||
| catchChildError: true | ||
| } | ||
| }) | ||
|
|
||
| // Give an error for testing. | ||
| // Ideally will be mount an error child component but Vue test utils didn't support mount in slot. | ||
| const error = new Error('I have an error.') | ||
| colNotCatchError.vm.interceptError(error) | ||
| colCatchErrorDev.vm.interceptError(error) | ||
| colCatchErrorNotDev.vm.interceptError(error) | ||
|
|
||
| describe('RplCol', () => { | ||
| it('not render the child error class when catch child error is not enabled', () => { | ||
| expect(colNotCatchError.classes()).not.toContain('rpl-child-component-error') | ||
| }) | ||
|
|
||
| it('render the child error class when caught an error in dev mode', () => { | ||
| expect(colCatchErrorDev.classes()).toContain('rpl-child-component-error') | ||
| }) | ||
|
|
||
| it('render the child error messages when caught an error in dev mode', () => { | ||
| expect(colCatchErrorDev.contains('.rpl-dev-error')).toBe(true) | ||
| }) | ||
|
|
||
| it('render the child error class when caught an error but is not in dev mode', () => { | ||
| expect(colCatchErrorNotDev.classes()).toContain('rpl-child-component-error') | ||
| }) | ||
|
|
||
| it('not render the child error messages when caught an error but is not in dev mode', () => { | ||
| expect(colCatchErrorNotDev.contains('.rpl-dev-error')).toBe(false) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.