fix: add Sentry & fix change order twice

package.json

@@ -16,6 +16,7 @@
     "prebuild": "yarn lint"
   },
   "dependencies": {
+    "@sentry/browser": "^4.5.3",
     "downloadjs": "^1.4.7",
     "lodash": "^4.17.10",
     "material-design-icons-iconfont": "^3.0.3",

src/background.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import __ from './common/i18n'
 import tabs from './common/tabs'
+import logger from './common/logger'
 import storage from './common/storage'
 import options from './common/options'
 import migrate from './common/migrate'
@@ -207,6 +208,7 @@ const commandHandler = command => {
 }
 
 const init = async () => {
+  logger.init()
   await listManager.init()
   const opts = window.opts = await storage.getOptions() || {}
   _.defaults(opts, options.getDefaultOptions())

src/common/constants.js

@@ -24,3 +24,5 @@ export const ADD_LIST = 'addList'
 export const UPDATE_LIST_BY_ID = 'updateListById'
 export const REMOVE_LIST_BY_ID = 'removeListById'
 export const CHANGE_LIST_ORDER = 'changeListOrderRelatively'
+
+export const SENTRY_DSN = 'https://[email protected]/1307154'

src/common/logger.js

@@ -0,0 +1,44 @@
+import * as Sentry from '@sentry/browser'
+import {SENTRY_DSN} from './constants'
+import {isBackground} from './utils'
+import manifest from '../manifest.json'
+
+const logger = {}
+
+const genMethods = () => {
+  for (const method in window.console) {
+    if (typeof window.console[method] !== 'function') continue
+    logger[method] = (...args) => {
+      window.console[method](...args)
+      args.forEach(arg => {
+        if (arg instanceof Error) Sentry.captureException(arg)
+        else Sentry.addBreadcrumb({data: arg, level: method})
+      })
+    }
+  }
+}
+
+logger.init = (opts = {}) => {
+  genMethods()
+  window.onerror = window.onunhandledrejection = err => {
+    Sentry.captureException(err)
+  }
+  const {Vue} = opts
+  const integrations = Sentry.defaultIntegrations
+  if (Vue) integrations.push(new Sentry.Integrations.Vue({Vue}))
+  Sentry.init({
+    environment: DEBUG ? 'dev' : 'production',
+    release: manifest.version,
+    dsn: SENTRY_DSN,
+    debug: DEBUG,
+    integrations,
+  })
+
+  Sentry.configureScope(async scope => {
+    scope.setTag('background', await isBackground())
+  })
+
+  if (DEBUG) window.Sentry = Sentry
+}
+
+export default logger

src/common/service/boss.js

@@ -11,6 +11,7 @@ import listManager from '../listManager'
 import {isBackground, timeout} from '../utils'
 import browser from 'webextension-polyfill'
 import io from 'socket.io-client'
+import logger from '../logger'
 
 const hasToken = async () => TOKEN_KEY in await browser.storage.local.get(TOKEN_KEY)
 
@@ -88,7 +89,10 @@ const uploadOpsViaWS = async () => {
       const change = changes.shift()
       await new Promise(resolve => {
         socket.emit('list.update', change, ({err}) => {
-          if (err) console.error(change, err)
+          if (err) {
+            logger.log(change)
+            logger.error(err)
+          }
           resolve()
         })
       })
@@ -203,7 +207,7 @@ const refresh = async () => {
     await timeout(Promise.all([syncOptions(), syncLists()]), 20000)
     await browser.runtime.sendMessage({refreshed: {success: true}})
   } catch (err) {
-    console.error(err)
+    logger.error(err)
     await browser.runtime.sendMessage({refreshed: {success: false}})
   } finally {
     _refreshing = false

src/exchanger.js

@@ -13,7 +13,8 @@ const parseLists = (compatible, data) => {
 
 addEventListener('message', msg => {
   const {compatible, data} = msg.data
-  if (compatible == null || !data) return
+  if (compatible == null || !data) throw new Error('wrong message')
   const listsData = parseLists(compatible, data)
+  if (!Array.isArray(listsData)) throw new Error('data must be an array')
   postMessage(listsData)
 })

src/index.js

@@ -2,12 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import logger from './common/logger'
 import Vuetify from 'vuetify/lib'
 import { Scroll } from 'vuetify/lib/directives'
 import VueClipboard from 'vue-clipboard2'
 import colors from 'vuetify/es5/util/colors'
 import 'vuetify/src/stylus/app.styl'
 
+logger.init({Vue})
+
 Vue.config.productionTip = false
 Vue.config.devtools = true
 Vue.use(VueClipboard)

src/page/main/DetailList.vue

@@ -66,13 +66,29 @@
         <div class="list-title" v-else :class="list.color ? list.color + '--text' : ''">{{ list.title }}</div>
       </v-flex>
       <v-flex xs2 class="text-xs-right">
-        <v-btn :title="__('ui_title_down_btn')" @click.stop="moveListDown(list.index)" flat icon class="icon-in-title" :disabled="list.index === lists.length - 1">
+        <v-btn
+          :title="__('ui_title_down_btn')"
+          @click.stop="moveListDown(list.index)"
+          flat icon class="icon-in-title"
+          v-if="$route.name === 'detailList'"
+          :disabled="list.index === lists.length - 1"
+        >
           <v-icon color="gray" :style="{fontSize: '14px'}">fas fa-arrow-down</v-icon>
         </v-btn>
-        <v-btn :title="__('ui_title_up_btn')" @click.stop="moveListUp(list.index)" flat icon class="icon-in-title" :disabled="list.index === 0">
+        <v-btn
+          :title="__('ui_title_up_btn')"
+          @click.stop="moveListUp(list.index)"
+          flat icon class="icon-in-title"
+          v-if="$route.name === 'detailList'"
+          :disabled="list.index === 0"
+        >
           <v-icon color="gray" :style="{fontSize: '14px'}">fas fa-arrow-up</v-icon>
         </v-btn>
-        <v-btn :title="__('ui_title_pin_btn')" @click.stop="pinList([list.index, !list.pinned])" flat icon class="icon-in-title">
+        <v-btn
+          :title="__('ui_title_pin_btn')"
+          @click.stop="pinList([list.index, !list.pinned])"
+          flat icon class="icon-in-title"
+        >
           <v-icon :color="list.pinned ? 'blue' : 'gray'" :style="{fontSize: '14px'}">fas fa-thumbtack</v-icon>
         </v-btn>
       </v-flex>

src/page/main/ImportExport.vue

@@ -11,8 +11,8 @@
     <v-tab-item key="import">
       <v-card flat>
         <v-card-text>
-          <v-btn :loading="processing" @click="imp(true)">{{ __('ui_import_comp') }}</v-btn>
-          <v-btn :loading="processing" @click="imp(false)">{{ __('ui_import_json') }}</v-btn>
+          <v-btn :loading="processing" @click="imp(true)" :disabled="!importData">{{ __('ui_import_comp') }}</v-btn>
+          <v-btn :loading="processing" @click="imp(false)" :disabled="!importData">{{ __('ui_import_json') }}</v-btn>
           <input ref="fileSelector" type="file" hidden @change="impFile"></input>
           <v-btn :loading="processing" @click="$refs.fileSelector.click()">
             {{ __('ui_import_from_file') }}
@@ -32,7 +32,7 @@
         <v-card-text>
           <v-btn @click="exp(true)">{{ __('ui_export_comp') }}</v-btn>
           <v-btn @click="exp(false)">{{ __('ui_export_json') }}</v-btn>
-          <v-btn @click="copy" :disabled="exportData.length === 0">{{ __('ui_copy') }}</v-btn>
+          <v-btn @click="copy" :disabled="!exportData">{{ __('ui_copy') }}</v-btn>
           <v-btn @click="save" :disabled="!exportType">{{ __('ui_save_as_file') }}</v-btn>
           <v-btn
             color="success" @click="saveToGdrive"
@@ -67,6 +67,7 @@ import {readFile} from '@/common/utils'
 import gdrive from '@/common/service/gdrive'
 import {mapMutations, mapActions, mapState} from 'vuex'
 import {ADD_LIST} from '@/common/constants'
+import logger from '@/common/logger'
 
 export default {
   data() {
@@ -95,7 +96,7 @@ export default {
         this.showSnackbar(__('ui_main_succeeded'))
         if (PRODUCTION) ga('send', 'event', 'IES', 'export', comp)
       } catch (e) {
-        console.error(e)
+        logger.error(e)
         this.showSnackbar(__('ui_main_error_occurred'))
         this.exportType = null
       } finally {
@@ -113,7 +114,7 @@ export default {
         this.$router.push('/app/list')
         if (PRODUCTION) ga('send', 'event', 'IES', 'import', comp)
       } catch (e) {
-        console.error(e)
+        logger.error(e)
         this.showSnackbar(__('ui_main_error_occurred'))
       } finally {
         this.processing = false
@@ -137,7 +138,7 @@ export default {
         this.showSnackbar(__('ui_main_succeeded'))
         if (PRODUCTION) ga('send', 'event', 'IES', 'download')
       } catch (e) {
-        console.error(e)
+        logger.error(e)
         this.showSnackbar(__('ui_main_error_occurred'))
       } finally {
         this.processing = false
@@ -149,7 +150,7 @@ export default {
         await gdrive.saveCurrentTabLists()
         this.showSnackbar(__('ui_main_succeeded'))
       } catch (e) {
-        console.error(e)
+        logger.error(e)
         this.showSnackbar(__('ui_main_error_occurred'))
         gdrive.clearToken()
       } finally {

src/store/lists.js

@@ -126,7 +126,7 @@ export default {
       if ((list.tabs.length !== 0) && state.opts.alertRemoveList && !confirm(`${__('ui_remove_list')}:
         [${list.tabs.length}] ${list.title || __('ui_untitled')}
         ${__('ui_created')} ${formatTime(list.time)}`)) return
-      commit(REMOVE_LIST_BY_ID, [list._Id])
+      commit(REMOVE_LIST_BY_ID, [list._id])
     },
     removeTab({commit, state}, [listIndex, tabIndex]) {
       const list = state.lists[listIndex]
@@ -154,7 +154,6 @@ export default {
       commit(UPDATE_LIST_BY_ID, [list._id, {pinned}])
     },
     swapListItem({commit, state}, [a, b]) {
-      commit('swapListItem', [a, b])
       const list = state.lists[a]
       commit(CHANGE_LIST_ORDER, [list._id, b - a])
     },

yarn.lock

@@ -128,6 +128,58 @@
     esprima "^4.0.1"
     sprintf-js "^1.0.3"
 
+"@sentry/browser@^4.5.3":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/browser/-/browser-4.5.3.tgz#69744d13b01c490f366cbf2676790624b9f7c0a0"
+  integrity sha512-ePbsyXtZS9jWM0lD8rxA46omJjJcQPaRZak08TyxFBGm1YOUFvvNAA6rNjUtK4fFEznLhPA5YcllcOCBE2bPPg==
+  dependencies:
+    "@sentry/core" "4.5.3"
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.5.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/core/-/core-4.5.3.tgz#e55a42c694deec903aec2479e4a282d5a7a43878"
+  integrity sha512-off7XkyyiPXJTQ1XYPzxsY3zLHztMdK1kuIeHzyoIzu4kvs8H75eqou+fADo04JmfaMNy+OZSoW+5Aq2SZR2Ng==
+  dependencies:
+    "@sentry/hub" "4.5.3"
+    "@sentry/minimal" "4.5.3"
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.5.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/hub/-/hub-4.5.3.tgz#54ce5988ac6dedbe9bba99e2c00f8f26eb677dfe"
+  integrity sha512-4b8oPVAGw/hf11CQN9J7hAk2wzD2HIZsQBl/PcB/p5r1UyHw8cibpVobJulkHJMBJMiZ/twIBGZ1G1qK3LJdhw==
+  dependencies:
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.5.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/minimal/-/minimal-4.5.3.tgz#7b69481df2d61e4b935d067be62a52824190f616"
+  integrity sha512-W9+eEZosoDKTAJkab/bxsSRim7I4lqeWHLhmCchDimKcdmpBzC+gOCT0PywwOWRLW08LhTHfmnNSAJv6PaZiCA==
+  dependencies:
+    "@sentry/hub" "4.5.3"
+    "@sentry/types" "4.5.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/types/-/types-4.5.3.tgz#3350dce2b7f9b936a8c327891c12e3aef7bd8852"
+  integrity sha512-7ll1PAFNjrBNX9rzy3P2qAQrpQwHaDO3uKj735qsnGw34OtAS8Xr8WYrjI14f9fMPa/XIeWvMPb4GMic28V/ag==
+
+"@sentry/[email protected]":
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/@sentry/utils/-/utils-4.5.3.tgz#6893fca9fde230b230360779362752e9b5570852"
+  integrity sha512-yIYqnuq9cd9nAUJ2MPmq++Mgy81qB2fglsDB8TiBfk2eaba79qFcKp8xg3w3EMDHZMlfmlx4fkTmZJ/+V02oWQ==
+  dependencies:
+    "@sentry/types" "4.5.3"
+    tslib "^1.9.3"
+
 "@vue/component-compiler-utils@^2.0.0":
   version "2.3.1"
   resolved "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.3.1.tgz#d1c2623f02ad3fe6b6fc9c3762be55c9c61e3977"
@@ -5408,7 +5460,7 @@ trim-right@^1.0.1:
   dependencies:
     glob "^7.1.2"
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.9.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==