Capture logs, network requests from Customer Jams

Install Jam.js to get console logs, network requests, and more, in every customer support ticket.

Note: This version of Jam.js is for our Intercom Integration. For installing Jam.JS with Recording Links, see Recording Links.

Here’s a preview of what you’ll get with every support ticket:

How to set up Jam.js?

Installing Jam.js takes under 5 min guaranteed, and if it takes you a second longer, we'll buy you a pizza. 🍕

1. Go to jam.dev and select the team where you want your Jams from Intercom to appear.

2. Copy the team ID from the URL

3. Add the team ID to this code snippet

<script async defer src="https://js.jam.dev/support/<team ID here>.js"></script>

4. Paste the snippet into your web app's codebase

In order to guarantee jam.js can properly capture console and network requests, it should be the first <script> tag on the page.

For example, here’s where the jam.js script would go in an example template HTML file for a Single Page App:

<html>
    <head>
        <!-- PASTE JAM.JS SCRIPT TAG HERE -->
    </head>
    <body>
        <div id="root"></div>
        <script src="/app.js"></script>
    </body>
</html>

Because we include the async and defer tags within the script snippet, fetching the jam.js script will not impact page load times.

5. Modify CSP (if your site has this enabled)

(If your site does not specify CSP directives, you can skip this step.)

Some sites specify Content-Security-Policy directives via either a header or meta tag.

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

How to test jam.js?

Once jam.js is installed, every Jam your users create will have console logs and network requests attached.

To test this out, issue a screen recording request, and begin recording your web app.

Open devtools for your web app, and run the following test commands in console:

console.log('test'); // this creates a console log
fetch('/test'); // this creates a network request

Now, you should have console and network events generated and captured for your recorded Jam.

To confirm, submit the Jam, then open its link and click on the Console and Network tabs. Your Jam should include at least 1 console and network event, each.

Here’s how this might look:

Jam.Metadata

With one additional function call, jam.metadata(), you can ensure that every Jam submitted from your website includes the metadata you need to debug the bug. You can log anything in Jam.Metadata: simple static values like User ID, to any data like redux or react state. Whatever you need to debug, just send it to Jam.Metadata so it's always there for you in any ticket. More information can be found here.

Current limitations

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, Safari, or incognito mode. Support for these browsers is coming soon.
Because we include the async and defer tags, the first page load (or any page load, when cache is disabled) will not guarantee Jam.js runs early enough to capture console and network requests. This is a tradeoff we’ve made to make sure we do not impact your app’s load times.

PreviousSend Recording Links from your own domain and collect console logs NextAdvanced Data Protection for Customer Support Jams (Auto-blur)

Last updated 4 months ago

Was this helpful?

hashtagHow to set up Jam.js?

hashtag1. Go to jam.devarrow-up-right and select the team where you want your Jams from Intercom to appear.

hashtag2. Copy the team ID from the URL

hashtag3. Add the team ID to this code snippet

hashtag4. Paste the snippet into your web app's codebase

hashtag5. Modify CSP (if your site has this enabled)

hashtagHow to test jam.js?

hashtagJam.Metadata

hashtagCurrent limitations