applied feedback

Author: Edward Marzal

ui/package.json

@@ -7,6 +7,7 @@
     "@types/node": "^12.20.37",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
+    "@datadog/browser-rum": "^4.25.0",
     "ajv": "^8.8.2",
     "brace": "^0.11.1",
     "jsoneditor": "^9.5.8",

ui/src/components/ErrorBoundary/index.tsx

@@ -2,13 +2,35 @@
 /* eslint-disable react/destructuring-assignment */
 import React from "react";
 import TrackJS from "../../trackjs";
+import { datadogRum } from '@datadog/browser-rum';
 
-interface MyProps {}
+interface MyProps {
+  children: React.ReactElement;
+}
 
 interface MyState {
   hasError: boolean;
 }
 
+//datadog-rum Installation
+datadogRum.init({
+  applicationId: `${process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID}`,
+  clientToken: `${process.env.REACT_APP_DATADOG_RUM_CLIENT_TOKEN}`,
+  site: `${process.env.REACT_APP_DATADOG_RUM_SITE}`,
+  service: `${process.env.REACT_APP_DATADOG_RUM_SERVICE}`,
+  sampleRate: 100,
+  sessionReplaySampleRate: 20,
+  trackInteractions: true,
+  trackResources: true,
+  trackLongTasks: true,
+  defaultPrivacyLevel: 'mask-user-input',
+  useCrossSiteSessionCookie: true,
+});
+
+//sending MetaData to Datadog RUM
+datadogRum.setGlobalContextProperty('Application Type', 'Marketplace');
+datadogRum.setGlobalContextProperty('Application Name', 'JSON Editor App');
+
 class ErrorBoundary extends React.Component<MyProps, MyState> {
   constructor(props: any) {
     super(props);

ui/src/containers/ConfigScreen/index.tsx

@@ -19,7 +19,13 @@ import "tippy.js/dist/tippy.css";
 /* Import our CSS */
 import "./styles.scss";
 
+import useJsErrorTracker from "../../hooks/useJsErrorTracker";
+
 const ConfigScreen: React.FC = function () {
+
+  // error tracking hooks
+  const { addMetadata, trackError } = useJsErrorTracker();
+
   const [state, setState] = useState<TypeAppSdkConfigState>({
     installationData: {
       configuration: {
@@ -60,9 +66,17 @@ const ConfigScreen: React.FC = function () {
           setIsStringified(
             state?.installationData?.configuration?.isStringified
           );
+
+          // setting metadata for js error tracker
+          addMetadata("stack", `${appSdk?.stack._data.name}`);
+          addMetadata("organization", `${appSdk?.currentUser.defaultOrganization}`);
+          addMetadata("api_key", `${stackKey}`);
+          addMetadata("user_uid", `${appSdk?.stack._data.collaborators[0].uid}`);
+          
         }
       })
       .catch((error) => {
+        trackError(error);
         console.error(constants.appSdkError, error);
       });
   }, []);