microsoft / ApplicationInsights-JS

Microsoft Application Insights SDK for JavaScript
MIT License
648 stars 240 forks source link

[BUG]AppInsights not working in IE7 #1142

Closed t525 closed 4 years ago

t525 commented 4 years ago

Description/Screenshot We are in the process of upgrading our pages to support multiple browsers. But, there are pages where we force compatibility to IE7. When we inject appinsight script into these pages, we get javascript syntax error. It would be appreciated if we can receive a workaround to get it working for our old pages until we roll out the new pages.

Steps to Reproduce

Expected behavior What's happening is that server requests are being logged but page views are not. We expect page view, user and session info to be logged. Additional context Add any other context about the problem here.

t525 commented 4 years ago

Hi Nev,

It locks up in version 2.5.2 as well. 2.5.2 throws long run script error. For 2.5.3, the browser just hangs on loading page and doesn’t respond.

I am running IE11 with forced compatibility to IE7. Runtime environment is 64 bit, windows 10.

Do you have an example of how custom property can be set with the new version? I am trying to make sure I have the syntax correct.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com Sent: Thursday, March 26, 2020 1:33 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Sorial, Timothy t.sorial@medpace.com; Author author@noreply.github.com Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

Hi Tim,

I'll try and answer your question, if I miss one just ping me again on it, but first a couple of questions from me.

Now to answer the questions Page Views

Custom Properties

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604569181, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUOOL5OEN5T6HSPDJBDRJOGTFANCNFSM4J4QWRFQ.

t525 commented 4 years ago

Do you think this will help with hashchange event issue?

https://stackoverflow.com/questions/6833650/binding-hashchange-event-in-ie7-issue

Thanks,

Tim Sorial

Sr. Software Engineer

From: Sorial, Timothy Sent: Thursday, March 26, 2020 2:34 PM To: microsoft/ApplicationInsights-JS reply@reply.github.com; microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Author author@noreply.github.com Subject: RE: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

Hi Nev,

It locks up in version 2.5.2 as well. 2.5.2 throws long run script error. For 2.5.3, the browser just hangs on loading page and doesn’t respond.

I am running IE11 with forced compatibility to IE7. Runtime environment is 64 bit, windows 10.

Do you have an example of how custom property can be set with the new version? I am trying to make sure I have the syntax correct.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com<mailto:notifications@github.com> Sent: Thursday, March 26, 2020 1:33 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com<mailto:ApplicationInsights-JS@noreply.github.com> Cc: Sorial, Timothy t.sorial@medpace.com<mailto:t.sorial@medpace.com>; Author author@noreply.github.com<mailto:author@noreply.github.com> Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

Hi Tim,

I'll try and answer your question, if I miss one just ping me again on it, but first a couple of questions from me.

Now to answer the questions Page Views

Custom Properties

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604569181, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUOOL5OEN5T6HSPDJBDRJOGTFANCNFSM4J4QWRFQ.

t525 commented 4 years ago

Also, currently none of our pages use # argument. Is this something that is used by app insights that requires support for onhashchangeevent?

Thanks,

Tim Sorial

Sr. Software Engineer

From: Sorial, Timothy Sent: Thursday, March 26, 2020 3:10 PM To: microsoft/ApplicationInsights-JS reply@reply.github.com; microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Author author@noreply.github.com Subject: RE: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

Do you think this will help with hashchange event issue?

https://stackoverflow.com/questions/6833650/binding-hashchange-event-in-ie7-issue

Thanks,

Tim Sorial

Sr. Software Engineer

From: Sorial, Timothy Sent: Thursday, March 26, 2020 2:34 PM To: microsoft/ApplicationInsights-JS reply@reply.github.com<mailto:reply@reply.github.com>; microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com<mailto:ApplicationInsights-JS@noreply.github.com> Cc: Author author@noreply.github.com<mailto:author@noreply.github.com> Subject: RE: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

Hi Nev,

It locks up in version 2.5.2 as well. 2.5.2 throws long run script error. For 2.5.3, the browser just hangs on loading page and doesn’t respond.

I am running IE11 with forced compatibility to IE7. Runtime environment is 64 bit, windows 10.

Do you have an example of how custom property can be set with the new version? I am trying to make sure I have the syntax correct.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com<mailto:notifications@github.com> Sent: Thursday, March 26, 2020 1:33 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com<mailto:ApplicationInsights-JS@noreply.github.com> Cc: Sorial, Timothy t.sorial@medpace.com<mailto:t.sorial@medpace.com>; Author author@noreply.github.com<mailto:author@noreply.github.com> Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

Hi Tim,

I'll try and answer your question, if I miss one just ping me again on it, but first a couple of questions from me.

Now to answer the questions Page Views

Custom Properties

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604569181, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUOOL5OEN5T6HSPDJBDRJOGTFANCNFSM4J4QWRFQ.

MSNev commented 4 years ago

It locks up in version 2.5.2 as well. 2.5.2 throws long run script error. For 2.5.3, the browser just hangs on loading page and doesn’t respond.

I am running IE11 with forced compatibility to IE7. Runtime environment is 64 bit, windows 10.

Do you think this will help with hashchange event issue? https://stackoverflow.com/questions/6833650/binding-hashchange-event-in-ie7-issue

Do you have an example of how custom property can be set with the new version? I am trying to make sure I have the syntax correct.

MSNev commented 4 years ago

Also, currently none of our pages use # argument. Is this something that is used by app insights that requires support for onhashchangeevent?

t525 commented 4 years ago

This is what I am using for JSON polyfil. https://github.com/douglascrockford/JSON-js

Also, when you get a chance please provide sample code to set telemetry custom property.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com Sent: Thursday, March 26, 2020 3:39 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Sorial, Timothy t.sorial@medpace.com; Author author@noreply.github.com Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

It locks up in version 2.5.2 as well. 2.5.2 throws long run script error. For 2.5.3, the browser just hangs on loading page and doesn’t respond.

I am running IE11 with forced compatibility to IE7. Runtime environment is 64 bit, windows 10.

Do you think this will help with hashchange event issue? https://stackoverflow.com/questions/6833650/binding-hashchange-event-in-ie7-issue

Do you have an example of how custom property can be set with the new version? I am trying to make sure I have the syntax correct.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604643264, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUPIJOMCQLFBIWOAYNTRJOVM3ANCNFSM4J4QWRFQ.

MSNev commented 4 years ago

I updated my sample for that (sorry forgot to mention in my response).

MSNev commented 4 years ago

There are some typo's in the uploaded sample change telemetryItem to data for this section in the telemetryInitializer

if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {
  data.name = "123Emily/Setup/Rule/Conditional Reporting & Alert";
  envelope.tags['ai.operation.name'] = data.name;
}

And using this polyfill https://github.com/douglascrockford/JSON-js with my sample is working (no IE7 lockups) when running in IE7 emulation and v2.5.3. So the lockup doesn't appear to be App Insights related... I'm still spinning up a couple of XP Vm's (just having issues getting them online as XP for some strange reason doesn't have the Hyper-V network drivers :-) )

t525 commented 4 years ago

But, how come no lockups occur with version 2.4.4? For polyfill, I am using following minified version: Json.js if (typeof JSON !== "object") { JSON = {} } (function () { "use strict"; var rx_one = /^[],:{}\s]$/; var rx_two = /\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/g; var rx_three = /"[^"\\n\r]"|true|false|null|-?\d+(?:.\d)?(?:[eE][+-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s[)+/g; var rx_escapable = /[\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; function f(n) { return n < 10 ? "0" + n : n } function this_value() { return this.valueOf() } if (typeof Date.prototype.toJSON !== "function") { Date.prototype.toJSON = function () { return isFinite(this.valueOf()) ? this.getUTCFullYear() + "-" + f(this.getUTCMonth() + 1) + "-" + f(this.getUTCDate()) + "T" + f(this.getUTCHours()) + ":" + f(this.getUTCMinutes()) + ":" + f(this.getUTCSeconds()) + "Z" : null }; Boolean.prototype.toJSON = this_value; Number.prototype.toJSON = this_value; String.prototype.toJSON = this_value } var gap; var indent; var meta; var rep; function quote(string) { rx_escapable.lastIndex = 0; return rx_escapable.test(string) ? '"' + string.replace(rx_escapable, function (a) { var c = meta[a]; return typeof c === "string" ? c : "\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4) }) + '"' : '"' + string + '"' } function str(key, holder) { var i; var k; var v; var length; var mind = gap; var partial; var value = holder[key]; if (value && typeof value === "object" && typeof value.toJSON === "function") { value = value.toJSON(key) } if (typeof rep === "function") { value = rep.call(holder, key, value) } switch (typeof value) { case "string": return quote(value); case "number": return isFinite(value) ? String(value) : "null"; case "boolean": case "null": return String(value); case "object": if (!value) { return "null" } gap += indent; partial = []; if (Object.prototype.toString.apply(value) === "[object Array]") { length = value.length; for (i = 0; i < length; i += 1) { partial[i] = str(i, value) || "null" } v = partial.length === 0 ? "[]" : gap ? "[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]" : "[" + partial.join(",") + "]"; gap = mind; return v } if (rep && typeof rep === "object") { length = rep.length; for (i = 0; i < length; i += 1) { if (typeof rep[i] === "string") { k = rep[i]; v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ": " : ":") + v) } } } } else { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ": " : ":") + v) } } } } v = partial.length === 0 ? "{}" : gap ? "{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}" : "{" + partial.join(",") + "}"; gap = mind; return v } } if (typeof JSON.stringify !== "function") { meta = { "\b": "\b", "\t": "\t", "\n": "\n", "\f": "\f", "\r": "\r", '"': '\"', "\": "\\" }; JSON.stringify = function (value, replacer, space) { var i; gap = ""; indent = ""; if (typeof space === "number") { for (i = 0; i < space; i += 1) { indent += " " } } else if (typeof space === "string") { indent = space } rep = replacer; if (replacer && typeof replacer !== "function" && (typeof replacer !== "object" || typeof replacer.length !== "number")) { throw new Error("JSON.stringify") } return str("", { "": value }) } } if (typeof JSON.parse !== "function") { JSON.parse = function (text, reviver) { var j; function walk(holder, key) { var k; var v; var value = holder[key]; if (value && typeof value === "object") { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = walk(value, k); if (v !== undefined) { value[k] = v } else { delete value[k] } } } } return reviver.call(holder, key, value) } text = String(text); rx_dangerous.lastIndex = 0; if (rx_dangerous.test(text)) { text = text.replace(rx_dangerous, function (a) { return "\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4) }) } if (rx_one.test(text.replace(rx_two, "@").replace(rx_three, "]").replace(rx_four, ""))) { j = eval("(" + text + ")"); return typeof reviver === "function" ? walk({ "": j }, "") : j } throw new SyntaxError("JSON.parse") } } })();

cycle.js if (typeof JSON.decycle !== "function") { JSON.decycle = function decycle(object, replacer) { "use strict"; var objects = new WeakMap; return function derez(value, path) { var old_path; var nu; if (replacer !== undefined) { value = replacer(value) } if (typeof value === "object" && value !== null && !(value instanceof Boolean) && !(value instanceof Date) && !(value instanceof Number) && !(value instanceof RegExp) && !(value instanceof String)) { old_path = objects.get(value); if (old_path !== undefined) { return { $ref: old_path } } objects.set(value, path); if (Array.isArray(value)) { nu = []; value.forEach(function (element, i) { nu[i] = derez(element, path + "[" + i + "]") }) } else { nu = {}; Object.keys(value).forEach(function (name) { nu[name] = derez(value[name], path + "[" + JSON.stringify(name) + "]") }) } return nu } return value }(object, "$") } } if (typeof JSON.retrocycle !== "function") { JSON.retrocycle = function retrocycle($) { "use strict"; var px = /^\$(?:[(?:\d+|"(?:[^\"\u0000-\u001f]|\(?:[\"\/bfnrt]|u[0-9a-zA-Z]{4}))")])$/; (function rez(value) { if (value && typeof value === "object") { if (Array.isArray(value)) { value.forEach(function (element, i) { if (typeof element === "object" && element !== null) { var path = element.$ref; if (typeof path === "string" && px.test(path)) { value[i] = eval(path) } else { rez(element) } } }) } else { Object.keys(value).forEach(function (name) { var item = value[name]; if (typeof item === "object" && item !== null) { var path = item.$ref; if (typeof path === "string" && px.test(path)) { value[name] = eval(path) } else { rez(item) } } }) } } })($); return $ } }

Regarding custom properties: If I were to want property called section added it would be done this way: data.section = “test”;

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com Sent: Thursday, March 26, 2020 3:53 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Sorial, Timothy t.sorial@medpace.com; Author author@noreply.github.com Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

There are some typo's in the uploaded sample change telemetryItem to data for this section in the telemetryInitializer

if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {

data.name = "123Emily/Setup/Rule/Conditional Reporting & Alert";

envelope.tags['ai.operation.name'] = data.name;

}

And using this polyfill https://github.com/douglascrockford/JSON-js with my sample is working (no IE7 lockups) when running in IE7 emulation and v2.5.3. So the lockup doesn't appear to be App Insights related... I'm still spinning up a couple of XP Vm's (just having issues getting them online as XP for some strange reason doesn't have the Hyper-V network drivers :-) )

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604650227, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUMLRHMW4AOFCBZ66CTRJOXBFANCNFSM4J4QWRFQ.

MSNev commented 4 years ago

I only used the json.js as the cycle.js contains several JS references that are not supported in IE7, specifically Object.keys() and value.forEach() where value is an array.

As to why it doesn't lockup with 2.4.4 -- I don't have any answer to that as I can't repro any lockup with 2.5.3. Does my example still lockup on your computer?

For the data.section = "test" yes this should work, but if you want an object you will need to create the object first. So something like data.section = "test"; data.props = {}; data.props.a = 1; data.props.b = "b"; etc.

t525 commented 4 years ago

Thanks Nev. I will try removing cycle.js and see if it helps. I will give you an update tomorrow. If I continue to have issues, are you open to having a Skype session?

Thanks, Tim

Sent from my iPhone

On Mar 26, 2020, at 5:21 PM, Nev notifications@github.com<mailto:notifications@github.com> wrote:

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

I only used the json.js as the cycle.js contains several JS references that are not supported in IE7, specifically Object.keys() and value.forEach() where value is an array.

As to why it doesn't lockup with 2.4.4 -- I don't have any answer to that as I can't repro any lockup with 2.5.3. Does my example still lockup on your computer?

For the data.section = "test" yes this should work, but if you want an object you will need to create the object first. So something like data.section = "test"; data.props = {}; data.props.a = 1; data.props.b = "b"; etc.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604693239, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUKC3G3PSTHBVPWPN63RJPBNJANCNFSM4J4QWRFQ.

MSNev commented 4 years ago

Yep, if this is continuing that is probably the easiest path forward. Skype for business or teams is probably easier, I should be able setup a teams invite if you don't have an installation.

t525 commented 4 years ago

I am still having issues. Are you available today or Monday? I use Teams so we can use that if you prefer.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com Sent: Thursday, March 26, 2020 8:05 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Sorial, Timothy t.sorial@medpace.com; Author author@noreply.github.com Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

Yep, if this is continuing that is probably the easiest path forward. Skype for business or teams is probably easier, I should be able setup a teams invite if you don't have an installation.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604747785, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUOWKD3OMAZEVH2VAM3RJPUSRANCNFSM4J4QWRFQ.

t525 commented 4 years ago

I couldn’t find good example to set telemetryitem name. If I set data.name, it is adds name as custom property.

Thanks,

Tim Sorial

Sr. Software Engineer

From: Nev notifications@github.com Sent: Thursday, March 26, 2020 3:53 PM To: microsoft/ApplicationInsights-JS ApplicationInsights-JS@noreply.github.com Cc: Sorial, Timothy t.sorial@medpace.com; Author author@noreply.github.com Subject: Re: [microsoft/ApplicationInsights-JS] [BUG]AppInsights not working in IE7 (#1142)

This message was sent from outside the company. Please use caution when opening attachments or clicking any links in the email.

There are some typo's in the uploaded sample change telemetryItem to data for this section in the telemetryInitializer

if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {

data.name = "123Emily/Setup/Rule/Conditional Reporting & Alert";

envelope.tags['ai.operation.name'] = data.name;

}

And using this polyfill https://github.com/douglascrockford/JSON-js with my sample is working (no IE7 lockups) when running in IE7 emulation and v2.5.3. So the lockup doesn't appear to be App Insights related... I'm still spinning up a couple of XP Vm's (just having issues getting them online as XP for some strange reason doesn't have the Hyper-V network drivers :-) )

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/ApplicationInsights-JS/issues/1142#issuecomment-604650227, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCLWUMLRHMW4AOFCBZ66CTRJOXBFANCNFSM4J4QWRFQ.

MSNev commented 4 years ago

Hi Tim,

I'm not sure exactly which "name" field (as there are multiple), but based on the telemetry initializer code you have I dug into the v2 code and tests and I believe the following is the solution / change. There are a bunch of other options as well where it can pick it up from the document.title or the baseData.target.

if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {
  envelope.baseData.name = "123Emily/Setup/Rule/Conditional Reporting & Alert";
  envelope.tags['ai.operation.name'] = data.name;
}

I tried looking you up on teams (using the email in this thread) but it looks like either thats not you teams id or your org has disabled external linking (setting in the admin portal of Office 365), so I'll send you an email with my details and we can then figure out a time.

Cheers

Nev

rajithagarapati commented 4 years ago

Hi Nev,

i read complete thread about appinsights in IE7 but i could not find any code which is compatible with IE7. Are you able to find the solution for this issue?

MSNev commented 4 years ago

I'm still investigating / trying to repro the issue that Tim is seeing on version 2.5.3 vs 2.4.4. In the short term Tim is using v 2.4.4 at least until I can repro / track down the issue.

For IE7 to work you will need to use a JSON Polyfill and the current v2 should work, one of the things that I did find while on a Teams call with him was that while with my Simple Sample https://github.com/microsoft/ApplicationInsights-JS/files/4389544/IE7-1142.20200326.zip I was using the F12 Dev console with the Emulate IE7 while Tim's app requires the returning the meta tag forcing mode=IE7, which does seem to behave differently.

In terms of the "could not find any code that is compatible with IE7" v2 should be as part of packaging into NPM and uploading to the CDN the rollup-es3 tools are using to rewrite and validate that we don't use non-IE8 (ES3) compatible javascript.

github-actions[bot] commented 3 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.