https://github.com/chetan/vue-dumper

https://github.com/chetan/vue-dumper

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/chetan/vue-dumper
• Owner: chetan
• Created: 2020-09-03T21:45:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-03T14:34:03.000Z (over 2 years ago)
• Last Synced: 2024-12-18T05:38:12.468Z (11 days ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-dumper

A vue.js utility for dumping application state. Useful for debugging and error

reporting.

## Installation

```sh

npm save vue-dumper

# or

yarn add vue-dumper

```

## Usage

Install a global error handler:

```js

Vue.config.errorHandler = (err, vm) => {

  if (vm && vm.$options) {

    err.message += `\n\nComponent State:\n\n${JSON.stringify(dumper.getInstanceState(vm))}`;

  }

  if (vm && vm.$store) {

    err.message += `\n\nStore State:\n\n${JSON.stringify(

      dumper.getStoreState(vm.$store, 'moduleA', 'moduleB')

    )}`;

  }

  // Do something with the modified err like log to console or some error

  // reporting service.

  console.error(err);

};

```

## Sample output

```text

TypeError: foo is not a function

Component State:

{"props":[],"data":[],"computed":[],"refs":[],"injected":[],"route":[{"key":"$route",

  "value":{"_custom":{"type":"router","abstract":true,"value":{"path":"/home",

  "query":{},"params":{},"fullPath":"/home","name":"Home","meta":{}}}}}],

  "vuexGetters":[],"observables":[],"attrs":[]}

Store State:

{"moduleA":{},"moduleB":{}}

```