Last Updated: February 25, 2016
·
1.512K
· tdebailleul

Sencha Touch 2: Crash reporter

This is a Crash Reporer for Sencha Touch 2, bases on what the Popcorn Maker team did.

app/util/CrashReporter.js

Ext.define('Ext.util.CrashReporter', {
  singleton: true,

  // Number of event to send to the server
  MAX_EVENT_QUEUE_LENGTH: 10,

  // Array containing the list of fired events
  eventQueue: [],

  // Array containing the list of tracked events    
  eventNames: [
    'ready',
    'trackevent'
  ],

  // crashReport object sent to the server
  crashReport: {},

  parseUrl: function (href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
  },

  // Only deal with errors we cause (i.e., same origin scripts).
  shouldHandle: function (url) {
    var uriScript = this.parseUrl(url);
    return uriScript.hostname === window.location.hostname;
  },

  addEventToQueue: function (e) {
    this.eventQueue.push(e);
    if ( this.eventQueue.length > this.MAX_EVENT_QUEUE_LENGTH) {
      this.eventQueue.shift();
    }
  },

  init: function () {
    var me = this;

    Ext.Array.each(me.eventNames, function(name, index, events) {
      // Listen to the event and call this.addEventToQeue when fired
    }, this);

    // Cache existing window.onerror
    var _onerror = window.onerror ? window.onerror : function () { return true; };

    window.onerror = function (message, url, lineno) {
      if (!window.XMLHttpRequest) {
        return _onerror();
      }

      if (!me.shouldHandle(url)) {
        return _onerror();
      }

      function attemptRecovery() {
        window.onbeforeunload = null;
        window.location.reload(true);
      }

      function sendErrorReportSuccess() {
        attemptRecovery();
      }

      function sendErrorReportFailure() {
        attemptRecovery();
      }

      function sendErrorReport() {
        // Ext.Ajax.request to send the report to the server
        Ext.Ajax.request({
          url: YOUR_CRASH_REPORT_URL,
          params: me.crashReport,
          method: 'POST',
          success: sendErrorReportSuccess,
          failure: sendErrorReportFailure,
          scope: this
        });
      }

      me.crashReport = {
        date: (new Date()).toDateString(),
        message: message,
        appUrl: window.location.href,
        scriptUrl: url,
        lineno: lineno,
        eventList: me.eventQueue,
        userAgent: navigator.userAgent
      };

      try {
        sendErrorReport();
      } catch(e) {
        attemptRecovery();
      }

      return _onerror();
    };
  }
}, function () {
  Ext.onSetup(function () {
    Ext.CrashReporter = Ext.util.CrashReporter;
  });
});

app.js

Ext.Loader.setPath({
  'Ext.util.CrashReporter': './app/util/CrashReporter.js'
});

...

requires: [
  'Ext.util.CrashReporter'
]

...

launch: function () {
  Ext.CrashReporter.init();
  ...
}

--

Also: David Humphrey's article (Web App JavaScript Crash Reporting)[http://vocamus.net/dave/?p=1532],
Original (crashreport.js)[https://github.com/mozilla/butter/blob/master/src/crashreporter.js]

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside