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:
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.
; ;RequireJS/AMD
This should be used if you are using RequireJS
;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: - nginxKubernetes/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.iohelm repo updateNext, 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.enabledFinally, 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.comYou 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 aretrace,debug,info,warn,error,fatal. To unset, simply set it tonullor remove thedebugkey from yourlocalStorageobject. NB. this will not work on browsers that do not supportlocalStorageorconsole.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 anyloggerevents as it causes an infinite loop. It also requires browser support forlocalStorageandconsole.log.