Merge pull request #52 from contentstack/fix/metada_fix_ECO-3354

fix:[ECO-3354] Added datadog properties & Error boundary check

Author: abhishek305

ui/.eslintrc.js

@@ -3,13 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    "plugin:react/recommended",
-    "plugin:import/typescript",
-    "airbnb",
-    "airbnb-typescript",
-    "prettier",
-  ],
+  extends: ["plugin:react/recommended", "plugin:import/typescript", "airbnb", "airbnb-typescript", "prettier"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
@@ -23,6 +17,9 @@ module.exports = {
   },
   plugins: ["import", "react", "react-hooks", "@typescript-eslint"],
   rules: {
+    "arrow-body-style": 0,
+    "no-plusplus": 0,
+    "no-underscore-dangle": 0,
     "operator-linebreak": [
       "error",
       "after",

ui/package-lock.json

@@ -14,6 +14,7 @@
     "jotai": "^2.2.1",
     "jsoneditor": "^9.5.8",
     "jsoneditor-react": "^3.1.2",
+    "lodash": "^4.17.21",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -68,6 +69,7 @@
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^26.0.14",
+    "@types/lodash": "^4.14.195",
     "@types/node": "^20.3.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",

ui/package.json

@@ -0,0 +1,16 @@
+import Extension from "@contentstack/app-sdk/dist/src/extension";
+import { get, isEmpty, keys } from "lodash";
+
+function getAppLocation(sdk: Extension): string {
+  const locations = keys(sdk?.location);
+  let locationName = "";
+  for (let i = 0; i <= locations.length; i++) {
+    if (!isEmpty(get(sdk, `location.${locations[i]}`, undefined))) {
+      locationName = locations[i];
+      break;
+    }
+  }
+  return locationName;
+}
+
+export default getAppLocation;

ui/src/common/utils/function.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
 import React from "react";
-import { datadogRum } from '@datadog/browser-rum';
+import { datadogRum } from "@datadog/browser-rum";
 
 interface MyProps {
   children: React.ReactElement;
@@ -11,6 +11,8 @@ interface MyState {
   hasError: boolean;
 }
 
+const ENV: string = process.env.NODE_ENV;
+
 //  datadog-rum Installation
 datadogRum.init({
   applicationId: `${process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID}`,
@@ -22,13 +24,13 @@ datadogRum.init({
   trackInteractions: true,
   trackResources: true,
   trackLongTasks: true,
-  defaultPrivacyLevel: 'mask-user-input',
+  defaultPrivacyLevel: "mask-user-input",
   useCrossSiteSessionCookie: true,
 });
 
 // sending MetaData to Datadog RUM
-datadogRum.setGlobalContextProperty('Application Type', 'Marketplace');
-datadogRum.setGlobalContextProperty('Application Name', 'JSON Editor App');
+datadogRum.setGlobalContextProperty("Application Type", "Marketplace");
+datadogRum.setGlobalContextProperty("Application Name", "JSON Editor App");
 
 class ErrorBoundary extends React.Component<MyProps, MyState> {
   constructor(props: any) {
@@ -42,11 +44,13 @@ class ErrorBoundary extends React.Component<MyProps, MyState> {
     return { hasError: true };
   }
 
-  componentDidCatch(error: any, errorInfo: any) {
+  componentDidCatch(error: Error) {
     // You can also log the error to an error reporting service
-    // logErrorToMyService(error, errorInfo);
-    console.error("errorInfo ", errorInfo);
-    throw new Error(errorInfo);
+    if (ENV === "development") {
+      console.error(error);
+      return;
+    }
+    datadogRum.addError(error);
   }
 
   render() {

ui/src/components/ErrorBoundary/index.tsx

@@ -1,6 +1,7 @@
 /* Import React modules */
 /* eslint-disable */
 import React, { useState, useEffect } from "react";
+import { get } from "lodash";
 /* Import other node modules */
 
 import VenusHelp from "../../components/venus-help";
@@ -11,6 +12,7 @@ import tippy from "tippy.js";
 import localeTexts from "../../common/locale/en-us";
 import constants from "../../common/constants";
 import { mergeObjects } from "../../common/utils";
+import getAppLocation from "../../common/utils/function";
 import { TypeAppSdkConfigState } from "../../common/types";
 
 /* Import node module CSS */
@@ -23,12 +25,10 @@ import { useAppSdk } from "../../hooks/useAppSdk";
 import useAnalytics from "../../hooks/useAnalytics";
 
 const ConfigScreen: React.FC = function () {
-
   // error tracking hooks
-  const { addMetadata, trackError } = useJsErrorTracker();
+  const { setErrorsMetaData, trackError } = useJsErrorTracker();
   const { trackEvent } = useAnalytics();
   const [appSdk] = useAppSdk();
-  
 
   const [state, setState] = useState<TypeAppSdkConfigState>({
     installationData: {
@@ -45,28 +45,30 @@ const ConfigScreen: React.FC = function () {
     },
     appSdkInitialized: false,
   });
-  const [isStringified,setIsStringified]=useState(false);
+  const [isStringified, setIsStringified] = useState(false);
 
   useEffect(() => {
     ContentstackAppSdk.init()
       .then(async (appSdk) => {
         const sdkConfigData = appSdk?.location?.AppConfigWidget?.installation;
         if (sdkConfigData) {
-          const installationDataFromSDK =
-            await sdkConfigData?.getInstallationData();
+          const installationDataFromSDK = await sdkConfigData?.getInstallationData();
           const setInstallationDataOfSDK = sdkConfigData?.setInstallationData;
           setState({
             ...state,
-            installationData: mergeObjects(
-              state?.installationData,
-              installationDataFromSDK
-            ),
+            installationData: mergeObjects(state?.installationData, installationDataFromSDK),
             setInstallationData: setInstallationDataOfSDK,
             appSdkInitialized: true,
           });
-          setIsStringified(
-            state?.installationData?.configuration?.isStringified
-          );
+          setIsStringified(state?.installationData?.configuration?.isStringified);
+          const appLocation: string = getAppLocation(appSdk);
+          let properties = {
+            Stack: appSdk?.stack._data.api_key,
+            Organization: appSdk?.currentUser.defaultOrganization,
+            "App Location": appLocation,
+            "User Id": get(appSdk, "stack._data.collaborators.0.uid", ""), //first uuid from collaborators
+          };
+          setErrorsMetaData(properties); // set global event data for errors
         }
       })
       .catch((error) => {
@@ -117,60 +119,26 @@ const ConfigScreen: React.FC = function () {
       <div className="page-wrapper">
         <form data-testid="cs-form" className="config-wrapper">
           <div className="Form__item">
-            <div
-              className="Field Field--full json-field"
-              data-testid="cs-field"
-            >
-              <label
-                className="FieldLabel"
-                htmlFor="isStringified"
-                data-testid="cs-field-label"
-              >
+            <div className="Field Field--full json-field" data-testid="cs-field">
+              <label className="FieldLabel" htmlFor="isStringified" data-testid="cs-field-label">
                 {localeTexts.configFields.entrySaveRadioButton.label}
                 <span className="FieldLabel__required-text">
                   <span className="">*</span>
                 </span>
               </label>
-              <div
-                className="tippy-wrapper"
-                id="help-text"
-                data-testid="cs-tooltip"
-              >
+              <div className="tippy-wrapper" id="help-text" data-testid="cs-tooltip">
                 <VenusHelp />
               </div>
               <div className="Radio-wrapper">
                 <label data-testid="cs-radio-one" className="Radio label-text">
-                  <input
-                    id="jsonObject"
-                    type="radio"
-                    name="isStringified"
-                    required
-                    value="false"
-                    checked={!isStringified}
-                    onChange={updateCustomJSON}
-                  />
+                  <input id="jsonObject" type="radio" name="isStringified" required value="false" checked={!isStringified} onChange={updateCustomJSON} />
                   <span className="Radio__box"></span>
-                  <span className="Radio__label">
-                    {localeTexts.configFields.entrySaveRadioButton.jsonObject}
-                  </span>
+                  <span className="Radio__label">{localeTexts.configFields.entrySaveRadioButton.jsonObject}</span>
                 </label>
                 <label data-testid="cs-radio-two" className="Radio label-text">
-                  <input
-                    id="stringified"
-                    type="radio"
-                    name="isStringified"
-                    required
-                    value="true"
-                    checked={isStringified}
-                    onChange={updateCustomJSON}
-                  />
+                  <input id="stringified" type="radio" name="isStringified" required value="true" checked={isStringified} onChange={updateCustomJSON} />
                   <span className="Radio__box"></span>
-                  <span className="Radio__label">
-                    {
-                      localeTexts.configFields.entrySaveRadioButton
-                        .jsonStringified
-                    }
-                  </span>
+                  <span className="Radio__label">{localeTexts.configFields.entrySaveRadioButton.jsonStringified}</span>
                 </label>
               </div>
               <p className="InstructionText" data-testid="cs-instruction-text">

ui/src/containers/ConfigScreen/index.tsx

@@ -1,13 +1,18 @@
 import React, { useEffect, useState } from "react";
+import { get } from "lodash";
 import ContentstackAppSdk from "@contentstack/app-sdk";
 import constants, { eventNames } from "../../common/constants";
 import { isEmpty } from "../../common/utils";
 import { TypeSDKData } from "../../common/types";
 import "./styles.scss";
 import useAnalytics from "../../hooks/useAnalytics";
 import JSONEditor from "../../components/jsoneditor";
+import getAppLocation from "../../common/utils/function";
+import useJsErrorTracker from "../../hooks/useJsErrorTracker";
 
 const CustomField: React.FC = function () {
+  // error tracking hooks
+  const { setErrorsMetaData, trackError } = useJsErrorTracker();
   const [state, setState] = useState<TypeSDKData>({
     config: {},
     location: {},
@@ -48,51 +53,39 @@ const CustomField: React.FC = function () {
 
         if (initialData && !isEmpty(initialData)) {
           try {
-            jsonVal =
-              typeof initialData[0] === "string" ?
-                [
-                    JSON.parse(
-                      initialData[0]?.trim()?.length ? initialData[0] : "{}"
-                    ),
-                  ]
-                : initialData;
+            jsonVal = typeof initialData[0] === "string" ? [JSON.parse(initialData[0]?.trim()?.length ? initialData[0] : "{}")] : initialData;
           } catch (e) {
             jsonVal = [{}];
           }
           setJsonData(jsonVal);
         }
-        setSaveJsonData(
-          toStringify(isStringified, config?.isStringified) ?
-            [JSON.stringify(jsonVal[0])]
-            : jsonVal
-        );
-        trackEvent(APP_INITIALIZE_SUCCESS)
+        setSaveJsonData(toStringify(isStringified, config?.isStringified) ? [JSON.stringify(jsonVal[0])] : jsonVal);
+        trackEvent(APP_INITIALIZE_SUCCESS);
+        const appLocation: string = getAppLocation(appSdk);
+        const properties = {
+          Stack: appSdk?.stack._data.api_key,
+          Organization: appSdk?.currentUser.defaultOrganization,
+          "App Location": appLocation,
+          "User Id": get(appSdk, "stack._data.collaborators.0.uid", ""), // first uuid from collaborators
+        };
+        setErrorsMetaData(properties); // set global event data for errors
       })
       .catch((error) => {
+        trackError(error);
         console.error(constants.appSdkError, error);
-        trackEvent(APP_INITIALIZE_FAILURE)
+        trackEvent(APP_INITIALIZE_FAILURE);
       });
   }, []);
 
   const onChangeSave = (saveData: any) => {
-    state.location?.CustomField?.field?.setData(
-      toStringify(isStringified, state?.config?.isStringified) ?
-        [JSON.stringify(saveData)]
-        : [saveData]
-    );
+    state.location?.CustomField?.field?.setData(toStringify(isStringified, state?.config?.isStringified) ? [JSON.stringify(saveData)] : [saveData]);
   };
 
   useEffect(() => {
     state?.location?.CustomField?.field?.setData(saveJsonData);
   }, [saveJsonData]);
 
-  return (
-    <div className="layout-container">
-      {state?.appSdkInitialized && (
-        <JSONEditor onChange={onChangeSave} value={jsonData[0]} />
-      )}
-    </div>
-  );
+  return <div className="layout-container">{state?.appSdkInitialized && <JSONEditor onChange={onChangeSave} value={jsonData[0]} />}</div>;
 };
 
 export default CustomField;