feat(adapter): smarter error boundaries #582

KaiVandivier · 2021-07-01T21:07:05Z

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

KaiVandivier · 2021-07-01T21:08:33Z

adapter/src/components/ErrorBoundary.js

-export class FatalErrorBoundary extends Component {
+export class ErrorBoundary extends Component {


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

KaiVandivier · 2021-07-01T21:08:56Z

adapter/src/components/styles/ErrorBoundary.style.js

-        position: absolute;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
+        height: 100%;
+        width: 100%;


By default, the mask will fill up its container

KaiVandivier · 2021-07-01T21:09:23Z

adapter/src/components/styles/ErrorBoundary.style.js

+    .fullscreen {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+    }
+


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

KaiVandivier · 2021-07-01T21:10:03Z

examples/pwa-app/package.json

-        "demo": "yarn build --force --verbose && yarn serve"
+        "demo": "yarn build --force --debug && yarn serve"


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

* 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>

# [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)

# [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))

# [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))

# [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.

KaiVandivier added 3 commits July 1, 2021 18:35

feat(adapter): add error boundary around app

6432885

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

6998256

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

3b3e146

KaiVandivier commented Jul 1, 2021

View reviewed changes

KaiVandivier requested review from mediremi and amcgee July 1, 2021 21:10

mediremi approved these changes Jul 2, 2021

View reviewed changes

KaiVandivier merged commit 4b09ab1 into feat-add-service-worker Jul 2, 2021

KaiVandivier deleted the feat-adapter-error-boundaries branch July 2, 2021 13:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(adapter): smarter error boundaries #582

feat(adapter): smarter error boundaries #582

KaiVandivier commented Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

KaiVandivier Jul 1, 2021

		export class FatalErrorBoundary extends Component {
		export class ErrorBoundary extends Component {

		"demo": "yarn build --force --verbose && yarn serve"
		"demo": "yarn build --force --debug && yarn serve"

feat(adapter): smarter error boundaries #582

feat(adapter): smarter error boundaries #582

Conversation

KaiVandivier commented Jul 1, 2021

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment

KaiVandivier Jul 1, 2021

Choose a reason for hiding this comment