Skip to main content

Vue.JS

The official Streply library for the Vue.js framework.

This package is a wrapper around @streply/browser, with added functionality related to Vue.js.

To use this SDK, call init() as early in your application as possible.

Install​

The first step is to install the streply/vue package.

npm install --save @streply/vue

Then initialize Streply:

import { createApp } from 'vue'
import App from './App.vue'
import * as Streply from '@streply/vue';

const app = createApp(App);

Streply.init(app, {
    dsn: 'https://clientPublicKey@api.streply.com/projectId',
});

app.mount('#app')
info

You can find the DSN code of the project in the Projects tab of your Streply account.

Capture events​

Errors​

Streply automatically finds all errors in your code, but you can also identify exceptions yourself.

try {
    nonExistsFunc("Welcome!");
} catch(err) {
    Streply.Exception(err);
}

Also, you can trigger errors in this way:

<button @click="triggerError">Trigger error</button>

export default {
    methods: {
        triggerError() {
            throw new Error('This is an error');
        }
    }
};

If needed, you can manually send an error to Streply:

Streply.Error('This is an error', {'userId': 1}, Streply.Level.Critical);
Read more

Reade more about Capture errors in JS.

Logs​

To send a log to Streply, use the Streply.Log function.

let createUser = function(userName) {
    // ...
    
    Streply.Log('users.create', {'userName': userName});
}

createUser('Joey Tribbiani');
Read more

Reade more about Capture logs in JS.

Configuration​

Configuration should happen as early as possible in your code.

Streply.init(app, {
    dsn: 'https://clientPublicKey@api.streply.com/projectId',
    environment: 'local'
});

// or 

Streply.Config.Environment('local');
Read more

Reade more about Streply configuration in Configuration page.