TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

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.


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 and configure a new project.


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="//"></script>


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';


This should be used if you are using RequireJS

define('mymodule', ['path/to/'], (browserspy) => {


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"
    # Replace this with your application 
      image: nginx:alpine
      image: browserspy/http
      BROWSERSPY_TOKEN: your-auth-code
      TARGET_URL: http://nginx:80
      HTTP_PORT: "3000"
        - "3000:3000"
        - nginx


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
helm repo update

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

  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:

  enabled: true
    target: http://<service>.<namespace>.svc.cluster.local
    token: your-auth-code

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


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.


Full documentation is available at

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.

Package Sidebar


npm i browserspy

Weekly Downloads






Unpacked Size

1.01 MB

Total Files


Last publish


  • npm