updates

src/Components/api/Hooks/useDashboardEvent.js

@@ -18,7 +18,7 @@ export default function useDashboardEvent(elementId, initialState) {
 	useEffect(() => {
 		const pubSubToken = UniversalDashboard.subscribe(elementId, events)
 		return () => UniversalDashboard.unsubscribe(pubSubToken)
-	}, [elementId])
+	}, [])
 
 	const events = (msg, event) => {
 		switch (event.type) {

src/Components/badge/antdBadge.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { Badge } from "antd";
+import AntdErrorBoundary from "../framework/core/errorBoundries";
 
 export default ({ content, color }) => {
   return (
-    <div>
-      <Badge color={color}>
-        {UniversalDashboard.renderComponent(content)}
-      </Badge>
-    </div>
-  );
+		<AntdErrorBoundary>
+			<div>
+				<Badge color={color}>{UniversalDashboard.renderComponent(content)}</Badge>
+			</div>
+		</AntdErrorBoundary>
+  )
 };

src/Components/button/button.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { Button } from "antd"
+import AntdErrorBoundary from "../framework/core/errorBoundries"
 
 const AntdButton = props => {
 	const onClick = () => {
@@ -14,7 +15,15 @@ const AntdButton = props => {
 	}
 
 	return (
-		<Button {...props} htmlType={props.htmlType} type={props.buttonType} onClick={onClick} children={props.label} />
+		<AntdErrorBoundary>
+			<Button
+				{...props}
+				htmlType={props.htmlType}
+				type={props.buttonType}
+				onClick={onClick}
+				children={props.label}
+			/>
+		</AntdErrorBoundary>
 	)
 }
 

src/Components/form/antForm.js

@@ -4,6 +4,7 @@ import { Form, Button } from "antd/es"
 import "antd/lib/form/style/index.css"
 import "antd/lib/button/style/index.css"
 import { message } from "antd"
+import AntdErrorBoundary from "../framework/core/errorBoundries"
 
 export default ({ id, content, layout, formName }) => {
 	const [form] = Form.useForm()
@@ -37,18 +38,20 @@ export default ({ id, content, layout, formName }) => {
 	}
 
 	return (
-		<div style={{ maxWidth: 300, padding: 48 }}>
-			<Form id={id} form={form} name={formName || `form-${id}`} layout={layout} onFinish={onFormSubmit}>
-				{UniversalDashboard.renderComponent(content)}
-				<Form.Item {...tailLayout}>
-					<Button htmlType="submit" type="primary" style={{ marginRight: 16 }}>
-						Send
-					</Button>
-					<Button htmlType="button" type="dashed" onClick={onFormReset}>
-						Reset
-					</Button>
-				</Form.Item>
-			</Form>
-		</div>
+		<AntdErrorBoundary>
+			<div style={{ maxWidth: 300, padding: 48 }}>
+				<Form id={id} form={form} name={formName || `form-${id}`} layout={layout} onFinish={onFormSubmit}>
+					{UniversalDashboard.renderComponent(content)}
+					<Form.Item {...tailLayout}>
+						<Button htmlType="submit" type="primary" style={{ marginRight: 16 }}>
+							Send
+						</Button>
+						<Button htmlType="button" type="dashed" onClick={onFormReset}>
+							Reset
+						</Button>
+					</Form.Item>
+				</Form>
+			</div>
+		</AntdErrorBoundary>
 	)
 }

src/Components/form/antFormItem.js

@@ -1,11 +1,14 @@
 import React from "react"
 import { Form } from "antd"
 import "antd/lib/form/style/index.css"
+import AntdErrorBoundary from "../framework/core/errorBoundries"
 
 export default ({ id, label, name, rules, content, ...rest }) => {
 	return (
-		<Form.Item key={id} label={label} name={name} rules={rules && [rules]} {...rest}>
-			{UniversalDashboard.renderComponent(content)}
-		</Form.Item>
+		<AntdErrorBoundary>
+			<Form.Item key={id} label={label} name={name} rules={rules && [rules]} {...rest}>
+				{UniversalDashboard.renderComponent(content)}
+			</Form.Item>
+		</AntdErrorBoundary>
 	)
 }

src/Components/framework/core/errorBoundries.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { useErrorBoundary } from "use-error-boundary"
+import { Alert } from "antd"
+
+const { ErrorBoundary } = Alert
+export default function AntdErrorBoundary({ children }) {
+	const {
+		didCatch, // boolean - Whether the ErrorBoundary catched something
+		error, // null or the error
+		errorInfo, // null or the error info as described in the react docs
+	} = useErrorBoundary()
+
+	return (
+		<ErrorBoundary message={`An Uncaught Error`} description={errorInfo}>
+			{children}
+		</ErrorBoundary>
+	)
+}

src/Dashboard/dashboard.ps1

@@ -61,9 +61,10 @@ New-UDDashboard -Title "Dashboard" -Pages @(
                 } 
             )
         } -Layout vertical -OnSubmit {
+            $t = ConvertFrom-Json $EventData 
             Set-UDElement -Id "info2" -Properties @{
                 attributes = @{
-                    description = (ConvertFrom-Json $EventData | ConvertTo-Json)
+                    description = "$($t.username)"
                     visible = $true 
                     preset = "error"
                     # description = (ConvertFrom-Json -InputObject $EventData | ConvertTo-Json)

src/app/ud-dashboard.jsx

@@ -9,7 +9,7 @@ import { base } from '@theme-ui/presets'
 import toaster from './services/toaster'
 import LazyElement from './basics/lazy-element.jsx'
 import copy from 'copy-to-clipboard'
-
+import {useLocation} from 'react-router-dom'
 function getMeta(metaName) {
   const metas = document.getElementsByTagName('meta');
 
@@ -185,8 +185,8 @@ function connectWebSocket(sessionId, location, setLoading, history) {
           'clientEvent',
           data.eventId,
           data.eventName,
-          data.eventData,
-          location,
+          `${data.eventData}`,
+          "",
         )
         .catch(function(e) {
           toaster.show({
@@ -294,7 +294,7 @@ function Dashboard({ history }) {
   const [hasError, setHasError] = useState(false)
   const [error, setError] = useState(null)
   const [loading, setLoading] = useState(true)
-  const [location, setLocation] = useState(null)
+  const [location, setLocation] = useState(useLocation())
 
   useEffect(() => {
     if (dashboard) return

src/package.json

@@ -46,7 +46,8 @@
     "react-tooltip": "^3.11.1",
     "sunflower-antd": "^1.0.0-beta.3",
     "theme-ui": "0.3.1",
-    "use-dark-mode": "^2.3.1"
+    "use-dark-mode": "^2.3.1",
+    "use-error-boundary": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",