Network Error in Chrome while downloading files

The dev team reported an odd behavior that exhibited only in Chrome. Since MS Excel is a preferred tool to view transactional data for analysis/self-service, we have an Export function within web pages.

Using OpenXMLSDK to stream the data failed with a “Network Error” in chrome. Surprisingly the same functionality worked in Chrome when the website was hosted on IIS 8.5 / .NET 4.5.

I then traced the Request and Response in fiddler. Decoding the response threw the “chunked body did not terminate properly with 0-sized chunk” error. So, I suspected that the Response was being truncated.

Reviewing the .NET code, after writing the memory stream to the HTTP Response object,  we had a Response.Close. It looks like Response.Close drops the last chuck (in IIS prior IIS versions) causing Chrome to throw the network error. It doesn’t explain how Firefox and IE were able to keep the pipe open to receive the last chunk (need to dig into this further using wireshark).

Removed the Response.Close and all good now.

Troubleshooting – Erratic Load Balanced Web Application behavior

Have you ever run into situations where the Customer reports an issue, but the Dev Team is not able to reproduce it. Well, I have had several of these and sometimes one of the Web Server is configured differently than the rest in a Load Balanced environment. Sometimes these behavior also exhibit when we actually deploy a new farm or add new servers to an existing farm.

Recently a customer reported that attachments on a particular customer portal were not being viewable. Sure enough, when we tested this issue initially, it worked for us. We were able to quickly able to use this technique to isolate the server and then add the missing mime type.

The actual issue/behavior can be identified using Fiddler or the Developer Tools. Identifying the server that is causing the erratic user behavior is key to either quickly resolving or removing the server from the farm for offline resolution.

When adding each server to the farm, add a HTTP Response Header that uniquely identifies the server as shown in the screenshot below. Don’t include any sensitive details that might compromise your server.

screen_shot_2016-11-11_at_4_19_00_pm

Shown below is a Network Capture using Firefox / Firebug, but the same steps apply to Fiddler and other Developer Tools. After you have captured enough events to reproduce the issue, sift through the requests to find the offending request, identify the HTTP Response Header and you will be able to locate the server.

screen_shot_2016-11-11_at_4_03_53_pm

Keep in mind that the Developer Tools have limitation to the total number of requests / responses that can be captured without degrading performance. fiddler seems to be a better tool of choice for this particular debugging scenario.

It’s possible to programmatically set the HTTP Response Headers, but that’s a different topic.

Alternate Style Sheets

HTML documents can be themed using Stylesheets as per the W3C Specification. Styles in different files can be grouped together as a single style. This comes in very handy during testing to say the least. Internet Explorer, Firefox and Opera have implemented this. Chrome needs an extension.

<link href="Simple.css" rel="stylesheet" type="text/css" title="Simple">
<link href="Classic.css" rel="alternate stylesheet" type="text/css" title="Classic">
<link href="Casablanca.css" rel="alternate stylesheet" type="text/css" title="Casablanca">

There are 4 pieces for this magic to work.

  • rel Attribute : The value of “stylesheet” denotes the default stylesheet the browser loads. The alternates are identified with “alternate stylesheet”.
  • title : this is mandatory and used to identify and group style sheets. For example, if you are using a bootstrap theme and have stylesheets to override some elements or classes, these can be grouped together using the title. This is how the browser knows to use them as a set.
  • Switching Stylesheets : This is accomplished by using the View | Page Style menu in Firefox and View | Style menu in IE. Firefox does not remember the settings when the page is reloaded, but Internet Explorer seems to remember the preference.screen-shot-2016-10-22-at-7-28-25-pm
  • id : using this property helps locate and change attributes easily.

Yet another alternative is use client side script to dynamically switch out the Stylesheet and also remember the users preference. In order for us to accomplish this via code, there are 2 options.

The first option is to use only the default theme and not use alternate stylesheets. Add an ID property to each link tag and change the href like so,

<link id="cs1" href="Simple.css" rel="stylesheet" type="text/css" title="Simple">

and switch the style using JavaScript like so,

document.getElementById('cs1').setAttribute('href', 'classic.css');

The above technique does not work when using alternate styleheets, because the browser uses the disabled property to enable and disable stylesheets based on the menu selection. So we declare a function as below

function setActiveStyleSheet(title) {
  var i;
  var lnk = document.getElementsByTagName("link");
  for(i=0; i < lnk.length; i++) {
    if(lnk[i].getAttribute("rel").indexOf("style") != -1) {
      if(lnk[i].getAttribute("title") == title) {
			lnk[i].disabled = false;
		} 
	  else {
		lnk[i].disabled = true;
		}
    }
  }
}

and then call it like so

setActiveStyleSheet('Classic')

Recover Password from Firefox Password Manager

I was surprised to find that Firefox has made is much simpler. All I had to do was go to Tools | Options, click the Security and use the “Saved Logins…” button. Easy !!!

03-Firefox