From 10a675f5daece4c8d6c10dd98d10a23708090f8f Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Mon, 15 Aug 2016 17:14:53 -0700 Subject: [PATCH 1/5] Add Vue.js (2.0) plugin --- plugins/vue.js | 29 +++++++++++++++++++ test/plugins/vue.test.js | 62 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 plugins/vue.js create mode 100644 test/plugins/vue.test.js diff --git a/plugins/vue.js b/plugins/vue.js new file mode 100644 index 000000000000..20adcffc08d6 --- /dev/null +++ b/plugins/vue.js @@ -0,0 +1,29 @@ +/** + * Vue.js 2.0 plugin + * + */ +'use strict'; + +function vuePlugin(Raven, Vue) { + Vue = Vue || window.Vue; + + // quit if Vue isn't on the page + if (!Vue || !Vue.config) return; + + var _oldOnError = Vue.config.errorHandler; + Vue.config.errorHandler = function VueErrorHandler(error, vm) { + Raven.captureException(error, { + extra: { + componentName: Vue.util.formatComponentName(vm), + propsData: vm.$options.propsData + } + }); + + if (typeof _oldOnError === 'function') { + _oldOnError.call(this, error, vm); + } + }; +} + +module.exports = vuePlugin; + diff --git a/test/plugins/vue.test.js b/test/plugins/vue.test.js new file mode 100644 index 000000000000..354c8636c94a --- /dev/null +++ b/test/plugins/vue.test.js @@ -0,0 +1,62 @@ +var _Raven = require('../../src/raven'); +var vuePlugin = require('../../plugins/vue'); + +var Raven; +describe('Vue plugin', function () { + beforeEach(function () { + Raven = new _Raven(); + Raven.config('http://abc@example.com:80/2'); + }); + + describe('errorHandler', function () { + beforeEach(function () { + this.sinon.stub(Raven, 'captureException'); + this.MockVue = { + config: {}, + util: { + formatComponentName: function() { + return '' + } + } + }; + }); + + it('should capture component name and propsData', function () { + vuePlugin(Raven, this.MockVue); + + this.MockVue.config.errorHandler(new Error('foo'), { + $options: { + propsData: { + foo: 'bar' + } + } + }, {} /* vm */); + + assert.isTrue(Raven.captureException.calledOnce); + + assert.deepEqual(Raven.captureException.args[0][1].extra, { + propsData: { + foo: 'bar' + }, + componentName: '' + }); + }); + + it('should call the existing error handler', function () { + var errorHandler = this.sinon.stub(); + this.MockVue.config.errorHandler = errorHandler; + vuePlugin(Raven, this.MockVue); // should override errorHandler + + var err = new Error('foo'); + var vm = { + $options: { propsData: {} } + }; + this.MockVue.config.errorHandler(err, vm); + + assert.isTrue(Raven.captureException.calledOnce); + assert.isTrue(errorHandler.calledOnce); + assert.equal(errorHandler.args[0][0], err); + assert.equal(errorHandler.args[0][1], vm); + }); + }); +}); From f16fec47d0298aa7cce157fb018d7edeb4365c7a Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Mon, 15 Aug 2016 17:23:07 -0700 Subject: [PATCH 2/5] Add Vue plugin docs --- docs/integrations/vue.rst | 87 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 docs/integrations/vue.rst diff --git a/docs/integrations/vue.rst b/docs/integrations/vue.rst new file mode 100644 index 000000000000..90b53759b444 --- /dev/null +++ b/docs/integrations/vue.rst @@ -0,0 +1,87 @@ +Vue.js (2.0) +============ + +To use Sentry with your Vue application, you will need to use both Raven.js (Sentry's browser JavaScript SDK) and the Raven.js Vue plugin. + +On its own, Raven.js will report any uncaught exceptions triggered from your application. For advanced usage examples of Raven.js, please read :doc:`Raven.js usage <../usage>`. + +Additionally, the Raven.js Vue plugin will capture the name and props state of the active component where the error was thrown. This is reported via Vue's `config.errorHandler` hook. + +Installation +------------ + +Raven.js and the Raven.js Vue plugin are distributed using a few different methods. + +Using our CDN +~~~~~~~~~~~~~ + +For convenience, our CDN serves a single, minified JavaScript file containing both Raven.js and the Raven.js Vue plugin. It should be included **after** Vue, but **before** your application code. + +Example: + +.. sourcecode:: html + + + + + +Note that this CDN build auto-initializes the Vue plugin. + +Using package managers +~~~~~~~~~~~~~~~~~~~~~~ + +Pre-built distributions of Raven.js and the Raven.js Vue plugin are available via both Bower and npm for importing in your ``ember-cli-build.js`` file. + +Bower +````` + +.. code + +.. code-block:: sh + + $ bower install raven-js --save + +.. code-block:: javascript + + app.import('bower_components/raven-js/dist/raven.js'); + app.import('bower_components/raven-js/dist/plugins/vue.js'); + +.. code-block:: html + + + + + +npm +```` + +.. code-block:: sh + + $ npm install raven-js --save + +.. code-block:: javascript + + app.import('bower_components/raven-js/dist/raven.js'); + app.import('bower_components/raven-js/dist/plugins/vue.js'); + +.. code-block:: html + + + + + +These examples assume that Vue is exported globally as ``window.Vue``. You can alternatively pass a reference to the ``Vue`` object directly as the second argument to ``addPlugin``: + +.. code-block:: javascript + + Raven.addPlugin(Raven.Plugins.Vue, Vue); From f5f5280e8911b1f3bb93787c454eecced4a1533a Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Mon, 15 Aug 2016 17:25:25 -0700 Subject: [PATCH 3/5] Add Vue version notice --- docs/integrations/vue.rst | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/integrations/vue.rst b/docs/integrations/vue.rst index 90b53759b444..a19789d5b521 100644 --- a/docs/integrations/vue.rst +++ b/docs/integrations/vue.rst @@ -1,6 +1,11 @@ Vue.js (2.0) ============ +.. sentry:support-warning:: + + This plugin only works with Vue 2.0 or greater. + + To use Sentry with your Vue application, you will need to use both Raven.js (Sentry's browser JavaScript SDK) and the Raven.js Vue plugin. On its own, Raven.js will report any uncaught exceptions triggered from your application. For advanced usage examples of Raven.js, please read :doc:`Raven.js usage <../usage>`. From 2aed5c6777f07d4b50e0908cfa4dee19a54a4c1b Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Mon, 15 Aug 2016 17:32:17 -0700 Subject: [PATCH 4/5] Better package manager docs --- docs/integrations/vue.rst | 53 ++++++++++----------------------------- 1 file changed, 13 insertions(+), 40 deletions(-) diff --git a/docs/integrations/vue.rst b/docs/integrations/vue.rst index a19789d5b521..909f3b990e32 100644 --- a/docs/integrations/vue.rst +++ b/docs/integrations/vue.rst @@ -35,58 +35,31 @@ Note that this CDN build auto-initializes the Vue plugin. Using package managers ~~~~~~~~~~~~~~~~~~~~~~ -Pre-built distributions of Raven.js and the Raven.js Vue plugin are available via both Bower and npm for importing in your ``ember-cli-build.js`` file. +Both Raven.js and the Raven.js Vue plugin can be installed via npm and Bower. -Bower -````` - -.. code +npm +```` .. code-block:: sh - $ bower install raven-js --save - -.. code-block:: javascript - - app.import('bower_components/raven-js/dist/raven.js'); - app.import('bower_components/raven-js/dist/plugins/vue.js'); + $ npm install raven-js --save -.. code-block:: html - - - - -npm -```` +Bower +````` .. code-block:: sh - $ npm install raven-js --save + $ bower install raven-js --save -.. code-block:: javascript +In your main application file, import and configure both Raven.js and the Raven.js Vue plugin as follows: - app.import('bower_components/raven-js/dist/raven.js'); - app.import('bower_components/raven-js/dist/plugins/vue.js'); +.. code-block:: js -.. code-block:: html + import Raven from 'raven-js'; + import RavenVue from 'raven-js/plugins/vue'; - - - - -These examples assume that Vue is exported globally as ``window.Vue``. You can alternatively pass a reference to the ``Vue`` object directly as the second argument to ``addPlugin``: - -.. code-block:: javascript - - Raven.addPlugin(Raven.Plugins.Vue, Vue); From 1f9f9325aebb5e17c15927dcdff7acefca066882 Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Tue, 16 Aug 2016 12:53:02 -0700 Subject: [PATCH 5/5] Fix CDN url --- docs/integrations/vue.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/integrations/vue.rst b/docs/integrations/vue.rst index 909f3b990e32..cd7a5d9d26d9 100644 --- a/docs/integrations/vue.rst +++ b/docs/integrations/vue.rst @@ -26,7 +26,7 @@ Example: .. sourcecode:: html - +