Fixed percentage of loading when some image not loaded and refactored…

… error observer

README.md

@@ -6,6 +6,7 @@ With PageInfoJS you can gather information about time to load the Document DOM a
 - A Javascript error detected,
 - DOM loading percentage changes,
 - Document is completely loaded(or interactive, loading, etc).
+- When a mutation happens on page(when a new element is created on page for example)
 
 You can work with information about time too:
 
@@ -134,28 +135,26 @@ myCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.ToInteractive] = fun
 
 ## Working with Errors
 
-PageInfoJS fire an event when a js error occur on page, you can use it as follow:
+PageInfoJS fire an Event instance when a js error occur on page, you can use it as follow:
 ```JS
 /**
  * @param PageInfo {PageInfo}
- * @param error {PageInfoError}
+ * @param e {Event || ErrorEvent}
  */
-myCallbacks[PageInfoJS.EventsList.OnError] = function (PageInfo, error) {
-  console.log('Current error:', error);
-  console.log('At:', PageInfo.Time.getCurrentTimestamp());
+myCallbacks[PageInfoJS.EventsList.OnError] = function (PageInfo, e) {
+  console.log('Error Detected (event timestamp):', PageInfo.Time.getCurrentTimestamp(), e);
 };
 ```
 
-Or with other events:
+Or combined with other events too:
 ```JS
 /**
  * @param PageInfo {PageInfo}
  * @param changedTo {string}
  */
 myCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.Any] = function (PageInfo, changedTo) {
   console.log('Document ready state changed to `' + changedTo + '` after (milliseconds)', PageInfo.Time.getElapsedTime());
-  console.log('Document have errors?', PageInfo.hasErrors());
-  console.log('Document Errors', PageInfo.getAllErrors());
+  console.log('Document have errors?', PageInfo.hasErrors(), PageInfo.getAllErrors());
 };
 ```
 

example/progress/example.js

@@ -61,16 +61,15 @@ myCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.Any] = function (Pag
  */
 myCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.ToComplete] = function (PageInfo) {
   console.log('Document is COMPLETE now, elapsed time (milliseconds)', PageInfo.Time.getElapsedTime());
-  console.log('Document have errors?', PageInfo.hasErrors());
-  console.log('Document Errors', PageInfo.getAllErrors());
+  console.log('Document have errors?', PageInfo.hasErrors(), PageInfo.getAllErrors());
 };
 
 /**
  * @param PageInfo {PageInfo}
- * @param error {PageInfoError}
+ * @param e {Event || ErrorEvent}
  */
-myCallbacks[PageInfoJS.EventsList.OnError] = function (PageInfo, error) {
-  console.log('Current error:', error);
+myCallbacks[PageInfoJS.EventsList.OnError] = function (PageInfo, e) {
+  console.log('Error Detected (event timestamp):', PageInfo.Time.getCurrentTimestamp(), e);
 };
 
 var PageInfo = new PageInfoJS(myCallbacks);

example/progress/index.html

@@ -40,6 +40,9 @@
     <span>
       <img src="http://multimidia.curitiba.pr.gov.br/2013/00128508.jpg" height="100">
     </span>
+    <span>
+      <img src="http://www.cimentoitambe.com.br/sdgf/5df465/2013/11/TEST.jpg" height="100">
+    </span>
     <span>
       <img src="http://www.cimentoitambe.com.br/wp-content/uploads/2013/11/canaleta_curitiba.jpg" height="100">
     </span>

package.json

@@ -48,5 +48,5 @@
     "build": "webpack --config webpack.prod.config.js --progress"
   },
   "license": "MIT",
-  "version": "2.3.4"
+  "version": "2.3.5"
 }

src/PageInfo.js

@@ -1,25 +1,33 @@
 import InternalEventsList from "./EventsList";
 import Time from "./Time";
 import EventsCollection from "./EventsCollection";
-import PageInfoError from "./ErrorWrapper";
 import "mutation-observer";
 
 export default class PageInfo {
 
   constructor(clientCallbacks) {
+    /**
+     * @type {Array}
+     */
+    this._errors = [];
+    this._errorObserver();
+
     /**
      * @type {PageInfoTime}
      */
     this.Time = new Time();
-    this.Errors = [];
+
+    /**
+     * @type {EventsCollection}
+     * @private
+     */
     this._Events = new EventsCollection(clientCallbacks);
 
     new Promise((resolve) => {
       this._elements = window.document.getElementsByTagName('*');
       this._elementsNumber = this._elements.length;
       this._loadedElementsNumber = 0;
 
-      this._errorObserver();
       this._readyStateObserver();
       this._mutationObserver();
 
@@ -48,22 +56,21 @@ export default class PageInfo {
   }
 
   hasErrors() {
-    return (this.Errors.length > 0);
+    return (this._errors.length > 0);
   }
 
   getAllErrors() {
-    return this.Errors;
+    return this._errors;
   }
 
   _errorObserver() {
-    window.onerror = (error, url, line, column, asString) => {
-      const ErrorWrapper = new PageInfoError(error, url, line, column, asString);
-      this.Errors.push(ErrorWrapper);
-
-      if (this._Events.has(InternalEventsList.OnError)) {
-        this._Events.get(InternalEventsList.OnError)(this, ErrorWrapper);
+    let self = this;
+    window.addEventListener('error', (e) => {
+      self._errors.push(e);
+      if (self._Events.has(InternalEventsList.OnError)) {
+        self._Events.get(InternalEventsList.OnError)(self, e);
       }
-    };
+    }, true);
   }
 
   _readyStateObserver() {
@@ -160,7 +167,6 @@ export default class PageInfo {
         case 'IMG':
           let TempImage = new Image();
           TempImage.onload = callback;
-          TempImage.onerror = callback;
           TempImage.src = self._elements[i].src;
           break;
         default: