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 [email protected]

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.