使用vuex-module-decorators处理全局错误

在应用程序中，错误处理是不可避免的一部分。在vue.js和vuex的世界中，使用vuex-module-decorators插件是一种开发出简洁和可扩展的错误处理机制的方法。

安装

npm install vuex-module-decorators --save

创建store模块

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module({ namespaced: true })
export default class ErrorModule extends VuexModule {
  private _error: any = null

  get error() {
    return this._error
  }

  @Mutation
  SET_ERROR(error: any) {
    this._error = error
  }

  @Action({ rawError: true })
  async loadSomething() {
    // 这里抛出一个错误
    throw new Error('加载失败')
  }
}

在上面的代码中，我们首先使用@Module装饰器创建了一个命名空间为true的store模块。然后，我们定义了一个私有的 _error 变量来存储错误信息，还创建了一个getter和一个 mutation函数，mutation函数用于更新我们的错误信息。

为了处理和抛出错误（如在loadSomething()方法中），我们使用了 @Action 装饰器，并使用 rawError:true来捕获和处理原始错误信息。使用 rawError:true 的好处是它不会抛出 vuex-errors ，而是把所有原始错误传递给全局错误处理程序。

在Vue组件中处理错误

<template>
  <div v-if="error">
    {{ error.message }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { mapGetters } from 'vuex'

@Component({
  computed: {
    ...mapGetters({
      error: 'errorModule/error',
    }),
  },
})
export default class App extends Vue {}
</script>

在Vue组件中，我们使用 mapGetters 辅助函数从state中获取错误信息并显示在页面上。

全局异常处理

我们需要从全局范围内处理 Javascript 错误，以便最终用户不会看到它们。这可以通过使用 window.addEventListener('error', error =>...) 实现，并在其中发送错误到一个错误日志记录器，例如Sentry 或 Rollbar。

window.addEventListener('error', (error: ErrorEvent) => {
  // 从ErrorEvent对象中提取原始错误信息
  const { message, filename, lineno, colno, error: originalError } = error

  // 将错误发送到错误日志记录器
  loggingService.error({ message, filename, lineno, colno, originalError })
})

现在，我们可以确保在发生 JavaScript异常时，错误将被捕获并发送到日志记录服务。

结论

使用vuex-module-decorators插件是一种处理全局异常和错误处理的方法。它提供了数据存储，处理函数和mutation的结构。此外，它还提供了@Action装饰器，可以处理异步代码中的错误。这个插件使得应用程序的错误处理变得更加容易扩展，对于开发具有更高的可读性和可维护性。