Integrate your website with Jam's Recording Links to automatically capture your web app's console logs, network requests, and more, with every Jam created from a Recording Link.
Last updated
Was this helpful?
Any Engineer with write permissions to your website can implement Jam's Hosted Recorded Links (with full debugging context) in 5 minutes or less. You'll need to:
Register one or more Recording URLs with Jam (so we can generate links to your site)
Set up Jam's Recorder UX on your Recording URLs (so your users can start recording)
Install Jam's Capture Script across your site (so Jam can capture page context)
Follow this short walk-through to receive full-detail bug reports from all your Jam Recording Links!
Navigate to your Jam team's settings page, and click the "Recording Links" tab.
Under connected domains, add one or more Recording URLs. These will be available to select when creating a Recording Link.
Use Jam.js' Recorder script to initialize a recorder on your page. This will cause our Recorder UX to pop up over your page.
If the user dismisses the Recorder UX before starting a recording, they may reload the page to try again.
Once the user starts recording, the page will lock itself in Recording Mode, preventing the Recorder UX from being dismissed until the user stops recording.
Once the recording is complete, Jam will confirm that the user would like to discard their recording if they try to close the Recorder UX before the Jam has been submitted.
Once the Jam has been submitted, the Recorder UX will close automatically, restoring control to your page.
To verify this is working: create a Recording Link, then navigate to it. Does the Recorder UX pop up? (For not-yet-deployed sites, you may replace the Recording Link URL's host with your localhost equivalent)
(If your site does not specify CSP directives, you can skip this step.)
A frame-src or script-src directive that doesn't include *.jam.dev will block Jam.js from including console logs with your user's Jams.
To fix this, modify your CSP header or meta tag to allow *.jam.dev as both:
frame-src
script-src
For example:
Use Jam.js' Capture script to capture events (such as console logs, network events, clicks, and keypresses) on your pages. These will be shared with our Recorder UX to save with your users' recordings, and otherwise ignored.
We aggressively cache Jam.js assets to minimize load time, prioritizing only critical code and deferring the rest to ensure your page continues to load and run rapidly.
Note: Jam.js' Capture script can only capture console and network requests made after it initializes.
The <script> tag should be placed as early as possible on the page, and should only use a lazy-loaded import when explicitly trading accuracy for un-cached load performance (e.g. on SEO-optimized pages).
To verify this is working: create a Recording Link, navigate to it and start recording, then console.log something, stop the recording, and submit it. Does the created Jam have your logged output?
(For not-yet-deployed sites, you may replace the Recording Link URL's host with your localhost equivalent)
(If your site does not specify CSP directives, you can skip this step.)
frame-src
script-src
For example:
Congratulations! You should now be able to capture logs on your domain. If you didn't validate each step above during implementation, you can now test the whole process:
First, create a Recording Link and select your Recording URL: [TODO: screenshot of latest UI here, once finalized + implemented]
Next, visit your Recording Link and start recording: [TODO: screenshot of latest UI here, or full demo gif]
Then, on a page with Jam.js' Capture script installed, cause a log to be emitted [TODO: screenshot or gif]
Finally, return to the Recording UX tab to stop and submit your recording [TODO: screenshot or gif]
When reviewing the recorded Jam, you should see your page's logs among the debugging data.
Q: Can I put the Recorder and Monitor scripts on the same page? A: Yes! When doing so, you only need to include the "shared code" snippet once (although nothing will go wrong if you include it twice)
Q: Can I programmatically create Recording Links directly on my page? A: Not at this time; an upcoming release will expose an API you can use to create Recording Links from anywhere—Slack, Zendesk, or directly on your site (or app).
Q: Can I customize the Recorder UI? A: Not at this time—but we'd like to make this more customizable. Please let us know what you'd like to do!
Q: Can I associate Jam data with recordings we manage? A: No; due to browser storage + message partitioning controls, Jam's Recording Links scripts only work when used together.
If Jam.js is installed within an iframe, the top level logs will not get captured, e.g. using Jam.js on embedded Shopify apps.
Console and network event capture is currently unavailable for Jams created in Firefox and Safari's "Private Browsing" modes for Firefox and Safari.
[TODO: confirm final list of unsupported envs]
[TODO: communicate in an env that we are unsupported]
When using the async and defer script attributes or lazy-loaded import(...) calls with Jam.js' Capture script, we cannot guarantee it will run early enough to capture every console log, network request, or other capturable event.
To properly associate your users' recordings with the logs we collect, Jam's Recorder needs to be served under the same origin [] as your site or application.
Some sites specify Content-Security-Policy [] directives via either a header or meta tag.
Events captured by Jam's Capture Script can only be associated to Jams initiated by a Recorder UX served under the same origin [] as your site or application.
As described in 2a above, if your site specifies a Content-Security-Policy [], your CSP must allow *.jam.dev as both:
