refactor: conditional import app insights sdk (#3664)

packages/app-insights/src/node.ts

@@ -1,6 +1,5 @@
 import { trySafe } from '@silverhand/essentials';
 import type { TelemetryClient } from 'applicationinsights';
-import applicationinsights from 'applicationinsights';
 
 export const normalizeError = (error: unknown) => {
   const normalized = error instanceof Error ? error : new Error(String(error));
@@ -16,11 +15,16 @@ export const normalizeError = (error: unknown) => {
 class AppInsights {
   client?: TelemetryClient;
 
-  setup(cloudRole: string): boolean {
+  async setup(cloudRole: string): Promise<boolean> {
     if (this.client) {
       return true;
     }
 
+    if (!process.env.APPLICATIONINSIGHTS_CONNECTION_STRING) {
+      return false;
+    }
+
+    const { default: applicationinsights } = await import('applicationinsights');
     const ok = trySafe(() => applicationinsights.setup());
 
     if (!ok) {

packages/app-insights/src/react.ts

@@ -1,10 +1,11 @@
-import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js';
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import type { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js';
+import type { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import { type Optional } from '@silverhand/essentials';
 import { type ComponentType } from 'react';
 
 class AppInsightsReact {
   protected reactPlugin?: ReactPlugin;
+  protected withAITracking?: typeof withAITracking;
   protected appInsights?: ApplicationInsights;
 
   get instance(): Optional<ApplicationInsights> {
@@ -15,7 +16,7 @@ class AppInsightsReact {
     return this.appInsights?.trackPageView.bind(this.appInsights);
   }
 
-  setup(): boolean {
+  async setup(): Promise<boolean> {
     // The string needs to be normalized since it may contain '"'
     const connectionString = process.env.APPLICATIONINSIGHTS_CONNECTION_STRING?.replace(
       /^"?(.*)"?$/g,
@@ -31,7 +32,12 @@ class AppInsightsReact {
     }
 
     try {
+      const { ReactPlugin, withAITracking } = await import(
+        '@microsoft/applicationinsights-react-js'
+      );
+      const { ApplicationInsights } = await import('@microsoft/applicationinsights-web');
       // https://github.com/microsoft/applicationinsights-react-js#readme
+      this.withAITracking = withAITracking;
       this.reactPlugin = new ReactPlugin();
       this.appInsights = new ApplicationInsights({
         config: {
@@ -53,11 +59,11 @@ class AppInsightsReact {
   }
 
   withAppInsights<P>(Component: ComponentType<P>): ComponentType<P> {
-    if (!this.reactPlugin) {
+    if (!this.reactPlugin || !this.withAITracking) {
       return Component;
     }
 
-    return withAITracking(this.reactPlugin, Component, undefined, 'appInsightsWrapper');
+    return this.withAITracking(this.reactPlugin, Component, undefined, 'appInsightsWrapper');
   }
 }
 

packages/cloud/src/index.ts

@@ -8,7 +8,7 @@ dotenv.config({ path: await findUp('.env', {}) });
 
 const { appInsights } = await import('@logto/app-insights/node');
 
-if (appInsights.setup('logto-cloud')) {
+if (await appInsights.setup('logto-cloud')) {
   console.debug('Initialized ApplicationInsights');
 }
 

packages/console/src/App.tsx

@@ -26,10 +26,13 @@ import AppEndpointsProvider from './contexts/AppEndpointsProvider';
 import { AppThemeProvider } from './contexts/AppThemeProvider';
 import TenantsProvider, { TenantsContext } from './contexts/TenantsProvider';
 
-if (appInsightsReact.setup()) {
-  console.debug('Initialized ApplicationInsights');
-}
-
+// Use `.then()` for better compatibility, update to top-level await some day
+// eslint-disable-next-line unicorn/prefer-top-level-await
+void appInsightsReact.setup().then((success) => {
+  if (success) {
+    console.debug('Initialized ApplicationInsights');
+  }
+});
 void initI18n();
 
 function Content() {

packages/core/src/index.ts

@@ -10,7 +10,7 @@ dotenv.config({ path: await findUp('.env', {}) });
 
 const { appInsights } = await import('@logto/app-insights/node');
 
-if (appInsights.setup('logto')) {
+if (await appInsights.setup('logto')) {
   console.debug('Initialized ApplicationInsights');
 }
 

packages/ui/src/App.tsx

@@ -26,8 +26,14 @@ import { handleSearchParametersData } from './utils/search-parameters';
 
 import './scss/normalized.scss';
 
-if (shouldTrack && appInsightsReact.setup()) {
-  console.debug('Initialized ApplicationInsights');
+if (shouldTrack) {
+  // Use `.then()` for better compatibility, update to top-level await some day
+  // eslint-disable-next-line unicorn/prefer-top-level-await, promise/prefer-await-to-then
+  void appInsightsReact.setup().then((success) => {
+    if (success) {
+      console.debug('Initialized ApplicationInsights');
+    }
+  });
 }
 
 handleSearchParametersData();