Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG]AppInsights not working in IE7 #1142

Closed
t525 opened this issue Dec 18, 2019 · 68 comments
Closed

[BUG]AppInsights not working in IE7 #1142

t525 opened this issue Dec 18, 2019 · 68 comments
Assignees
@MSNev
Labels
bug es3 ES3 Issues (IE8)

Comments

@t525
Copy link

t525 commented Dec 18, 2019

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

  • OS/Browser:IE 11 with forced compatibility to IE7

  • SDK Version [e.g. 22]:

  • How you initialized the SDK:
    We are using below code to inject the appinsight script:
    StringBuilder AppInsightCli = new StringBuilder();
    AppInsightCli.Append("<script type="text/javascript">");
    AppInsightCli.Append("var appInsights = window.appInsights || function (a) {");
    AppInsightCli.Append("function b(a) { c[a] = function () { var b = arguments; c.queue.push(function () { c[a].apply(c, b) }) } } var c = { config: a }, d = document, e = window; setTimeout(function () { var b = d.createElement("script"); b.src = a.url || "https://az416426.vo.msecnd.net/scripts/a/ai.0.js\", d.getElementsByTagName("script")[0].parentNode.appendChild(b) }); try { c.cookie = d.cookie } catch (a) { } c.queue = []; for (var f = ["Event", "Exception", "Metric", "PageView", "Trace", "Dependency"]; f.length;)b("track" + f.pop()); if (b("setAuthenticatedUserContext"), b("clearAuthenticatedUserContext"), b("startTrackEvent"), b("stopTrackEvent"), b("startTrackPage"), b("stopTrackPage"), b("flush"), !a.disableExceptionTracking) { f = "onerror", b("" + f); var g = e[f]; e[f] = function (a, b, d, e, h) { var i = g && g(a, b, d, e, h); return !0 !== i && c["" + f](a, b, d, e, h), i } } return c");
    AppInsightCli.AppendLine("}({").Append($"instrumentationKey: "{ConfigurationManager.AppSettings["AppInsights.Key"]}"")
    .Append(",").AppendLine("disableCorrelationHeaders: false")
    .AppendLine("});");
    AppInsightCli.Append("window.appInsights = appInsights;");
    AppInsightCli.Append("appInsights.queue.push(function(){");
    AppInsightCli.Append("appInsights.context.addTelemetryInitializer(function (envelope) {");
    AppInsightCli.Append("const tags = envelope.tags;");
    AppInsightCli.Append("if (tags) {");
    AppInsightCli.Append($"tags['ai.user.id'] = "{HttpContext.Current.User.Identity.Name.Split(new string[] { "\" }, StringSplitOptions.RemoveEmptyEntries).Last()}";").AppendLine("}");
    AppInsightCli.Append("var telemetryItem = envelope.data.baseData;");
    AppInsightCli.Append("if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {");
    AppInsightCli.Append($"telemetryItem.name = "{requestName}";");
    AppInsightCli.Append($"envelope.tags['ai.operation.name'] = telemetryItem.name;");
    AppInsightCli.AppendLine("}");
    AppInsightCli.Append("telemetryItem.properties = telemetryItem.properties || {};");
    AppInsightCli.Append($"telemetryItem.properties["portal"] = "{psetting.PortalName}";");
    AppInsightCli.Append($"telemetryItem.properties["area"] = "{psetting.ActiveArea.AreaName}";");
    AppInsightCli.Append($"telemetryItem.properties["zone"] = "{psetting.ActiveZone.ZoneName}";");
    AppInsightCli.Append($"telemetryItem.properties["section"] = "{psetting.ActiveSection.SectionName}";");

             if (AdditionalProperties != null && AdditionalProperties.Count > 0)
         {
             foreach (string key in AdditionalProperties.Keys)
             {
                 if (!string.IsNullOrWhiteSpace(key) && !string.IsNullOrWhiteSpace(AdditionalProperties[key]))
                 {
                     AppInsightCli.Append($"telemetryItem.properties[\"{key}\"] = \"{AdditionalProperties[key]}\";");
                 }
             }
         }

         AppInsightCli.AppendLine("});");
         AppInsightCli.Append($"var serverId = \"{HttpContext.Current.GetRequestTelemetry().Context.Operation.Id}\";");
         AppInsightCli.Append("appInsights.context.operation.id = serverId;");
         AppInsightCli.AppendLine("});");
         AppInsightCli.Append("appInsights.trackPageView();");
         AppInsightCli.Append("</script>");
         page.ClientScript.RegisterStartupScript(page.GetType(), "AppInsight", AppInsightCli.ToString());

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.
@MSNev
Copy link
Collaborator

MSNev commented Dec 18, 2019 •
edited
Loading

I suspect your getting some form of JS exception being thrown.
Can you load the dev tools (F12) and see what errors are appearing on the console?

And as a couple of side notes

  • You should be encoding the strings used in the StringBuilder as this might corrupt your script
  • It looks like your using an older version as it's downloading from https://az416426.vo.msecnd.net/scripts/a/ai.0.js which appears to have an internal version of (correction 1.0.20 not <0.7.2.0>)
  • I also assume that this works in without forcing IE7 mode?

We recently added ES3 support to allow the SDK to function on older browsers and in compatibility mode such as this... So you may want to consider upgrading -- but lets identify the error first.

@t525
Copy link
Author

t525 commented Dec 18, 2019 via email

@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019 •
edited
Loading

The version you are using is now considered to be "legacy" and will not have any changes like this fixed. As such to continue getting the latest code and therefore ES3 (IE7/8) support you will need to upgrade to the new version/snipet which is documented in the readme (which includes the new CDN URL). - https://github.com/microsoft/ApplicationInsights-JS#snippet-setup-ignore-if-using-npm-setup

On the error...
If I'm decoding your c# correctly this looks like it resolves to something like this
}({instrumentationKey: "<configured AppInsights.Key>" ,disableCorrelationHeaders: false});

Which is really the end of the snipet initialization (the pass the argments portion), so it could be any of the following

  • ES3 incompatible syntax in the pasted snippet code (will need to pull this apart)
  • the configured instrumentation key is somehow corrupting the generated javascript (including quotes would do this)
  • Some older browsers don't like JSON notation with unquoted keys (normally safari/idevices and really old browsers), but it's normally just for reserved words which these are not... - so you could try quoting the keys in this case so it looks like the following but I don't expect this to "fix" an IE7 issue
    }({"instrumentationKey": "" ,"disableCorrelationHeaders": false});

If you look at the end of the Readme, I've added a table of know ES3 incompatible JS functions which if used can cause this issue. And for any of your javascript you will also need to be aware of.

@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019 •
edited
Loading

Had some time so did a quick pass on the pasted snippet and it doesn't look like there are any ES3 usage issues, however, unless it's a copy/paste issue you do have something going on with quotes around this
.url || "https://az416426.vo.msecnd.net/scripts/a/ai.0.js\", d.getElementsByTagName("script")[0].parentNode.appendChild(b) }); try { c.cookie = d.cookie

@ the end of the ai.0.js you have an escaped quote " \" ", but you are not escaping other quotes...
It might be somthing around this where later versions handle this better than IE7...

@t525
Copy link
Author

t525 commented Dec 19, 2019 via email

@t525
Copy link
Author

t525 commented Dec 19, 2019

Sorry, here is actual script. Please ignore above.
`

<script type="text/javascript">var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("addTelemetryInitializer"),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),t.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}({ "instrumentationKey": "","disableCorrelationHeaders": false }); window[aiName]=aisdk;aisdk.queue.push(function(){aisdk.context.addTelemetryInitializer(function (envelope) {const tags = envelope.tags;if (tags) {tags['ai.user.id'] = "";} var telemetryItem = envelope.data.baseData;if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {telemetryItem.name = "";envelope.tags['ai.operation.name'] = telemetryItem.name;} telemetryItem.properties = telemetryItem.properties || {};telemetryItem.properties["portal"] = "";telemetryItem.properties["area"] = "";telemetryItem.properties["zone"] = "Home";telemetryItem.properties["section"] = "";}); var serverId = "";aisdk.context.operation.id = serverId;}); aisdk.trackPageView();</script>

`

@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019

Thanks,
I've used this and found a couple of issues that needs to be fixed
Issue 1)

  • In the configuration you have "const tags = envelope.tags" this should be "var tags = envelope.tags" as IE7/8 doesn't understand the const keyword

Issue 2)

  • This are 2 issues in the SDK (which we will need to fix)
    • The published version "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js" and unminified version includes a .catch(function(reason) from the code that is using fetch. While this code will never be executed by IE7/8 it is causing a JS parsing error in IE8 mode
    • And in IE7 mode there is another (unidentified at them moment) issue where the JS parsing is expecting a ';' somewhere but can't find it. I also hit a file that included "export" which will also break JS parsing.

@MSNev MSNev self-assigned this Dec 19, 2019
@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019

As an expectation on timeframe, we won't get to or publish a fix for this until early 2020 as we are about to hit a lockdown period.

Can you try rolling back to your v1 usage and remove the const?

@t525
Copy link
Author

t525 commented Dec 19, 2019 via email

@MSNev MSNev mentioned this issue Dec 19, 2019
Closed
@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019

The issue with the v2.3 is that we have not yet published the IE8 compatibility bits (v 2.3.1) to the CDN.
I'm going to perform some additional validation now and we will publish the corrected bits in early Jan 2020.

@MSNev
Copy link
Collaborator

MSNev commented Dec 19, 2019

Version 2.3.1 does not throw and exceptions (during initialization) in IE7 and IE8 modes.

@t525
Copy link
Author

t525 commented Dec 20, 2019

I will keep version 1 until 2.3 is added to CDN. I am noticing that not all page views are logged when user is using IE. When they switched to Edge, all page views are tracked.

@MSNev
Copy link
Collaborator

MSNev commented Dec 20, 2019

I suspect these are events associated with unload of the browser (especially for safari and idevices), this has been addressed as part of #1080 which will be in the version 2.4 or greater (I created a beta version of this yesterday but we only published the npm package), I suspect this will be the end of Jan (maybe Feb) before 2.4 is published to the CDN.

@MSNev
Copy link
Collaborator

MSNev commented Jan 7, 2020

We have now published v 2.3.1 to the CDN so
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js and
https://az416426.vo.msecnd.net/scripts/b/ai.2.js
now downloads v 2.3.1

So this should address the above errors on IE7/8

@t525
Copy link
Author

t525 commented Jan 8, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Jan 8, 2020

Ok, there are 2 issues identified here.

  1. 'push' undefined
  1. The second is a problem with the way TypeScript or rollup is creating the module, while we appear to have fixed all of the ES3 issues in the script, at the very end of the module is the following line
    Object.defineProperty(exports, '__esModule', { value: true });
    The issue is that IE7 doesn't implement "defineProperty" while IE8 defines it but may throw, so this issue is specific to IE7.... Will need to dig into this a bit deeper as using the F12 for IE11 in IE7 mode it appears that IE is not letting the script run (even though it should work).

@t525
Copy link
Author

t525 commented Jan 8, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Jan 8, 2020

Yes, I dug into it and identified the root cause as that final Object.defineProperty() which is added by rollup (used to create the modules at the point of packaging) so we are going to need to post process the generated files to "fixup" this issue and release a new version -- I expect it will be a few weeks before I'll get to and fix this problem.

@ramthi ramthi added the bug label Jan 16, 2020
MSNev pushed a commit that referenced this issue Jan 18, 2020
[BUG]AppInsights not working in IE7 #1142
e191509 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 21, 2020
[BUG]AppInsights not working in IE7 #1142
ee90832 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 21, 2020
[BUG]AppInsights not working in IE7 #1142
2fbfcd5 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 21, 2020
[BUG]AppInsights not working in IE7 #1142
2786af3 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 23, 2020
[BUG]AppInsights not working in IE7 #1142
0986d5d 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 27, 2020
[BUG]AppInsights not working in IE7 #1142
b5274d1 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 27, 2020
[BUG]AppInsights not working in IE7 #1142
14cf329 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
MSNev pushed a commit that referenced this issue Jan 27, 2020
[BUG]AppInsights not working in IE7 #1142
d21dcb2 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
- Remove Es3 checks from reactive-native
MSNev pushed a commit that referenced this issue Jan 28, 2020
[BUG]AppInsights not working in IE7 #1142
a31cd9f 
- Provide packaging rollup plugins to replace and detect non-ES3 included code.
- Remove Es3 checks from reactive-native
@MSNev
Copy link
Collaborator

MSNev commented Mar 25, 2020

Hi Tim,

I don't have the history from the v1 -> v2 updates, but I grabbed your code and added some additional logging to see what was happening and ran it locally in edge, IE and IE in 7 emulation mode and it looks like the properties are present and it is populating the correct location (as far as I currently know)

This shows that the aisdk.properties.context object exists and is being populated and during the telemetry initializer the value assigned for the traceId is populated.

The new location for the values is located in the
traceId == envelope.ext.trace.traceId
user == envelope.ext.user.id

While the console.log is not showing anything in the tags [] looking at the network request that is sent it does include the values set. And when running in IE7 mode and debugging into the packaging the tags are also set.

So I think it looks ok...
I've also just released v2.5.3 with the IE7 fix to the CDN, so these tests where done with that version,

context:{"sessionManager":{"logger":{"queue":[],"AIInternalMessagePrefix":"AITR","_messageCount":0,"_messageLogged":{}},"config":{},"automaticSession":{}},"application":{},"device":{"id":"browser","deviceClass":"Browser"},"internal":{"sdkVersion":"javascript:2.5.3"},"location":{},"user":{"isNewUser":true,"logger":{"queue":[],"AIInternalMessagePrefix":"AITR","_messageCount":0,"_messageLogged":{}},"config":{},"id":"7naqk","accountAcquisitionDate":"2020-03-25T19:19:49.586Z","accountId":null},"telemetryTrace":{"traceID":"ed81555338e9324393867494f2536b24","name":"/T:/IE7_Error.local.html"},"session":{}}
IE7_Error.local.html:38 envelope:{"name":"Microsoft.ApplicationInsights.{0}.Pageview","time":"2020-03-25T19:19:49.698Z","iKey":"711858ea-f0e0-4ee9-9ddb-5b8a9b79392f","ext":{"device":{"localId":"browser","deviceClass":"Browser"},"user":{"id":"7naqk"},"app":{"sesId":"USyNi"},"trace":{"traceID":"ed81555338e9324393867494f2536b24","name":"/T:/IE7_Error.local.html"}},"tags":[],"data":{"duration":29.27500003715977},"baseType":"PageviewData","baseData":{"name":"","uri":"file:///T:/IE7_Error.local.html","refUri":""},"ver":"4.0"}
IE7_Error.local.html:38 envelope:{"name":"Microsoft.ApplicationInsights.{0}.PageviewPerformance","time":"2020-03-25T19:19:49.702Z","iKey":"711858ea-f0e0-4ee9-9ddb-5b8a9b79392f","ext":{"device":{"localId":"browser","deviceClass":"Browser"},"user":{"id":"7naqk"},"app":{"sesId":"USyNi"},"trace":{"traceID":"ed81555338e9324393867494f2536b24","name":"/T:/IE7_Error.local.html"}},"tags":[],"data":{"duration":29.27500003715977},"baseType":"PageviewPerformanceData","baseData":{"name":"","uri":"file:///T:/IE7_Error.local.html","isValid":true,"durationMs":29.27500003715977,"duration":"00:00:00.029","perfTotal":"00:00:00.029","networkConnect":"00:00:00.000","sentRequest":"00:00:00.000","receivedResponse":"00:00:00.007","domProcessing":"00:00:00.021"},"ver":"4.0"}
IE7_Error.local.html:38 envelope:{"name":"InternalMessageId: 72","iKey":"711858ea-f0e0-4ee9-9ddb-5b8a9b79392f","time":"2020-03-25T19:19:59.597Z","baseType":"MessageData","baseData":{"message":"AI (Internal): 72 message:"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/82.0.4080.0 Safari/537.36 Edg/82.0.453.2""},"ver":"4.0","tags":[],"ext":{"device":{"localId":"browser","deviceClass":"Browser"},"user":{"id":"7naqk"},"app":{"sesId":"USyNi"},"trace":{"traceID":"ed81555338e9324393867494f2536b24","name":"/T:/IE7_Error.local.html"}}}

var sdkInstance="appInsightsSDK";
window[sdkInstance]="appInsights";
var aiName=window[sdkInstance],aisdk=window[aiName]||function(n){var o={config:n,initialize:!0},t=document,e=window,i="script";
setTimeout(function(){var e=t.createElement(i);
e.src=n.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",t.getElementsByTagName(i)[0].parentNode.appendChild(e)});
try{o.cookie=t.cookie}catch(e){}function a(n){o[n]=function(){var e=arguments;
o.queue.push(function(){o[n].apply(o,e)})}}o.queue=[],o.version=2;
for(var s=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];s.length;)a("track"+s.pop());
var r="Track",c=r+"Page";
a("start"+c),a("stop"+c);
var u=r+"Event";
if(a("start"+u),a("stop"+u),a("addTelemetryInitializer"),a("setAuthenticatedUserContext"),a("clearAuthenticatedUserContext"),a("flush"),o.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},!(!0===n.disableExceptionTracking||n.extensionConfig&&n.extensionConfig.ApplicationInsightsAnalytics&&!0===n.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){a("_"+(s="onerror"));
var p=e[s];
e[s]=function(e,n,t,i,a){var r=p&&p(e,n,t,i,a);
return!0!==r&&o"_"+s,r},n.autoExceptionInstrumented=!0}return o}({instrumentationKey: "711858ea-f0e0-4ee9-9ddb-5b8a9b79392f",disableCorrelationHeaders: false});
window[aiName]=aisdk;
aisdk.queue.push(function(){
aisdk.addTelemetryInitializer(function (envelope) {
var tags = envelope.tags;
if (tags) {tags['ai.user.id'] = "t.sorial";}
var data = envelope.data || {};
var telemetryItem = data.baseData || {};
if (envelope.name == Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {
telemetryItem.name = "123Emily/Setup/Rule/Conditional Reporting & Alert";
envelope.tags['ai.operation.name'] = telemetryItem.name;
}
telemetryItem.properties = telemetryItem.properties || {};
telemetryItem.properties["portal"] = "123Emily";
telemetryItem.properties["area"] = "Setup";
telemetryItem.properties["zone"] = "Rule";
telemetryItem.properties["section"] = "Conditional Reporting & Alert";
try {
var values = JSON.stringify(envelope);
console && console.log && console.log("envelope:" + values);
} catch (e) {
console && console.log && console.log("error:" + e);
}
});
var serverId = "ed81555338e9324393867494f2536b24";
aisdk.properties.context.telemetryTrace.traceID = serverId;
try {
var values = JSON.stringify(aisdk.properties.context);
console && console.log && console.log("context:" + values);
} catch (e) {
console && console.log && console.log("error:" + e);
}
});
aisdk.trackPageView()

@t525
Copy link
Author

t525 commented Mar 25, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 25, 2020

Hi Tim,

I'm not seeing the infinite loop issue with 2.5.3... I've tested multiple times locally on this.

Can you change the url to the non-minified version, run it in the debugger (F12) and when it gets stuck in the loop press the pause link
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js => https://az416426.vo.msecnd.net/scripts/b/ai.2.js

In normal situations it will be running the setInterval() for polling the queue each 10 seconds, but this is not the loop / deadlock issue...

I did have 1 case where it seemed to lockup, but I just forced (Ctrl-F5) the current version to be re-fetched from the CDN rather than using the local cached version of the older release

@MSNev
Copy link
Collaborator

MSNev commented Mar 25, 2020

And to answer the questions (sorry missed that in previous response).

Do you suggest I host the file instead of using the CDN? What is recommended?
It's recommended that you use the CDN as this means

  • browsers cache the requests based on the domain so if accessing multiple websites that use AI the browser will only fetch once for each site during the max-age timeframe
  • the CDN's tend to have access points (POP's) closer to the users than the number of locations that your application is deployed to (talking on the global scale here).

The only real advantage of hosting on your own domain is that browsers don't need to perform the DNS lookup fir the different domain, however, browsers have limits in the number of connections (resources) they can download per domain, so multiple domains can actually help -- depending on the users bandwidth and where they are fetching the resources from.

@t525
Copy link
Author

t525 commented Mar 25, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 25, 2020

What version is it showing at the top of the file, it should be 2.5.3, version 2.5.2 had the issue...

https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
/*!

  • Application Insights JavaScript SDK - Web, 2.5.3
  • Copyright (c) Microsoft and contributors. All rights reserved.
    */

@MSNev
Copy link
Collaborator

MSNev commented Mar 25, 2020

Another question, when the browser locks up is IE doing a bunch of CPU usage?
I just checked locally with IE11 running in IE7 compat mode and it's working fine.
Even when the previous version had the issue I found the browser itself didn't lock up it just burnt ~15% CPU and the debugger pause still worked (at least for me)

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 26, 2020

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.

  • Was it downloading v 2.5.3 and still locking up with that version (as opposed to 2.5.2)
  • What is the runtime environment XP, 32 or 64 and assuming native IE 7 (not IE 11 running in emulation mode -- as I can no longer repro in this mode)? I want to spend a little bit of time trying to repro to find the issue if I can as we don't have the infrastructure to create hotfixes from older builds and the changes introduced in 2.5 will be further extended so I don't want to compound any issues.

Now to answer the questions
Page Views

  • Assuming you are talking about local SPA (updating the url with '#' arguments) then there is no automatic solution as IE 7/8 doesn't support the onhashchange event. Your only option here is to add manual event firing (perhaps with just track) when you are manually changing the page view (in your controller / route manager -- depending on your JS framework).

Custom Properties

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 26, 2020

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.

  • This is the same environment I was using and while 2.5.2 gave the long run script error (which is how I found and fixed it), I'm not seeing the same issue with 2.5.3 (i.e. it's working for me)
  • I'm wondering whether this is related to the JSON poly fill you are using, can you provide a link to it (I don't remember which one I'm using), I've uploaded my simple test page to github
    IE7-1142.20200326.zip

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

  • Yes, but you will need to add you own code to the section that does the click and change your code to click this (or these) links. As App Insights won't be able to hook all of your clicks and it won't automatically hook to this link.

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
Copy link
Collaborator

MSNev commented Mar 26, 2020

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

  • So your app is a post back (each page refresh comes from the server)?
  • If so then you don't need the hashchangeevent (hashchangeevent is a standard practice for a SPA (Single Page Application) to effectively render local page changes in javascript and support browser back / fwd navigation.
  • Based on a post back (or Server Side rendered page) model then the standard page view event should work it is for my sample in my previous post (although in IE7 mode the XDomainRequest fails because the web page is file:// while the telemetry is https://, if hosted on a https:// link it would work).

@t525
Copy link
Author

t525 commented Mar 26, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 26, 2020

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

@MSNev
Copy link
Collaborator

MSNev commented Mar 26, 2020

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
Copy link
Author

t525 commented Mar 26, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 26, 2020

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
Copy link
Author

t525 commented Mar 26, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 27, 2020

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
Copy link
Author

t525 commented Mar 27, 2020 via email

@t525
Copy link
Author

t525 commented Mar 27, 2020 via email

@MSNev
Copy link
Collaborator

MSNev commented Mar 27, 2020

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
Copy link

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
Copy link
Collaborator

MSNev commented Apr 13, 2020

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.

@MSNev MSNev added the es3 ES3 Issues (IE8) label Apr 23, 2020
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 14, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@MSNev MSNev

Labels
bug es3 ES3 Issues (IE8)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ramthi @rajithagarapati @MSNev @t525