Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(adapter): smarter error boundaries #582

Merged
merged 3 commits into from
Jul 2, 2021

Conversation

KaiVandivier
Copy link
Contributor

Adds an error boundary around the app to catch errors there, and enables the top-most error boundary to check for and apply service worker updates when 'refresh' is clicked

Comment on lines -15 to +16
export class FatalErrorBoundary extends Component {
export class ErrorBoundary extends Component {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FatalErrorBoundary is repurposed into a reusable error boundary with the option of making it fullscreen or not, and configuring what happens on clicking 'refresh'

Comment on lines -11 to +12
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By default, the mask will fill up its container

Comment on lines +29 to +36
.fullscreen {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the fullscreen prop is added to the ErrorBoundary, it will take up the whole screen instead

"demo": "yarn build --force --verbose && yarn serve"
"demo": "yarn build --force --debug && yarn serve"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a change to use the correct flag here... did this change recently?

@KaiVandivier KaiVandivier requested review from mediremi and amcgee July 1, 2021 21:10
@KaiVandivier KaiVandivier merged commit 4b09ab1 into feat-add-service-worker Jul 2, 2021
@KaiVandivier KaiVandivier deleted the feat-adapter-error-boundaries branch July 2, 2021 13:22
KaiVandivier added a commit that referenced this pull request Jul 23, 2021
* feat: add & update files, add deps

* fix: test cache-first route for file extension

* fix: add pwa_enabled to env vars to conditionally register SW

* fix: use older syntax

* feat: filter out url patterns from d2.config when caching by default

* fix: parse url array env var

* feat: add manifest.json

* chore: add comments

* fix: use 'browser' as pwa display mode

* feat: add recording started and completed messages

* feat: generate manifest.json programatically

* refactor: generate manifests before build step to precache

* feat: use workbox-cli to precache all static assets

* fix: linting error

* fix: remove 'pwa enabled' condition for SW event listener

* feat: add omitExternalRequests option to d2.config

* refactor: tentative SWR strategy for static assets

* chore: remove chatty console log

* refactor: clean up index.js; crudely compartmentalize SW reg

* feat: add 'getRecordedSections' function in sw

* feat: tentative messaging interface implementation

* refactor: move sw content to new package

* chore: add scripts & update deps

* chore: clean up shell

* chore: fix d2 config entry point

* refactor: move manifest injection to cli package

* chore: format

* docs: add pwa docs

* chore: init new example app for PWA

* chore: export constants from sw package

* chore: rename var

* test: add first draft of cacheable section attempt

* refactor: improve test component cascading fetch

* fix: receive 'children' prop

* fix: add recording states var

* fix: handle error when idb is not set up

* fix: handle required arg errors

* fix: handle more errors

* feat: section wrapper

* chore: add todo

* chore: set up demo config & scripts

* refactor: rename message keys

* refactor: callback interface; linting

* fix: recording timeout delay

* refactor: cacheable section to avoid unnecessary rerenders

* fix: don't record requests during confirmation

* refactor: just use sectionId for cache key

* fix: try cache if network fails for *all* requests

* fix: typo

* fix: remove recording on error

* chore: remove extraneous 'clientId's in payload

* fix: handle recording errors better

* fix: clean up listeners on recording success and failure

* chore: update comment

* fix: convert cachedSections to a map

* chore: script for pwa app demo

* refactor: add 'useCachedSection' for just one section

* chore: rename to initOfflineInterface

* chore: formatting

* chore: comment and var rename

* chore: remove unused 'interface' idea

* feat: add circular loader to screen cover

* chore: comments from meeting feedback

* refactor: init function (and meeting feedback)

* refactor: offline interface into a class

* chore: add JSDoc comments

* refactor: make promptUpdate API more generic

* chore: remove debugging log

* refactor: handle SW registration in offlineInterface

* fix: call 'onUpdate' if new SW is already waiting

* refactor: use arrow function to avoid using '.bind()'

* chore: add comments

* feat: decouple useCacheableSection and <CacheableSection>

* fix: avoid side effects if pwa is not enabled

* refactor: separate components to illustrate uCS decoupling

* chore: remove unused hook

* chore: translate user-facing strings

* chore: comment

* chore: tl strings

* chore: remove comments

* feat: add alerts to cacheable section

* fix: enable unregistration when pwa is not enabled

* feat: translations and alerts in useCacheableSection

* fix: add pwa-app to main build script

* chore: update yarn.lock

* fix: dependency resolutions

* feat: use alert for feedback when removing section

* feat: handle sections update error with alert feedback

* refactor: use async try/catch in removeSection()

* chore: rename to visualizations list

* chore: a newline

* chore: demo recordingState API

* fix: generate manifests in 'start' script too to avoid error

* refactor: make pwa config cleaner and more robust

* chore: update d2 config in pwa-app

* chore: rename to generateManifests now that it generates two

* chore: remove conditional chaining

* chore: remove unnecessary var

* fix: avoid DB-opening side effect when PWA is not enabled

* feat: clear rogue service workers

* feat: tear down caches & db if PWA is not enabled

* chore: update comment

* chore: update comments

* refactor: consolidate to one provider

* chore: update serve

* refactor: use modules from local app-runtime

* chore: update demo script to update local runtime

* chore: remove unused code that has moved to runtime

* chore: add 'verbose' to demo script

* refactor: move OfflineInterface to sw package

* refactor: move offline interface and provider to app adapter

* refactor: add pwaEnabled to app config & offline provider

* chore: update script

* feat(pwa-app): use online status

* chore: move 'serve' package to pwa-app

* refactor: quieter logging

* refactor(pwa-app): provide loading mask in app

* refactor: fix listener clean-up

* feat(pwa-app): show more offline API features

* refactor(pwa-app): show debounceDelay option

* chore: package resolutions

* chore(prettier): add vscode plugin workaround

* chore(pwa-app deps): update cli scripts

* refactor(registration): better custom register/update flow

* chore: use newest cli-style

* chore: update comment

* chore(pwa-app): add comment

* chore(sw): inline comments

* chore(sw): more comments

* chore(sw): more comments

* docs(pwa): update a bit

* chore(sw): dependencies

* chore(deps): add sw to deps

* fix(deps): bump @babel/preset-env to fix build error

* refactor(registration): change update function signature

* feat(sw): use service worker in development mode (#580)

* feat(sw): use sw in dev mode (WIP)

* chore(sections-db): switch to debug

* fix: use correct env vars for dev sw

* chore: use available var

* chore(pwa-app): remove unused tl strings

* feat(adapter): smarter error boundaries (#582)

* feat(adapter): add error boundary around app

* chore(pwa-app): use --debug in build script

* feat(adapter): check for SW update and reload in err boundary

* chore: change build order in `yarn build`

* chore(deps): update yarn.lock

* refactor(offline-interface): improve error protections

* docs: add link to PWA page from sidebar [skip-ci]

* refactor: use requests size instead of list

* chore(sw): use constants for message definitions

* docs(pwa): describe development mode

* fix(cli): change short_name to config.title in manifest.json

* refactor(pwa): prefix pwa_caching env vars

* refactor(cli): delete config.pwa from d2.config.json

* chore: clarify workbox precache comment

* chore(deps): bump react scripts

* chore: rename SW for consistency in file

* refactor(sw): break into multiple files

* refactor(sw): simplify fulfilled and pending requests

* refactor(error-boundary): use button and `onRetry` prop

* chore: remove unused pwaEnabled prop

* feat: show error message in fatal error boundary and allow copying stack trace to clipboard (#592)

* chore: brackets around 'if' blocks

Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com>

* chore(deps): use released app-runtime dependency

* refactor: rename sw package to 'pwa'

* refactor: use workspace resolution for pwa pkg

* chore: comment out './locales' to hopefully fix build on CI

* test: update error boundary test

* chore: clean up after alpha merge

* chore(shell): add to kssw explanation

* chore: update snapshot

* chore: update versions after merge

* chore: remove locales comment

Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com>
dhis2-bot added a commit that referenced this pull request Jul 23, 2021
# [7.3.0-alpha.1](v7.2.0...v7.3.0-alpha.1) (2021-07-23)

### Features

* add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592)
dhis2-bot added a commit that referenced this pull request Aug 31, 2021
# [7.6.0-alpha.1](v7.5.1...v7.6.0-alpha.1) (2021-08-31)

### Bug Fixes

* catch errors in completeRecording ([e67ae82](e67ae82))
* check whole URL against filter patterns ([5468114](5468114))
* only return sections with cached data from getCachedSections ([f6242d1](f6242d1))
* reopen indexedDB if global state resets ([0aded68](0aded68))
* return true if either cache or idb entry is removed ([43d8001](43d8001))
* simplify message payload to be compatible with firefox ([5e5a633](5e5a633))

### Features

* add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592)
* allow RegEx for filter patterns in d2.config.js ([9699330](9699330))
* use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37))
dhis2-bot added a commit that referenced this pull request Aug 31, 2021
# [7.6.0](v7.5.1...v7.6.0) (2021-08-31)

### Bug Fixes

* catch errors in completeRecording ([e67ae82](e67ae82))
* check whole URL against filter patterns ([5468114](5468114))
* only return sections with cached data from getCachedSections ([f6242d1](f6242d1))
* reopen indexedDB if global state resets ([0aded68](0aded68))
* return true if either cache or idb entry is removed ([43d8001](43d8001))
* simplify message payload to be compatible with firefox ([5e5a633](5e5a633))

### Features

* add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592)
* allow RegEx for filter patterns in d2.config.js ([9699330](9699330))
* use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37))
dhis2-bot added a commit that referenced this pull request Sep 8, 2021
# [8.0.0-beta.4](v8.0.0-beta.3...v8.0.0-beta.4) (2021-09-08)

### Bug Fixes

* **dependencies:** update app-runtime to v3 ([8777699](8777699))
* **offline-interface:** prevent infinite update loop in Chrome ([#638](#638)) ([079f6ea](079f6ea))
* **recording-mode:** handle fulfilled requests after recording error ([#642](#642)) ([928e2cb](928e2cb))
* import index.css in index.js so styles are applied ([8db1bf8](8db1bf8))
* **shell:** create new stacking context for roots ([324a095](324a095))
* catch errors in completeRecording ([e67ae82](e67ae82))
* check whole URL against filter patterns ([5468114](5468114))
* only return sections with cached data from getCachedSections ([f6242d1](f6242d1))
* reopen indexedDB if global state resets ([0aded68](0aded68))
* return true if either cache or idb entry is removed ([43d8001](43d8001))
* simplify message payload to be compatible with firefox ([5e5a633](5e5a633))

### Features

* add service worker and pwa capabilities ([#550](#550)) ([225069e](225069e)), closes [#580](#580) [#582](#582) [#592](#592)
* allow RegEx for filter patterns in d2.config.js ([9699330](9699330))
* use new headerbar with online status indicator ([#626](#626)) ([3bd7d37](3bd7d37))

### BREAKING CHANGES

* **dependencies:** This updates the app-platform to version 3 of the
app-runtime. That means that this version of the app-platform will only
work with apps that use version 3 of the app-runtime.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants