fix: custom error handling

runtime/src/index.ts

@@ -22,6 +22,11 @@ export {
     clearSensitiveCaches,
 } from '@dhis2/app-service-offline'
 
-export { PluginSender, PluginWrapper } from '@dhis2/app-service-plugin'
+export {
+    PluginSender,
+    PluginWrapper,
+    usePluginErrorContext,
+    PluginErrorProvider,
+} from '@dhis2/app-service-plugin'
 
 export { Provider } from './Provider'

services/plugin/src/PluginContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, Dispatch, useContext, useState } from 'react'
+
+type PluginErrorContextType = {
+    onPluginError: any
+    setOnPluginError: any
+}
+
+const PluginErrorContext = createContext<PluginErrorContextType>({
+    onPluginError: null,
+    setOnPluginError: null,
+})
+
+const PluginErrorProvider = ({ children }: { children: React.Component }) => {
+    const [onPluginError, setOnPluginError] = useState(null)
+    const providerValue = {
+        onPluginError,
+        setOnPluginError,
+    }
+    return (
+        <PluginErrorContext.Provider value={providerValue}>
+            {children}
+        </PluginErrorContext.Provider>
+    )
+}
+
+const usePluginErrorContext = () => useContext(PluginErrorContext)
+
+export { PluginErrorContext, PluginErrorProvider, usePluginErrorContext }

services/plugin/src/PluginSender.tsx

@@ -76,11 +76,16 @@ export const PluginSender = ({
 
             // if iframe has sent initial request, send new props
             if (communicationReceived && iframeRef.current.contentWindow) {
-                postRobot.send(
-                    iframeRef.current.contentWindow,
-                    'updated',
-                    iframeProps
-                )
+                postRobot
+                    .send(
+                        iframeRef.current.contentWindow,
+                        'updated',
+                        iframeProps
+                    )
+                    .catch((err) => {
+                        // log postRobot errors, but do not bubble them up
+                        console.error(err)
+                    })
             }
         }
     }, [propsToPass, communicationReceived, updateMissingProps])

services/plugin/src/PluginWrapper.tsx

@@ -1,6 +1,7 @@
 import postRobot from 'post-robot'
 import React, { useCallback, useEffect, useState } from 'react'
 import { PluginErrorBoundary } from './PluginErrorBoundary'
+import { usePluginErrorContext } from './PluginContext'
 
 export const PluginWrapper = ({
     requiredProps,
@@ -9,6 +10,7 @@ export const PluginWrapper = ({
     requiredProps: [string]
     children: any
 }): any => {
+    const { setOnPluginError } = usePluginErrorContext()
     const [propsFromParent, setPropsFromParent] = useState<any>()
 
     const receivePropsFromParent = useCallback(
@@ -35,19 +37,27 @@ export const PluginWrapper = ({
             } else {
                 updateMissingProps(null)
             }
+
+            if (explictlyPassedProps.onError && setOnPluginError) {
+                setOnPluginError(() => (error: Error) => {
+                    explictlyPassedProps.onError(error)
+                })
+            }
         },
-        [requiredProps]
+        [requiredProps, setOnPluginError]
     )
 
     useEffect(() => {
-        // make first request for props to communicate that iframe is ready
-        postRobot
-            .send(window.top, 'getPropsFromParent')
-            .then(receivePropsFromParent)
-            .catch((err: Error) => {
-                console.error(err)
-            })
-    }, [receivePropsFromParent])
+        if (setOnPluginError) {
+            // make first request for props to communicate that iframe is ready
+            postRobot
+                .send(window.top, 'getPropsFromParent')
+                .then(receivePropsFromParent)
+                .catch((err: Error) => {
+                    console.error(err)
+                })
+        }
+    }, [receivePropsFromParent, setOnPluginError])
 
     useEffect(() => {
         // set up listener to listen for subsequent sends from parent window
@@ -62,9 +72,10 @@ export const PluginWrapper = ({
         return () => listener.cancel()
     }, [receivePropsFromParent])
 
-    return (
-        <PluginErrorBoundary onCustomError={propsFromParent?.onError || null}>
-            {children({ ...propsFromParent })}
-        </PluginErrorBoundary>
-    )
+    return children({ ...propsFromParent })
+    // return (
+    //     <PluginErrorBoundary onCustomError={propsFromParent?.onError || null}>
+    //         {children({ ...propsFromParent })}
+    //     </PluginErrorBoundary>
+    // )
 }

services/plugin/src/index.ts

@@ -1,3 +1,5 @@
 export { PluginSender } from './PluginSender'
 
 export { PluginWrapper } from './PluginWrapper'
+
+export * from './PluginContext'