Now use raven-js on frontend

front/package.json

@@ -21,6 +21,7 @@
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.4",
     "moxios": "^0.4.0",
+    "raven-js": "^3.22.3",
     "semantic-ui-css": "^2.2.10",
     "vue": "^2.3.3",
     "vue-lazyload": "^1.1.4",

front/src/App.vue

@@ -22,15 +22,23 @@
         </div>
       </div>
     </div>
+    <raven
+      v-if="$store.state.instance.settings.raven.front_enabled.value"
+      :dsn="$store.state.instance.settings.raven.front_dsn.value">
+    </raven>
   </div>
 </template>
 
 <script>
 import Sidebar from '@/components/Sidebar'
+import Raven from '@/components/Raven'
 
 export default {
   name: 'app',
-  components: { Sidebar }
+  components: {
+    Sidebar,
+    Raven
+  },
   created () {
     this.$store.dispatch('instance/fetchSettings')
   }

front/src/components/Raven.vue

+<template>
+  <div class="raven"></div>
+</template>
+
+<script>
+import Raven from 'raven-js'
+import RavenVue from 'raven-js/plugins/vue'
+import Vue from 'vue'
+import logger from '@/logging'
+
+export default {
+  props: ['dsn'],
+  created () {
+    Raven.uninstall()
+    this.setUp()
+  },
+  destroyed () {
+    Raven.uninstall()
+  },
+  methods: {
+    setUp () {
+      Raven.uninstall()
+      logger.default.info('Installing raven...')
+      Raven.config(this.dsn).addPlugin(RavenVue, Vue).install()
+      console.log({}.test.test)
+    }
+  },
+  watch: {
+    dsn: function () {
+      this.setUp()
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped >
+.raven {
+  display: none;
+}
+</style>