Skip to content
This repository was archived by the owner on Jan 8, 2019. It is now read-only.

Commit de415aa

Browse files
bengourleybengourley
committed
✨
0 parents  commit de415aa

File tree

10 files changed

+17540
-0
lines changed

10 files changed

+17540
-0
lines changed

‎.babelrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"plugins": [
3+
"transform-es3-member-expression-literals",
4+
"transform-es3-property-literals",
5+
"transform-es2015-arrow-functions",
6+
"transform-es2015-block-scoping",
7+
[ "transform-es2015-classes", { "loose": true } ],
8+
[ "transform-es2015-computed-properties", { "loose": true } ],
9+
"transform-es2015-destructuring",
10+
"transform-es2015-parameters",
11+
"transform-es2015-shorthand-properties",
12+
"transform-es2015-spread",
13+
[ "transform-es2015-template-literals", { "loose": true } ],
14+
"transform-object-rest-spread",
15+
["syntax-object-rest-spread"]
16+
]
17+
}

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Bugsnag: Vue
2+
3+
A [bugsnag-js](https://github.com/bugsnag/bugsnag-js) plugin for [Vue.js](https://vuejs.org/).
4+
5+
## Usage
6+
7+
### Inline
8+
9+
```html
10+
<script src="https://unpkg.com/vue"></script>
11+
<script src="//d2wy8f7a9ursnm.cloudfront.net/4.x.x/bugsnag.min.js"></script>
12+
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugin-vue/1.x.x/bugsnag-vue.min.js"></script>
13+
<script>window.bugsnagClient = bugsnag('API_KEY', [ bugsnag__vue ])</script>
14+
```
15+
16+
### Bundled
17+
18+
```js
19+
const Vue = require('vue')
20+
const bugsnag = require('bugsnag-js')
21+
const bugsnagVue = require('bugsnag-vue')
22+
23+
bugsnag('API_KEY', [
24+
bugsnagVue.createPlugin(Vue)
25+
])
26+
```

‎examples/app.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Define the <bad-button/> component
2+
Vue.component('bad-button', {
3+
template: '#bad-button-template',
4+
data: function () {
5+
return { doARenderError: false }
6+
},
7+
methods: {
8+
triggerRenderError: function () {
9+
this.doARenderError = true
10+
setTimeout(function () {
11+
this.doARenderError = false
12+
}.bind(this), 100)
13+
}
14+
}
15+
})
16+
// Define the top-level Vue.js app
17+
var app = new Vue({
18+
// Hooks into the div#app that exists in the DOM
19+
el: '#app',
20+
data: {
21+
// Just enough data to trigger the errors we need
22+
doARenderError: false,
23+
doAWatchError: false
24+
},
25+
watch: {
26+
// A watch function that will throw an error when the
27+
// value it is watching is set to `true`
28+
doAWatchError: function (val, oldVal) {
29+
if (val) throw new Error('Doh!')
30+
}
31+
},
32+
methods: {
33+
// Sets the data in a way that causes the next render() of this
34+
// component to throw an error (due to referencing a property
35+
// of an object that doesn't exist)
36+
triggerRenderError: function () {
37+
this.doARenderError = true
38+
setTimeout(function () {
39+
this.doARenderError = false
40+
}.bind(this), 100)
41+
},
42+
// Throws an error using Vue.js's nextTick() function
43+
triggerNextTickError: function () {
44+
Vue.nextTick(function () {
45+
JSON.parse('definitely not json')
46+
})
47+
},
48+
// Changes the value being watched such that it throws an error
49+
triggerWatchError: function () {
50+
this.doAWatchError = true
51+
setTimeout(function () {
52+
this.doAWatchError = false
53+
}.bind(this), 100)
54+
}
55+
}
56+
})

‎examples/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Bugsnag: Vue.js Example</title>
5+
<script src="https://unpkg.com/vue"></script>
6+
<script src="node_modules/bugsnag-js/dist/bugsnag.js"></script>
7+
<script src="node_modules/bugsnag-vue/dist/bugsnag-vue.js"></script>
8+
<script>
9+
window.bugsnagClient = bugsnag({
10+
apiKey: '19094d99b21f3a2a6f47910f9531fc83',
11+
endpoint: '//localhost:8000'
12+
}, [ bugsnag__vue ])
13+
</script>
14+
</head>
15+
<style>
16+
body {
17+
font-family: 'Menlo', monospace; line-height: 1.7;
18+
color: #444; background-color: #fafafa;
19+
max-width: 600px; margin: 0 auto; padding: 20px;
20+
}
21+
</style>
22+
<body>
23+
<h1>Bugsnag: Vue.js plugin example</h1>
24+
25+
<!-- The HTML structure for this very basic Vue.js app -->
26+
<div id="app">
27+
<p>
28+
<button v-on:click="triggerRenderError">Throw an error during component render()</button>
29+
<span v-if="doARenderError">{{ doARenderError.non.existent.property }}</span>
30+
</p>
31+
<bad-button></bad-button>
32+
<p>
33+
<button v-on:click="triggerNextTickError">Throw an error during Vue.nextTick()</button>
34+
</p>
35+
<p>
36+
<button v-on:click="triggerWatchError">Trigger a watch error</button>
37+
</p>
38+
</div>
39+
40+
<!-- A component that will trigger a render() error when clicked -->
41+
<script type="text/x-template" id="bad-button-template">
42+
<p>
43+
<button v-on:click="triggerRenderError">Throw an error during component render() (child component)</button>
44+
<span v-if="doARenderError">{{ doARenderError.non.existent.property }}</span>
45+
</p>
46+
</script>
47+
48+
<script src="app.js"></script>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)