Browser information object

Merhaba,
Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.
Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.

Peki bu bilgiler ne işe yarar?
bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.

Bunun için bir obje yazdım gayet derli toplu oldu.

// Define Browser
function Browser(){
   this.name          = navigator.appName;
   this.codename      = navigator.appCodeName;
   this.version       = navigator.appVersion.substring(0,4);
   this.platform      = navigator.platform;
   this.javaEnabled   = navigator.javaEnabled();
   this.cookieEnabled = navigator.cookieEnabled;
   this.userAgent     = navigator.userAgent;
   this.screenWidth   = screen.width;
   this.screenHeight  = screen.height;
   this.loc           = window.location.href;
   this.referrer      = (document.referrer)?     document.referrer     : "Direct";
   this.charSet       = (document.characterSet)? document.characterSet : document.charset;
   this.language      = (navigator.language)?    navigator.language    : navigator.browserLanguage;

   this.information = function(){
         info  = "\n== Client Descriptions ==\n";
         info += "Application Name is: "      + this.name          + "\n";
         info += "Application Code name is: " + this.codename      + "\n";
         info += "Application Version is: "   + this.version       + "\n";
         info += "Location: "                 + this.loc           + "\n";
         info += "Referrer: "                 + this.referrer      + "\n";
         info += "User agent: "               + this.userAgent     + "\n";
         info += "Platform is: "              + this.platform      + "\n";
         info += "Is java Enabled?: "         + this.javaEnabled   + "\n";
         info += "Is Cookie Enabled?:"        + this.cookieEnabled + "\n";
         info += "Language: "                 + this.language      + "\n";
         info += "Document Character Set: "   + this.charSet       + "\n";
         info += "Client screenWidth: "       + this.screenWidth   + "\n";
         info += "Client screenHeight: "      + this.screenHeight  + "\n";
         return info;
   }

   this.alert = function(){
         alert(this.information());
   }
}

Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız

var info = new Browser();

Artık browser bilgilerine info.information(); method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.
aynı çekilde info.alert(); method'uda bu mesajı alert box içerisinde gösterir.
bir deneyelim info.alert()

Sonuç genelde şuna benzer birşey olmalıdır:

== Client Descriptions ==
Application Name is: Microsoft Internet Explorer
Application Code name is: Mozilla
Application Version is: 4.0
Location: http://www.jotform.com/results.php

User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Platform is: Win32
Is java Enabled?: true
Client screenWidth: 1280
Client screenHeight: 1024


Bu yöntemle alınan bilgiyi biz jotform'un error report'ları için kullanıyoruz.

bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.

Jotform'un yaptığı şu:

var iserrorsent = false; // Global to check error status (sent or not sent)
// Error Handling, Handle errors gracefuly
window.onerror = function(desc, file, line, chr){
   // Ignore these errors
   if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }
   var info = new Browser();

   // Create message
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ desc +"\n";
   message += "Ocuured in: "+ file +"\n";
   message += "Occured on line: "+ line +"\n";
   message += info.information();
   // Send message
   if(!iserrorsent){ //Dont send more than one error in one session
         reportError(   message   ,"Error occurred in Jotform: "+desc);
         iserrorsent = true;
   }
   return true;
}

// Send errors by ajax
function reportError(desc,title){
   var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));
}

Tabi burda karşımıza yeni bir şey daha çıktı window.onerror onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.

window.onerror = function(description, fileLocation, lineNumber){
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ description +"\n";
   message += "Ocuured in: "+ fileLocation +"\n";
   message += "Occured on line: "+ lineNumber +"\n";
   alert(message);
}

Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.