XHR/Fetch enhancement - add additional telemetry from window.performance #1194 #1195

MSNev · 2020-02-20T22:48:53Z

No description provided.

MSNev · 2020-02-20T22:50:47Z

extensions/applicationinsights-dependencies-js/src/TraceParent.ts

@@ -12,24 +12,29 @@ export class Traceparent {
    private static DEFAULT_TRACE_FLAG = "01";
    private static DEFAULT_VERSION = "00";
    public spanId: string;
-    public traceFlag: string = Traceparent.DEFAULT_TRACE_FLAG;


Moved this to inside the constructor and referenced as self.xxx as by default TypeScript adds this automatically to it's constructor definition as this.xxxx and the "this." can't be minified.

MSNev · 2020-02-20T22:56:19Z

extensions/applicationinsights-dependencies-js/src/ajax.ts

 import { EventHelper } from './ajaxUtils';
 import { Traceparent } from './TraceParent';
+import dynamicProto from "@microsoft/dynamicproto-js";


Major refactor to add XHR/Fetch window.performance additional metrics.

Hiding private properties (by using dynamicProto)

refactoring out duplicate code
Nett effect of this change on the
Dependency plugin

Unminified (browser) = additional code of just over 37kb

Minified (browser) = 318 bytes LESS

AISKU

Unminified (browser) = additional code of just under 38Kb

Minified (browser) = 1081 bytes LESS

MSNev · 2020-02-20T22:57:40Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts

+    response?: Object
+}
+
+let strProperties = "properties";


Using string property lookups for multiple references to support and improve minification.

MSNev · 2020-02-20T22:58:08Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts

+}
+
+/** @ignore */
+function _populatePerfData(ajaxData:ajaxRecord, dependency:IDependencyTelemetry) {


New perf data

MSNev · 2020-02-20T22:59:08Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts


 export class XHRMonitoringState {
-    public openDone: boolean = false;


As eariler, moving populating the values so that Typescript doesn't place this in the constructor as "this.xxxx" and instead we can use self.xxxx

MSNev · 2020-02-20T22:59:32Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts

-    public completed = false;
-    public requestHeadersSize = null;
-    public requestHeaders = null;
-    public ttfb = null;


Removed as not used

MSNev · 2020-02-20T23:04:36Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts

-        this.spanID = spanID;
-        this._logger = logger;
+    public getAbsoluteUrl(): string {
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging


Adding so that TypeScript will generate a d.ts file the same as previously, however, the Rush plugin will remove the generated stub during packaging.

e.g. TS will create the function
ajaxRecord.prototype.getAbsoluteUrl = function() { ... }

But we will remove as this is just code bloat as the entire name can't be minified here, but by defining in the constructor and using dynamicProto() we remove this excessive "ajaxRecord.prototype." but we still end up with a class that defines the "getAbsoluteUrl" function on the ajaxRecord prototype

markwolff · 2020-02-20T22:51:00Z

AISKU/package.json

@@ -49,6 +49,7 @@
        "typescript": "2.5.3"
    },
    "dependencies": {
+        "@microsoft/dynamicproto-js": "^0.5.1",


It looks like all instances of this can be made devDependency

As part of consuming the module (dist-esm folder) this would be a dependency and not a just a devDependency...

shared/AppInsightsCore/rollup.config.js

markwolff · 2020-02-20T22:56:44Z

extensions/applicationinsights-dependencies-js/src/ajax.ts

+}
+
+/** @ignore */
+function _throwInternalCritical(ajaxMonitorInstance:AjaxMonitor, msgId: _InternalMessageId, message: string, properties?: Object, isUserAct?: boolean): void {


Why are these wrappers needed? Assuming they are for better minification?

For minification as they are called more than once so it removes several duplicate code definitions.

shared/AppInsightsCore/src/JavaScriptSDK/InstrumentHooks.ts

markwolff · 2020-02-27T19:34:56Z

shared/AppInsightsCore/src/JavaScriptSDK/InstrumentHooks.ts

+ * @param callbacks - The callbacks to configure and call whenever the function is called
+ * @param checkPrototype - If the function doesn't exist on the target should it attempt to hook the prototype function
+ */
+export function InstrumentFunc(target:any, funcName:string, callbacks: IInstrumentHooksCallbacks, checkPrototype:boolean = true): IInstrumentHook {


Do these functions make sense in core? Would it not make sense to include them in dynamicproto package?

They belong here as DynamicProto doesn't do anything like what these functions are doing.

markwolff · 2020-02-27T19:35:42Z

shared/AppInsightsCore/src/JavaScriptSDK.Enums/LoggingEnums.ts

@@ -92,6 +92,7 @@ export const _InternalMessageId = {
    InvalidEvent: 70,
    FailedMonitorAjaxSetRequestHeader: 71,
    SendBrowserInfoOnUserInit: 72,
-    PluginException: 73
+    PluginException: 73,
+    InstrumentationError: 74,


Where is this used?

I appear to have removed the usage I did have in an earlier iteration -- will remove.
It was an additional error callback to report that instrumenting failed.

MSNev · 2020-02-28T02:21:31Z

extensions/applicationinsights-dependencies-js/src/ajaxRecord.ts

+        if (serverTiming) {
+            let server = {};
+            _arrForEach(serverTiming, (value, idx) => {
+                let name = value[strName] || "" + idx;


Should add some additional checks / conversion to make sure the name can be validly set as a key to avoid exceptions.

README.md

xiao-lix · 2020-02-28T18:49:47Z

extensions/applicationinsights-dependencies-js/src/ajax.ts

+/** @ignore */
+function _throwInternalWarning(ajaxMonitorInstance:AjaxMonitor, msgId: _InternalMessageId, message: string, properties?: Object, isUserAct?: boolean): void {
+    ajaxMonitorInstance[strDiagLog]()[strThrowInternal](LoggingSeverity.WARNING, msgId, message, properties, isUserAct);
+}


Can you please explain what does this syntax mean here instance[]()[]()? where is ajaxMonitorInstance["dialog"] come from? Thanks :)

This
instance"diagLog""throwInternal"
is effectively the same as this.
instance.diagLog().throwInternal(...)

The primary difference is that the first situation allows for better minification (only) when the quoted strings are used more than once as the variables holding the quoted strings can be minified to 1 (or 2 characters) while the direct names cannot.

I should also added that for minification you MUST use variables to hold the strings as using quote strings actually adds more characters than it removes, and uglify will actually convert direct quoted strings back to the full names anyway.

extensions/applicationinsights-dependencies-js/src/ajax.ts

xiao-lix · 2020-02-28T19:12:40Z

extensions/applicationinsights-dependencies-js/src/ajax.ts

-    public processTelemetry(item: ITelemetryItem, itemCtx?: IProcessTelemetryContext) {
-        this.processNext(item, itemCtx);
-    }
+        let _fetchInitialized:boolean = false;      // fetch monitoring initialized


what's the difference to put these variables in constructor than leave outside? 🤔

Outside the constructor they become object (this) level properties and therefore all references will need to address them as this.xxxxx

This leads to 2 problems (especially for private / internal properties).

The names can no longer be minified and must always be referenced as this.xxx (or self.xxxx)

They are now exposed and can be altered externally, part of the point of private properties is they should be internal to the implementation / class.

By moving them into the constructor the "scope" (visibility) of these variables is now limited to the within the constructor and any and all functions defined within the constructor.

Shorter answer

Better minification

Hiding private / internal properties, only used to track internal state.

…ow.performance #1194

MSNev requested a review from a team as a code owner February 20, 2020 22:48

MSNev commented Feb 20, 2020

View reviewed changes

markwolff reviewed Feb 21, 2020

View reviewed changes

MSNev force-pushed the MSNev/XhrEnhancements branch from a91715d to 8b801e1 Compare February 21, 2020 02:08

MSNev changed the title ~~XHR/Fetch enhancement for office - add additional telemetry from window.performance #1194~~ XHR/Fetch enhancement - add additional telemetry from window.performance #1194 Feb 21, 2020

MSNev force-pushed the MSNev/XhrEnhancements branch 9 times, most recently from 7b9b718 to 404eda5 Compare February 26, 2020 01:53

markwolff reviewed Feb 27, 2020

View reviewed changes

MSNev force-pushed the MSNev/XhrEnhancements branch from 404eda5 to cefd4e2 Compare February 28, 2020 02:19

MSNev commented Feb 28, 2020

View reviewed changes

README.md Show resolved Hide resolved

xiao-lix reviewed Feb 28, 2020

View reviewed changes

extensions/applicationinsights-dependencies-js/src/ajax.ts Show resolved Hide resolved

xiao-lix reviewed Feb 28, 2020

View reviewed changes

extensions/applicationinsights-dependencies-js/src/ajax.ts Show resolved Hide resolved

xiao-lix reviewed Feb 28, 2020

View reviewed changes

MSNev force-pushed the MSNev/XhrEnhancements branch from cefd4e2 to 4951cc1 Compare February 28, 2020 23:49

XHR/Fetch enhancement for office - add additional telemetry from wind…

98d8f7a

…ow.performance #1194

MSNev force-pushed the MSNev/XhrEnhancements branch from 4951cc1 to 98d8f7a Compare March 2, 2020 20:27

markwolff approved these changes Mar 2, 2020

View reviewed changes

MSNev merged commit 7afceba into master Mar 2, 2020

MSNev deleted the MSNev/XhrEnhancements branch March 11, 2020 19:00

snyk-bot mentioned this pull request Apr 4, 2020

[Snyk] Upgrade @microsoft/applicationinsights-web from 2.4.4 to 2.5.2 emilbolet/bolet.io-OLD#11

Closed

snyk-bot mentioned this pull request Apr 17, 2020

[Snyk] Upgrade @microsoft/applicationinsights-web from 2.4.4 to 2.5.3 emilbolet/bolet.io-OLD#14

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

XHR/Fetch enhancement - add additional telemetry from window.performance #1194 #1195

XHR/Fetch enhancement - add additional telemetry from window.performance #1194 #1195

MSNev commented Feb 20, 2020

MSNev Feb 20, 2020

MSNev Feb 20, 2020 •

edited

Loading

MSNev Feb 20, 2020 •

edited

Loading

MSNev Feb 20, 2020

MSNev Feb 20, 2020

MSNev Feb 20, 2020

MSNev Feb 20, 2020

markwolff Feb 20, 2020

MSNev Feb 21, 2020

markwolff Feb 20, 2020

MSNev Feb 21, 2020

markwolff Feb 27, 2020

MSNev Feb 28, 2020

markwolff Feb 27, 2020

MSNev Feb 28, 2020 •

edited

Loading

MSNev Feb 28, 2020

xiao-lix Feb 28, 2020

MSNev Feb 28, 2020

xiao-lix Feb 28, 2020

MSNev Feb 28, 2020


		export class XHRMonitoringState {
		public openDone: boolean = false;

XHR/Fetch enhancement - add additional telemetry from window.performance #1194 #1195

XHR/Fetch enhancement - add additional telemetry from window.performance #1194 #1195

Conversation

MSNev commented Feb 20, 2020

Choose a reason for hiding this comment

MSNev Feb 20, 2020 • edited Loading

Choose a reason for hiding this comment

MSNev Feb 20, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MSNev Feb 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MSNev Feb 20, 2020 •

edited

Loading

MSNev Feb 20, 2020 •

edited

Loading

MSNev Feb 28, 2020 •

edited

Loading