bonree-vue-loader v0.9.1
bonree-vue-loader
A customized loader to bootstrap bonree agent automatically.
Support
webpack2+
Installation
// with npm
npm install bonree-vue-loader --save-dev
// with yarn
yarn add bonree-vue-loader --dev
With vue-cli@3.x.x
Add the loader to your vue-cli config. For example:
vue.config.js
module.exports = {
// ...
chainWebpack: config => {
config.module
.rule('bonree-agent')
.test(/vue\..*\.js$/)
.use('bonree-vue-loader')
.loader('bonree-vue-loader')
.options({
src: path.resolve(__dirname, 'agent.vue.min.js'),
config: {
mode: 'development',
beacon: {
development: 'localhost/q'
}
}
})
.end()
}
}
With webpack
Add the loader to your webpack config. For example:
webpack.config.js
module.exports = {
// ...
module: {
rules: [{ //...
test: /vue\..*\.js$/,
loader: 'bonree-vue-loader',
options: {
src: path.resolve(__dirname, 'agent.vue.min.js'),
config: {
mode: 'development',
beacon: {
development: 'localhost/q'
}
}
}
}]
}
}
Options
Name | Type | Required | Description |
---|---|---|---|
src | {String} | true | path of bonree browser agent |
config | {Object} | false | config for agent rumtime |
src
Type: String
Required: true
You should declare path to bonree browser agent, if missing this path, the injection will be skiped.
config
Type: Object
Required: false
You could use customized config with agent.
config.id
Type: Number
ID of browser app.
config.key
Type: String
Valid key of browser app.
config.mode
Type: String
Default: production
mode
determine where to upload application data, with beacon
. You could define different upload address in different mode.
Make sure the filed defined by mode
is correctly defined in beacon
.
standing mode
auto
In a complicated situation, our application has different access url, like a url with ip for private network and a url with domain for internet users. Then you could use auto
mode. In this mode, any config of beacon
will be ignored.
config.useHttps
Type: Boolean
Default: false
The protocol of upload requests is determined by visiting document as default. If document was loading with http
, then http
will be in use to send application datas. When turn to true
, https
protocol will be used always.
config.beacon
Type: Object
Default: { producton: 'bupload.bonree.com' }
When define a new mode, a new beacon address should be defined too.
{
mode: 'development', // 'development' | 'production' | 'local'
beacon: {
development: 'dev.upload.com',
production: 'prod.upload.com',
local: 'localhost'
}
}
In normal mode, the real upload target is in pattern as below:
${protocol}://${beacon[mode]}/metric
For example:
http://prod.upload.com/metric
for production
mode.
In auto
mode:
${protocol}://${domain}/upload/metric
For example:
http://www.bonree.com/upload/metric
for bonree homepage.
config.beaconHttps
Type: Object
Set a different upload target for https protocol. If not set, take config.beacon
as fallback.
{
mode: 'custom',
beacon: {
custom: 'custom.etl.com:8080/target'
}
beaconHttps: {
custom: 'custom.etl.com:8443/target'
}
}
config.probability
Type: Number
Default: 1000
Unit: ‰
Probability of collection.
config.userKey
Type: String
Default: br-user
userId
will be a clue to search for snapshots. Agent scan cookie
/sessionStorage
/localStorage
for userId with this key.