Add Vue.js (2.0) plugin (#688)

docs/integrations/vue.rst

@@ -0,0 +1,65 @@
+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>`.
+
+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
+
+ <script src="https://cdn.jsdelivr.net/vue/2.0.0-rc/vue.min.js"></script>
+ <script src="https://cdn.ravenjs.com/3.4.1/vue/raven.min.js"></script>
+ <script>Raven.config('___PUBLIC_DSN___').install();</script>
+
+Note that this CDN build auto-initializes the Vue plugin.
+
+Using package managers
+~~~~~~~~~~~~~~~~~~~~~~
+
+Both Raven.js and the Raven.js Vue plugin can be installed via npm and Bower.
+
+npm
+````
+
+.. code-block:: sh
+
+ $ npm install raven-js --save
+
+
+Bower
+`````
+
+.. code-block:: sh
+
+ $ bower install raven-js --save
+
+In your main application file, import and configure both Raven.js and the Raven.js Vue plugin as follows:
+
+.. code-block:: js
+
+ import Raven from 'raven-js';
+ import RavenVue from 'raven-js/plugins/vue';
+
+ Raven
+ .config('___PUBLIC_DSN___')
+ .addPlugin(RavenVue)
+ .install();

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;
+

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 '<root component>'
+ }
+ }
+ };
+ });
+
+ 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: '<root component>'
+ });
+ });
+
+ 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);
+ });
+ });
+});