Display error message when fetching script source timesout (#11276)

For #11242
* Add error for timeout
* Add imports

Author: DonJayamanne

src/client/datascience/ipywidgets/ipywidgetHandler.ts

@@ -104,7 +104,8 @@ export class IPyWidgetHandler implements IInteractiveWindowListener {
             sendTelemetryEvent(Telemetry.IPyWidgetLoadFailure, 0, {
                 isOnline: payload.isOnline,
                 moduleHash: this.hash(payload.moduleName),
-                moduleVersion: payload.moduleVersion
+                moduleVersion: payload.moduleVersion,
+                timedout: payload.timedout
             });
         } catch {
             // do nothing on failure

src/client/telemetry/index.ts

@@ -1967,7 +1967,13 @@ export interface IEventNamePropertyMapping {
     /**
      * Telemetry event sent when an ipywidget module fails to load. Module name is hashed.
      */
-    [Telemetry.IPyWidgetLoadFailure]: { isOnline: boolean; moduleHash: string; moduleVersion: string };
+    [Telemetry.IPyWidgetLoadFailure]: {
+        isOnline: boolean;
+        moduleHash: string;
+        moduleVersion: string;
+        // Whether we timedout getting the source of the script (fetching script source in extension code).
+        timedout: boolean;
+    };
     /**
      * Telemetry event sent when an loading of 3rd party ipywidget JS scripts from 3rd party source has been disabled.
      */

src/datascience-ui/interactive-common/redux/reducers/types.ts

@@ -220,6 +220,7 @@ export interface ILoadIPyWidgetClassFailureAction {
     isOnline: boolean;
     // tslint:disable-next-line: no-any
     error: any;
+    timedout: boolean;
 }
 export type LoadIPyWidgetClassDisabledAction = {
     className: string;

src/datascience-ui/ipywidgets/container.tsx

@@ -6,6 +6,7 @@
 import * as isonline from 'is-online';
 import * as React from 'react';
 import { Store } from 'redux';
+import '../../client/common/extensions';
 import { createDeferred, Deferred } from '../../client/common/utils/async';
 import {
     IInteractiveWindowMapping,
@@ -137,7 +138,8 @@ export class WidgetManagerComponent extends React.Component<Props> {
         moduleVersion: string,
         isOnline: boolean,
         // tslint:disable-next-line: no-any
-        error: any
+        error: any,
+        timedout: boolean
     ): CommonAction<ILoadIPyWidgetClassFailureAction> {
         return {
             type: CommonActionType.LOAD_IPYWIDGET_CLASS_FAILURE,
@@ -148,16 +150,25 @@ export class WidgetManagerComponent extends React.Component<Props> {
                     moduleName,
                     moduleVersion,
                     isOnline,
+                    timedout,
                     error,
                     cdnsUsed: this.widgetsCanLoadFromCDN
                 }
             }
         };
     }
-    // tslint:disable-next-line: no-any
-    private async handleLoadError(className: string, moduleName: string, moduleVersion: string, error: any) {
+    private async handleLoadError(
+        className: string,
+        moduleName: string,
+        moduleVersion: string,
+        // tslint:disable-next-line: no-any
+        error: any,
+        timedout: boolean = false
+    ) {
         const isOnline = await isonline.default({ timeout: 1000 });
-        this.props.store.dispatch(this.createLoadErrorAction(className, moduleName, moduleVersion, isOnline, error));
+        this.props.store.dispatch(
+            this.createLoadErrorAction(className, moduleName, moduleVersion, isOnline, error, timedout)
+        );
     }
 
     /**
@@ -188,6 +199,7 @@ export class WidgetManagerComponent extends React.Component<Props> {
             setTimeout(() => {
                 // tslint:disable-next-line: no-console
                 console.error(`Timeout waiting to get widget source for ${moduleName}, ${moduleVersion}`);
+                this.handleLoadError('<class>', moduleName, moduleVersion, new Error('Timeout'), true).ignoreErrors();
                 if (deferred) {
                     deferred.resolve();
                 }