Developers suffer trying to understand what caused a bug and why a certain feature is not working. We, at devqaly have a mission to make it easier to understand why your code doesn't work

Official Devqaly SDK for the Browser

The oficial Devqaly's browser SDK allows your quality assurance engineers to record their screens while performing a test case (or reproducing a bug) while Devqaly records vital information for debugging such as:

• Network requests
• Clicks
• Scroll
• Window Resizing
• URL changes
• Console logs
• Database transactions

Getting started

To install the SDK you will need to have node installed locally with NPM or Yarn

Then you will have to install it locally:

npm i @devqaly/browser

or, if you are using yarn:

yarn install @devqaly/browser

Then you just have to initiate the SDK with:

import { DevqalySDK } from '@devqaly/browser'

const devqalySDK = new DevqalySDK({
  // You can obtain the project key by visiting your project's list
  projectKey: '<project-key>',
})

devqalySDK.showRecordingButton()

Configuration

We are working hard to add new configuration methods to allow you to customize this SDK to your needs.

Currently, we allow you to add the following configurations

Filter events

You are able to filter out events that should be sent to the devqaly's backend (or your own self-hosted version).

You simply have to pass a eventFilter when initializing the SDK:

import { DevqalySDK } from '@devqaly/browser'

const devqalySDK = new DevqalySDK({
  // ...
  eventFilter: function (event: SDKEvent) {
    
  }
})

API Url

If you are self-hosting devqaly, you can pass the frontend URL by providing a frontendUrl to the configuration:

import { DevqalySDK } from '@devqaly/browser'

const devqalySDK = new DevqalySDK({
  // ...
  frontendUrl: 'https://webapp-devqaly.my-domain.com'
})

API Url

If you are self-hosting devqaly, you can pass the backend URL by providing a apiUrl when intializing the SDK:

import { DevqalySDK } from '@devqaly/browser'

const devqalySDK = new DevqalySDK({
  // ...
  apiUrl: 'https://api-devqaly.my-domain.com'
})

Disable listeners

If you would like to disable certain listeners, you can simple pass a disabledListeners object when initializing the SDK:

import { DevqalySDK } from '@devqaly/browser'

const devqalySDK = new DevqalySDK({
  // ...
  disabledListeners: {
    network: false,
    click: false,
    log: false,
    resize: false,
    scroll: false,
    urlChange: false,
  }
})