Integrating ExceptionLess Monitoring into a Vue 2.x Project

Preface

We've always used Sentry for project monitoring, but a while ago our Sentry broke (I broke it)

But monitoring is still very necessary. Before Sentry is fixed, I wanted to find a temporary alternative. At the same time, I found that online materials about ExceptionLess are pitifully scarce, and ExceptionLess's official documentation isn't very complete either. After digging through the docs and source code for a long time, this article came about...

About ExceptionLess

Those who write .NET Core shouldn't be unfamiliar with it. This is a monitoring tool for the .NET platform, similar to Sentry. However, we feel the UI is cleaner than Sentry's, and the information is also clearer and easier to grasp at a glance, so all of our .NET Core service monitoring is done with ExceptionLess.

ExceptionLess also supports the frontend, so I plan to temporarily use ExceptionLess for our frontend project monitoring.

Preparation

Create a project in ExceptionLess — those who know, know; I won't repeat it~

ExceptionLess provides several modes, including Node.js and browser applications. Here I chose the browser application.

The official docs also have a Vue example, but it's for the Vue 3.x version. Since we're still using Vue 2.x, I had to wrap one myself based on the browser application SDK~

Installing the ExceptionLess Client

Install the client with yarn

yarn add exceptionless

The version I used is ^1.6.4

Integrating ExceptionLess

Create a new JS file under src/utils: exceptionless.js

import {ExceptionlessClient} from 'exceptionless/dist/exceptionless';

const exLessClient = ExceptionlessClient.default;
exLessClient.config.apiKey = '';
exLessClient.config.serverUrl = ''

const install = Vue => {
  if (install.installed)
    return

  install.installed = true

  Object.defineProperties(Vue.prototype, {
    $exLess: {
      get() {
        return exLessClient
      }
    }
  })
}

export default install

This wraps ExceptionLess as a Vue module

Then edit main.js to register the module

import Exceptionless from './utils/exceptionless'
// Exceptionless模块
Vue.use(Exceptionless)

Then, wherever you need to submit logs, you can use it directly:

this.$exLess.submitLog('测试信息')
this.$exLess.submitException(error)

Integrating into Global Exception Handling

If you had to catch and submit every exception yourself manually, it would be too much trouble, and some would slip through the net

I referred to materials online and put together a Vue global exception handler that collects exceptions that weren't caught manually, then submits them all to the ExceptionLess platform.

Straight to the code, src/utils/errorHandler.js

import {ExceptionlessClient} from 'exceptionless/dist/exceptionless';

const exLessClient = ExceptionlessClient.default;

function isPromise(ret) {
  return (ret && typeof ret.then === 'function' && typeof ret.catch === "function")
}

const errorHandler = (error, vm, info) => {
  console.error('抛出全局异常', 'vm=', vm, 'info=', info)
  console.error(error)
  exLessClient.submitException(error)
}

function registerActionHandle(actions) {
  Object.keys(actions).forEach(key => {
    let fn = actions[key]
    actions[key] = function (...args) {
      let ret = fn.apply(this, args)
      if (isPromise(ret)) {
        return ret.catch(errorHandler)
      } else { // 默认错误处理
        return ret
      }
    }
  })
}

const registerVuex = (instance) => {
  if (instance.$options['store']) {
    let actions = instance.$options['store']['_actions'] || {}
    if (actions) {
      let tempActions = {}
      Object.keys(actions).forEach(key => {
        tempActions[key] = actions[key][0]
      })
      registerActionHandle(tempActions)
    }
  }
}
const registerVue = (instance) => {
  if (instance.$options.methods) {
    let actions = instance.$options.methods || {}
    if (actions) {
      registerActionHandle(actions)
    }
  }
}

let GlobalError = {
  install: (Vue, options) => {
    /**
     * 全局异常处理
     * @param {*} error
     * @param {*} vm
     */
    Vue.config.errorHandler = errorHandler
    Vue.mixin({
      beforeCreate() {
        registerVue(this)
        registerVuex(this)
      }
    })
    Vue.prototype.$throw = errorHandler
  }
}

export default GlobalError

Register it in main.js

import ErrorHandler from "./utils/errorHandler"

// 全局异步处理模块
Vue.use(ErrorHandler)

Done~

References

• [Practical Summary] Elegantly Handling Exceptions in Vue Projects: https://juejin.cn/post/6844903860121632782
• Vue 3 vs Vue 2.x Differences, Caveats, Overall Review, and How It Compares to React Hooks: https://juejin.cn/post/6892295955844956167#heading-21