browserspy

v1.4.1

Published

a year ago

Stop wasting time recreating bugs

Downloads

194

0High
0Medium
0Low

npm

browser bugs recording testing

BrowserSpy recorder

BrowserSpy is an application which allows you to record your web pages for later playback. It records all interactions - including mouse click, key strokes, HTTP requests - for later playback, allowing developers to see exactly what testers saw, removing ambiguity on bugs.

This package is wrapped inside a UMD loader allowing you different ways to load it depending upon your configuration.

Installation

You will need to get the package from npm or download the latest distributable from BrowserSpy.

Auth Key

To get a new authorization key, you will need to sign up to BrowserSpy.io and configure a new project.

Global

This is the simplest setup available and great for testing things out. This should be used if you're not using any form of package manager and just want to use a globally available function.

In the <head> of your application, simple copy and paste this snippet of code:

<script src="//cdn.browserspy.io/browserspy.js"></script>
<script>
  browserspy('your-auth-key');
</script>

CommonJS

This should be used if you are in a JavaScript environment with CommonJS support, for example where you build with either Webpack, Browserify or Parcel.

This should be inserted as close to the start of the code as possible.

import browserspy from 'browserspy';

browserspy('your-auth-key');

RequireJS/AMD

This should be used if you are using RequireJS

define('mymodule', ['path/to/browserspy.io'], (browserspy) => {
    browserspy('your-auth-key');
});

Docker

This should be used if you want to ensure no code changes between deployments or if you are deploying to a containerised environment

This uses the BrowserSpy HTTP container which provides an HTTP reverse-proxy for your application with the BrowserSpy recorder injected in. This example will provide a reverse proxy for an Nginx server - once you've got it working, you can apply the browserspy container to your application.

version: "3.6"
  services:
    # Replace this with your application
    nginx:
      image: nginx:alpine
    
    browserspy:
      image: browserspy/http
      environment:
      BROWSERSPY_TOKEN: your-auth-code
      TARGET_URL: http://nginx:80
      HTTP_PORT: "3000"
      ports:
        - "3000:3000"
      links:
        - nginx

Kubernetes/Helm

This is the same principle and container image as the Docker deployment. First, add the BrowserSpy repository to your Helm instance.

helm repo add browserspy https://chart.browserspy.io
helm repo update

Next, add it to your chart's requirements.yaml file:

dependencies:
  - name: recorder
    version: 1.3.0 # Update to the latest version
    repository: '@browserspy'
    condition: recorder.enabled

Finally, update your values.yaml to configure the deployment:

recorder:
  enabled: true
  settings:
    target: http://<service>.<namespace>.svc.cluster.local
    token: your-auth-code
  ingress:
    hosts:
      - subdomain.domain.com

You can now deploy this with your application using helm upgrade.

Usage

Once you have complete the above steps, you now have a fully functioning BrowserSpy recorder. When you now visit your website, you will see the BrowserSpy recorder toolbar - when you see an issue, report it and it will save a recording for you to view later on.

Troubleshooting

Full documentation is available at docs.browserspy.io.

Event List

List of internal event names:

bodyContent
browser
http
keyboard
logger
mouseClick
mousePosition
staticContent
url
window

Helpful Commands

browserspy.clear(): clear the BrowserSpy instance and remove all saved data. This will reload your browser.
localStorage.debug = '<log-level>': displays the logs in the console. Available levels are trace, debug, info, warn, error, fatal. To unset, simply set it to null or remove the debug key from your localStorage object. NB. this will not work on browsers that do not support localStorage or console.log.
localStorage.event = '<event-name>': displays the event recording logs in the console. The value can be any event name, in a comma-separated format (eg, bodyContent,browser). NB. this will never display any logger events as it causes an infinite loop. It also requires browser support for localStorage and console.log.