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.
To get a new authorization key, you will need to sign up to BrowserSpy.io 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.
<head> of your application, simple copy and paste this snippet of
This should be inserted as close to the start of the code as possible.
This should be used if you are using RequireJS
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 applicationnginx:image: nginx:alpinebrowserspy:image: browserspy/httpenvironment:BROWSERSPY_TOKEN: your-auth-codeTARGET_URL: http://nginx:80HTTP_PORT: "3000"ports:- "3000:3000"links:- 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 https://chart.browserspy.iohelm repo update
Next, add it to your chart's
dependencies:- name: recorderversion: 1.3.0 # Update to the latest versionrepository: '@browserspy'condition: recorder.enabled
Finally, update your
values.yaml to configure the deployment:
recorder:enabled: truesettings:target: http://<service>.<namespace>.svc.cluster.localtoken: your-auth-codeingress:hosts:- subdomain.domain.com
You can now deploy this with your application using
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 docs.browserspy.io.
List of internal event names:
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
fatal. To unset, simply set it to
nullor remove the
debugkey from your
localStorageobject. NB. this will not work on browsers that do not support
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
loggerevents as it causes an infinite loop. It also requires browser support for