javascript - error handling in knockout spa using amd and requirejs -
so have large single-page-application based on steve sandersons spa template. custom bindinghandlers, validation etc working fine.
we require use of xmlhttprequests, session , local storage other libraries don't have universal support (jquery 2.0 etc). have core module handles identity , exposes few services , both of these reliant on these features. loaded when user first visits page.
i have issue older browsers either a) don't support of modules being loaded throw error before hitting onload function, or b) hits onload function don't support browser features need raise exception myself , handle in manner.
example: ie8 throws 'object doesn't support property or method 'addeventlistener'' (jquery error) , ie9 doesn't support need throw custom error.
define('core', ['jquery', 'browser'], function($, browser) { if(!browser.hasfullsupport) { throw new error('update browser'); } // aload of gubbins requires sessionstorage etc return { identity: identity, servicea: servicea, serviceb: serviceb } }, function(err) { // doesn't catch ie8 error here });
i've tried setting window.onerror works differently across browser versions , in can't capture error message properly, 'script error'.
i know can add error event handler module definitions doesn't capture errors i'm experiencing.
i've seen people use
requirejs.onerror = function(err) { // here }
but i'm using requirejs gulp bundler , can't see object exposed (if @ all)
var require = { baseurl: ".", paths: { "modernizr": "bower_modules/modernizr/modernizr", "browser": "app/browser-detect", "crossroads": "bower_modules/crossroads/dist/crossroads.min", "hasher": "bower_modules/hasher/dist/js/hasher.min", "jquery": "bower_modules/jquery/dist/jquery.min", .... // gulpfile var requirejsruntimeconfig = vm.runinnewcontext(fs.readfilesync('src/app/require.config.js') + '; require;'); requirejsoptimizerconfig = merge(requirejsruntimeconfig, { out: 'scripts.js', baseurl: './src', name: 'app/startup', paths: { requirelib: 'bower_modules/requirejs/require' }, include: [ 'requirelib', 'components/nav-bar/nav-bar', ..... gulp.task('js', function () { return rjs(requirejsoptimizerconfig) .pipe(uglify()) .pipe(gulp.dest('./dist/')); });
there's loads of components/pages , each throw error, it's initial core component loading i'm keen sort out. i'd distinguish between errors (that may or may not caused browser being old) , between me detecting they're old before hand, there elegant way achieve using template model?
i'd rather not deviate far template i'm not familiar requirejs / gulp etc i'm open suggestions.
you contradict yourself:
we require use of xmlhttprequests, session , local storage other libraries don't have universal support (jquery 2.0 etc)
but:
ie8 throws 'object doesn't support property or method 'addeventlistener'' (jquery error) , ie9 doesn't support need throw custom error.
you can't use libraries , html 5 features newer browsers , expect older browsers still work. libraries not support legacy browsers ie 8 not fail gracefully cannot handle failure well. , if found workaround somehow circumvent errors, still need test them in old browsers periodically beats intent support newer browsers.
so recommend 2 approaches:
- either decide not support olders browsers @ , test app in newest modern browsers. use modern versions of libraries dropped support of old browsers , not worry old browsers @ all. depends on state of user base. or:
- downgrade libraries versions support minimal required browsers , continue developing app them. test app , fix errors occur in old browsers. use polyfills enable new html 5 features in old browsers via emulation.
Comments
Post a Comment