Display error message when fetching script source timesout (microsoft#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();
  }