build(docs): Fix ApplicationInsights initialization for local dev builds (#24150)

As written, initialization of `ApplicationInsights` would fail when
running the site locally if `INSTRUMENTATION_KEY` is not set. This PR
updates it to simply not initialize `ApplicationInsights` if
`INSTRUMENTATION_KEY` is not set (which matches what we do in
production).

Also makes some updates to `env.template` comments.

---------

Co-authored-by: Alex Villarreal <[email protected]>

Author: Josmithr

docs/.env.template

@@ -1,10 +1,12 @@
 # `.env` file template.
-# Copy these contents into a local `.env` file in this directoy and fill in the values as needed.
+# Copy these contents into a local `.env` file in this directory and fill in the values as needed.
 # `.env` is configured to be git-ignored. Please do not override this behavior.
 
 # Flag that determines whether or not repo-local API documentation should be generated and included in the site build.
 # Only used in local development.
+# E.g. LOCAL_API_DOCS=true
 LOCAL_API_DOCS=<boolean>
 
-# Key used to authenticate with the Azure Application Insights API. Refer to README.md for more information.
+# Key used to authenticate with the Azure Application Insights API.
+# Refer to README.md for more information.
 INSTRUMENTATION_KEY=<instrumentation_key>

docs/src/appInsights.ts

@@ -11,22 +11,23 @@ import { ApplicationInsights } from "@microsoft/applicationinsights-web";
 const reactPlugin = new ReactPlugin();
 let appInsights: ApplicationInsights | undefined;
 
-if (siteConfig?.customFields?.INSTRUMENTATION_KEY === undefined) {
-	console.warn("Instrumentation Key is missing. App Insights will not be initialized.");
-}
-
 // Only initialize Application Insights if not in local development.
 // Remove the condition if you want to run Application Insights locally.
 if (typeof window !== "undefined" && window.location.hostname !== "localhost") {
-	appInsights = new ApplicationInsights({
-		config: {
-			connectionString: `InstrumentationKey=${siteConfig?.customFields?.INSTRUMENTATION_KEY}`,
-			enableAutoRouteTracking: true,
-			enableDebug: true,
-			extensions: [reactPlugin],
-		},
-	});
-	appInsights.loadAppInsights();
+	const instrumentationKey = siteConfig?.customFields?.INSTRUMENTATION_KEY;
+	if (instrumentationKey === undefined) {
+		console.warn("Instrumentation Key is missing. App Insights will not be initialized.");
+	} else {
+		appInsights = new ApplicationInsights({
+			config: {
+				connectionString: `InstrumentationKey=${instrumentationKey}`,
+				enableAutoRouteTracking: true,
+				enableDebug: true,
+				extensions: [reactPlugin],
+			},
+		});
+		appInsights.loadAppInsights();
+	}
 }
 
 export default appInsights;