feat: plugin error handling

dhis2 · Feb 6, 2023 · 7fd0605 · 7fd0605
1 parent c5155d8
commit 7fd0605
Show file tree

Hide file tree

Showing 7 changed files with 622 additions and 1,460 deletions.
diff --git a/adapter/package.json b/adapter/package.json
@@ -22,7 +22,8 @@
     ],
     "dependencies": {
         "@dhis2/pwa": "10.2.0",
-        "moment": "^2.24.0"
+        "moment": "^2.24.0",
+        "post-robot": "^10.0.46"
     },
     "devDependencies": {
         "@dhis2/cli-app-scripts": "10.2.0",

diff --git a/adapter/src/components/AppWrapper.js b/adapter/src/components/AppWrapper.js
@@ -1,21 +1,47 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {createContext, useContext, useState} from 'react'
 import { useCurrentUserLocale } from '../utils/useLocale.js'
 import { useVerifyLatestUser } from '../utils/useVerifyLatestUser.js'
 import { Alerts } from './Alerts.js'
 import { ConnectedHeaderBar } from './ConnectedHeaderBar.js'
 import { ErrorBoundary } from './ErrorBoundary.js'
 import { LoadingMask } from './LoadingMask.js'
 import { styles } from './styles/AppWrapper.style.js'
+import { PluginErrorProvider, usePluginErrorContext } from '@dhis2/app-runtime'
 
-export const AppWrapper = ({ children, plugin }) => {
+const PluginErrorBoundaryWrapper = ({children}) => {
+    const {onPluginError} = usePluginErrorContext()
+    return (
+        <ErrorBoundary plugin={true} onPluginError={onPluginError} onRetry={() => window.location.reload()}>
+            {children}
+        </ErrorBoundary>    
+    )
+}
+
+const AppWrapper = ({ children, plugin }) => {
     const { loading: localeLoading } = useCurrentUserLocale()
-    const { loading: latestUserLoading } = useVerifyLatestUser()
+    const { loading: latestUserLoading } = useVerifyLatestUser()    
 
     if (localeLoading || latestUserLoading) {
         return <LoadingMask />
     }
 
+    if (plugin) {
+        return (
+            <div className="app-shell-adapter">
+                <style jsx>{styles}</style>
+                <div className="app-shell-app">
+                    <PluginErrorProvider>
+                        <PluginErrorBoundaryWrapper>
+                            {children}
+                        </PluginErrorBoundaryWrapper>
+                    </PluginErrorProvider>
+                </div>
+                <Alerts />
+            </div>
+        )        
+    }
+
     return (
         <div className="app-shell-adapter">
             <style jsx>{styles}</style>
@@ -34,3 +60,5 @@ AppWrapper.propTypes = {
     children: PropTypes.node,
     plugin: PropTypes.bool,
 }
+
+export {usePluginErrorContext, AppWrapper}
diff --git a/adapter/src/components/ErrorBoundary.js b/adapter/src/components/ErrorBoundary.js
@@ -36,6 +36,13 @@ export class ErrorBoundary extends Component {
     }
 
     componentDidCatch(error, errorInfo) {
+        if (this.props.plugin) {
+            if (this.props.onPluginError) {
+                console.log('special handling for error (from app)')
+                console.error(error)
+                this.props.onPluginError(error)
+            }
+        }
         this.setState({
             error,
             errorInfo,
@@ -58,6 +65,16 @@ export class ErrorBoundary extends Component {
     render() {
         const { children, fullscreen, onRetry } = this.props
         if (this.state.error) {
+            if (this.props.plugin) {
+                return (
+                    <>
+                        <style jsx>{styles}</style>
+                        <div className='pluginBoundary'>
+                            <span>I am the default plugin boundary</span>
+                        </div>
+                    </>
+                )
+            }
             return (
                 <div className={cx('mask', { fullscreen })}>
                     <style jsx>{styles}</style>

diff --git a/adapter/src/components/styles/ErrorBoundary.style.js b/adapter/src/components/styles/ErrorBoundary.style.js
@@ -5,7 +5,8 @@ const bgColor = '#F4F6F8',
     primaryTextColor = '#000000',
     secondaryTextColor = '#494949',
     errorColor = '#D32F2F',
-    grey050 = '#FBFCFD'
+    grey050 = '#FBFCFD',
+    red200 = '#ffcdd2'
 
 export default css`
     .mask {
@@ -100,4 +101,13 @@ export default css`
         color: ${errorColor};
         font-family: Menlo, Courier, monospace !important;
     }
+
+    .pluginBoundary {
+        background-color: ${red200};
+    }
+
+    .pluginBoundary span {
+        display: inline-block;
+    }
+    
 `
diff --git a/adapter/src/index.js b/adapter/src/index.js
@@ -1,7 +1,7 @@
 import { checkForSWUpdateAndReload } from '@dhis2/pwa'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { AppWrapper } from './components/AppWrapper.js'
+import { usePluginErrorContext, AppWrapper } from './components/AppWrapper.js'
 import { ErrorBoundary } from './components/ErrorBoundary.js'
 import { OfflineInterfaceProvider } from './components/OfflineInterfaceContext.js'
 import { PWALoadingBoundary } from './components/PWALoadingBoundary.js'
@@ -16,7 +16,11 @@ const AppAdapter = ({
     plugin,
     children,
 }) => (
-    <ErrorBoundary fullscreen onRetry={checkForSWUpdateAndReload}>
+    <ErrorBoundary
+        plugin={plugin}
+        fullscreen
+        onRetry={checkForSWUpdateAndReload}
+    >
         <OfflineInterfaceProvider>
             <PWALoadingBoundary>
                 <ServerVersionProvider
@@ -44,3 +48,4 @@ AppAdapter.propTypes = {
 }
 
 export default AppAdapter
+export { AppAdapter as AppAdapter, usePluginErrorContext }
diff --git a/shell/package.json b/shell/package.json
@@ -16,10 +16,10 @@
     },
     "dependencies": {
         "@dhis2/app-adapter": "10.2.0",
-        "@dhis2/app-runtime": "^3.6.1",
+        "@dhis2/app-runtime": "^3.8.0",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/pwa": "10.2.0",
-        "@dhis2/ui": "^8.6.2",
+        "@dhis2/ui": "^8.7.7",
         "classnames": "^2.2.6",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2",