Added react hook for App Insights (#1574)

* added config for disabling cfg * revert comment * created hook to use app insights, removed code duplication * removed comment * added cfg config * added comment
SSWConsulting · Oct 16, 2024 · 23bb717 · 23bb717
1 parent bd206cf
commit 23bb717
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 233 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,18 +1,12 @@
 import wrapPageElementWithTransition from './src/helpers/wrapPageElement.js';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 
 require('gatsby-remark-vscode/styles.css');
 
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
-appInsights.loadAppInsights();
-appInsights.addTelemetryInitializer((item) => {
-  item.tags['ai.cloud.role'] = 'SSW.Rules-StaticClientPage';
-});
-appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview
+export const onRouteUpdate = () => {
+  if (window.appInsights && window.appInsights.trackPage) {
+    window.appInsights.trackPage();
+  }
+};
 
 // Page Transitions
 export const wrapPageElement = wrapPageElementWithTransition;
diff --git a/src/components/acknowledgements/acknowledgements.js b/src/components/acknowledgements/acknowledgements.js
@@ -2,16 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PlaceHolderImage from '../../images/ssw-employee-profile-placeholder-sketch.jpg';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
-
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
-appInsights.loadAppInsights();
+import useAppInsights from '../../hooks/useAppInsights';
 
 const Acknowledgements = ({ authors, location }) => {
+  const { trackTrace } = useAppInsights();
+
   function ProfileBadge(props) {
     const author = props.author;
     return (
@@ -29,12 +24,8 @@ const Acknowledgements = ({ authors, location }) => {
 
   function ProfileImg({ author }) {
     const { noimage, img, title, url } = author;
-
     if (!title) {
-      appInsights.trackTrace({
-        message: `Profile title is missing at ${location.href}`,
-        severityLevel: 2,
-      });
+      trackTrace(`Profile title is missing at ${location.href}`, 2);
     }
 
     const getImgSource = () => {

diff --git a/src/components/bookmark/bookmark.js b/src/components/bookmark/bookmark.js
@@ -9,13 +9,7 @@ import {
 } from '../../services/apiService';
 import { useAuthService } from '../../services/authService';
 import PropTypes from 'prop-types';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
-
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
+import useAppInsights from '../../hooks/useAppInsights';
 
 const Bookmark = (props) => {
   const { ruleId } = props;
@@ -25,17 +19,16 @@ const Bookmark = (props) => {
   const { isAuthenticated, user, loginWithRedirect } = useAuth0();
   const { fetchIdToken } = useAuthService();
 
+  const { trackException } = useAppInsights();
+
   useEffect(() => {
     if (isAuthenticated) {
       GetBookmarksForUser(user.sub, ruleId)
         .then((success) => {
           setBookmarked(success.bookmarkStatus);
         })
         .catch((err) => {
-          appInsights.trackException({
-            error: new Error(err),
-            severityLevel: 3,
-          });
+          trackException(err, 3);
         });
     }
   }, [user, change]);
@@ -51,20 +44,14 @@ const Bookmark = (props) => {
               setChange(change + 1);
             })
             .catch((err) => {
-              appInsights.trackException({
-                error: new Error(err),
-                severityLevel: 3,
-              });
+              trackException(err, 3);
             })
         : RemoveBookmark({ ruleGuid: ruleId, UserId: user.sub }, jwt)
             .then(() => {
               setChange(change + 1);
             })
             .catch((err) => {
-              appInsights.trackException({
-                error: new Error(err),
-                severityLevel: 3,
-              });
+              trackException(err, 3);
             });
     } else {
       if (window.confirm('Sign in to bookmark this rule')) {

diff --git a/src/components/comments-not-connected/comments-not-connected.js b/src/components/comments-not-connected/comments-not-connected.js
@@ -10,12 +10,7 @@ import { useAuthService } from '../../services/authService';
 import DisqusIcon from '-!svg-react-loader!../../images/disqusIcon.svg';
 
 import { useAuth0 } from '@auth0/auth0-react';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
+import useAppInsights from '../../hooks/useAppInsights';
 
 const CommentsNotConnected = ({ userCommentsConnected, setState, state }) => {
   const [disqusUsername, setDisqusUsername] = useState();
@@ -24,6 +19,8 @@ const CommentsNotConnected = ({ userCommentsConnected, setState, state }) => {
   const { user } = useAuth0();
   const { fetchIdToken } = useAuthService();
 
+  const { trackException } = useAppInsights();
+
   function connectAccounts() {
     if (disqusUsername) {
       GetDisqusUser(disqusUsername)
@@ -48,17 +45,11 @@ const CommentsNotConnected = ({ userCommentsConnected, setState, state }) => {
               }
             })
             .catch((err) => {
-              appInsights.trackException({
-                error: new Error(err),
-                severityLevel: 3,
-              });
+              trackException(err, 3);
             });
         })
         .catch((err) => {
-          appInsights.trackException({
-            error: new Error(err),
-            severityLevel: 3,
-          });
+          trackException(err, 3);
         });
     }
   }

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -10,18 +10,10 @@ import {
   faPlusCircle,
   faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import { MegaMenuLayout } from 'ssw.megamenu';
 import { graphql, useStaticQuery, navigate } from 'gatsby';
 import classNames from 'classnames';
-
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
-
-appInsights.loadAppInsights();
+import useAppInsights from '../../hooks/useAppInsights';
 
 // Example of a component-specific page transition
 const AnimatedContainer = posed.div({
@@ -109,6 +101,8 @@ const Header = ({ displayActions }) => {
 };
 
 const ActionButtons = () => {
+  const { trackEvent } = useAppInsights();
+
   return (
     <div className="action-btn-container max-sm:order-2 flex justify-items-end align-middle">
       <Tooltip text="Try out RulesGPT" showDelay={3000} hideDelay={18000}>
@@ -118,9 +112,7 @@ const ActionButtons = () => {
           href="https://rulesgpt.ssw.com.au"
           className="action-btn-link-underlined"
           onClick={() => {
-            appInsights.trackEvent({
-              name: 'RulesGPTButtonPressed',
-            });
+            trackEvent('RulesGPTButtonPressed');
           }}
         >
           <GPTIcon className="group group-hover:[&>circle]:fill-ssw-red" />

diff --git a/src/components/profile-content/profile-content.js b/src/components/profile-content/profile-content.js
@@ -21,7 +21,6 @@ import MD from 'gatsby-custom-md';
 import GreyBox from '../greybox/greybox';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Filter } from '../profile-filter-menu/profile-filter-menu';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 
 import CommentsNotConnected from '../comments-not-connected/comments-not-connected';
 import DisableDisqusPrivacy from '../disable-disqus-privacy/disable-disqus-privacy';
@@ -33,12 +32,7 @@ import {
   faFileLines,
   faBook,
 } from '@fortawesome/free-solid-svg-icons';
-
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
+import useAppInsights from '../../hooks/useAppInsights';
 
 const ProfileContent = (props) => {
   const [bookmarkedRules, setBookmarkedRules] = useState([]);
@@ -53,7 +47,7 @@ const ProfileContent = (props) => {
   const [viewStyle, setViewStyle] = useState('titleOnly');
   const { user, isAuthenticated } = useAuth0();
   const { fetchIdToken } = useAuthService();
-
+  const { trackException } = useAppInsights();
   const handleOptionChange = (e) => {
     setViewStyle(e.target.value);
   };
@@ -71,20 +65,14 @@ const ProfileContent = (props) => {
               props.setState(props.state + 1);
             })
             .catch((err) => {
-              appInsights.trackException({
-                error: new Error(err),
-                severityLevel: 3,
-              });
+              trackException(err, 3);
             })
         : RemoveReaction({ ruleGuid: ruleGuid, UserId: user.sub }, jwt)
             .then(() => {
               setChange(change + 1);
             })
             .catch((err) => {
-              appInsights.trackException({
-                error: new Error(err),
-                severityLevel: 3,
-              });
+              trackException(err, 3);
             });
     }
   }
@@ -109,10 +97,7 @@ const ProfileContent = (props) => {
         props.setBookmarkedRulesCount(bookmarkedRulesSpread.length);
       })
       .catch((err) => {
-        appInsights.trackException({
-          error: new Error(err),
-          severityLevel: 3,
-        });
+        trackException(err, 3);
       });
   }
 
@@ -144,10 +129,7 @@ const ProfileContent = (props) => {
     const jwt = await fetchIdToken();
     GetUser(user.sub, jwt).then((success) => {
       if (!success) {
-        appInsights.trackException({
-          error: new Error('Error getting user'),
-          severityLevel: 3,
-        });
+        trackException(err, 3);
         return;
       }
 
@@ -166,10 +148,7 @@ const ProfileContent = (props) => {
             }
           })
           .catch((err) => {
-            appInsights.trackException({
-              error: new Error(err),
-              severityLevel: 3,
-            });
+            trackException(err, 3);
           });
       }
     });
@@ -236,10 +215,7 @@ const ProfileContent = (props) => {
         props.setSuperDislikedRulesCount(superDislikedRules.length);
       })
       .catch((err) => {
-        appInsights.trackException({
-          error: new Error(err),
-          severityLevel: 3,
-        });
+        trackException(err, 3);
       });
   }
 
@@ -362,10 +338,7 @@ const RuleList = ({
         setState(state + 1);
       })
       .catch((err) => {
-        appInsights.trackException({
-          error: new Error(err),
-          severityLevel: 3,
-        });
+        trackException(err, 3);
       });
   }
 

diff --git a/src/components/reaction/reaction.js b/src/components/reaction/reaction.js
@@ -9,13 +9,7 @@ import {
   RemoveReaction,
 } from '../../services/apiService';
 import { useAuthService } from '../../services/authService';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
-
-const appInsights = new ApplicationInsights({
-  config: {
-    connectionString: process.env.APPLICATIONINSIGHTS_CONNECTION_STRING,
-  },
-});
+import useAppInsights from '../../hooks/useAppInsights';
 
 const Reaction = (props) => {
   const { ruleId } = props;
@@ -29,6 +23,8 @@ const Reaction = (props) => {
   const { isAuthenticated, user, loginWithRedirect } = useAuth0();
   const { fetchIdToken } = useAuthService();
 
+  const { trackException } = useAppInsights();
+
   useEffect(() => {
     if (isAuthenticated) {
       GetReactionForUser(ruleId, user.sub)
@@ -40,10 +36,7 @@ const Reaction = (props) => {
           setCurrentReactionType(success.userStatus);
         })
         .catch((err) => {
-          appInsights.trackException({
-            error: new Error(err),
-            severityLevel: 3,
-          });
+          trackException(err, 3);
         });
     } else {
       setCurrentReactionType(null);
@@ -55,10 +48,7 @@ const Reaction = (props) => {
           setSuperDisikesCount(success.superDislikeCount ?? 0);
         })
         .catch((err) => {
-          appInsights.trackException({
-            error: new Error(err),
-            severityLevel: 3,
-          });
+          trackException(err, 3);
         });
     }
   }, [change, user]);
@@ -91,10 +81,7 @@ const Reaction = (props) => {
             setChange(change + 1);
           })
           .catch((err) => {
-            appInsights.trackException({
-              error: new Error(err),
-              severityLevel: 3,
-            });
+            trackException(err, 3);
           });
       } else {
         if (type == ReactionType.SuperLike) {
@@ -115,10 +102,7 @@ const Reaction = (props) => {
             setChange(change + 1);
           })
           .catch((err) => {
-            appInsights.trackException({
-              error: new Error(err),
-              severityLevel: 3,
-            });
+            trackException(err, 3);
           });
       }
     } else {