Archive for the ‘Troubleshooting’ Category

The Mystery of the Multiple Requests

Thursday, June 19th, 2008

I’ve ran into this issue for the second time today and it was as much of a pain to troubleshoot it as it was the first time around so I figured I’d do a little write-up about it so that others may save themselves a good bit of frustration. 

The first time I encountered the issue, it seemed to happen at random.  I was stepping through some code for the web application I was working on at the time in the debugger and had a breakpoint set that should have only ever been reached once per request and yet this time it was reached twice.  As I was going through some testing, the problem would go away for a time, and then come back, depending on the state of the page. 

Enter the mysterious request… So instead of trying to troubleshoot any further in the debugger I decided it would be good to look at the requests as they happen using FireBug (or Fiddler).  Sure enough, there were two requests anytime I had a certain component visible on the page.  So that narrowed it down further at least in that I knew what component was causing it.  What gave me enough to google on was the fact that the request headers for the 2nd request were different in one very important way, the "Accept" header.  Instead of the usual "text/html" plus friends it was "image/png,image/*" … which indicates it was a request for an image resource.

Armed with that information, I prayed before the google gods and found a couple of posts (seriously, there were only two that I could find) about the issue and one mentioned an empty "src" attribute on an image tag.  That wasn’t the case that time, but it got me thinking … If image tags could do it, what about CSS properties?  Sure enough, that was the problem.  There was one CSS property defined in a style attribute that was "background-image: url();".  Taking care of the offending property made the issue go away and everyone was happy.

Now, there are a number of things that can cause this situation and they are outlined below.  There are also multiple ways that the issue will show itself in a request log. 

An empty "src" attribute on an image tag.

<img src="" />

An emtpy url definition on a CSS property or a url definition with "none"* inside of it.

.test {
background: #ffffff url();
background-image: url('');
background-image: url(none);

I’ll be talking more about the last one in a follow up post.

As for how they can show up in a request log:

  • A second request for the same path and query. 
  • A second request for the root path (i.e. the normal request is for "/default.aspx" and the second request is for "/").
  • A second request for the "none" path (i.e. "/none").

In Firefox the second request will usually always have the "Accept: image/png,image/*" header.  Unfortunately that is not always the case with IE.  IE likes to happily send "Accept: */*" along.

Now how do you go about finding these in your code and markup?  Unfortunately that is not always that easy and you may have to resort to using multiple tools.  A good start is the HTML tab in FireBug.  Another good option is "View -> Source -> DOM" option in the IE Developer Toolbar.  Another thing to do is to search your solution for the offending items.  Searching with regular expressions can be a big help there.

I hope this post proves helpful to someone else that encounters the problem.  It was almost as frustrating to find the culprit the second time as it was the first time and I knew what I was looking for … though part of that problem was WebForms working against me, but more on that later.