Jam Documentation
LoginTwitterHelp
  • Welcome to Jam
  • Get Started
  • Company
    • Mission and values
    • Security, privacy and compliance
  • Product Features
    • Instant Replay
      • Performance
      • Privacy
      • iFrame & canvas support
    • Video Screen Recording
      • Desktop Recording
      • Video blur
      • Video annotations
    • Screenshot
      • Full screen screenshot
      • Screenshot hover states
    • DevTools
      • Security
      • Network req/resp bodies
      • GraphQL
      • Jam.Metadata
    • Jam for Incognito
    • Mobile inspector
    • Keyboard shortcuts
    • Team Workspaces
      • Manage Seats in Jam
      • Workspace Discoverability
    • Security and compliance features
      • How to configure SSO for your organization
    • Jam for Customer Support
      • Getting started with Jam.js
    • Jam AI
      • AI policies
      • AI debugger
  • Integrations
    • Asana
    • ClickUp
    • Figma
    • GitHub
    • GitLab
    • Jira
    • Linear
    • Notion
    • Sentry
    • Slack
    • Azure DevOps
    • Fullstory
    • LogRocket
  • Downloads and Browsers
    • Browser support
  • Configuration
    • How to auto-deploy Jam organization wide
    • Configuring Jam for AI apps
    • How to run Jam only on some websites
    • How to ignore logs from Jam in the developer console
    • How to use Jam with local files
Powered by GitBook
On this page
  • Getting Started
  • What data can you include in Jam.Metadata?
  • Test it out live, Right now!
  • When is metadata captured?
  • Limits, Constraints, and Errors

Was this helpful?

  1. Product Features
  2. DevTools

Jam.Metadata

Include custom debug data in every bug report

PreviousGraphQLNextJam for Incognito

Last updated 5 months ago

Was this helpful?

With one 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.

Getting Started

  1. First, install the Jam SDK into your project:

npm install '@jam.dev/sdk'
# or:
yarn add '@jam.dev/sdk'
  1. Once the script is included, you can start using the jam.metadata function to include debug information with every Jam a user files on your site:

// In the root of your app, the place where
// you would initialize your app's stores and
// render React onto your root element
import { jam } from "@jam.dev/sdk";

// We call the jam.metadata function once.
// The function we pass into it is called whenever
// a Jam is captured, so the data inside is always
// live and never stale.

jam.metadata(() => {
  return {
    userId: 5492,
    teamId: 'd3b59ce8-95f1-410c-bb5e-9dc598599336',
    timeSincePageLoad: performance.now(),
    a: { nested: ['object', 'or', 'array'] }
    // and any other debug data you'd need
});
  1. Now, your metadata will be shown inside every Jam filed from your site!

What data can you include in Jam.Metadata?

Beyond static values and local variables, you can also pass in:

  • State from your app stores (for example: user ID, team ID, the last 5 items in your user's checkout cart, which feature flags are enabled, etc.)

  • Values from localStorage

  • Whatever data you need to debug your bugs!

Test it out live, Right now!

Your Jam should include metadata that looks like the following:

Objects provided will be expanded and pretty-printed when you click on them:

When is metadata captured?

Metadata is captured when a bug reporter decides to create a Jam.

Limits, Constraints, and Errors

When calling jam.metadata(), keep in mind that the returned metadata object must be:

  1. An Object instance (for example, { a: 1, b: 2}, and not window, which is a Window instance)

  2. Under 10kb in size, when serialized.

  3. Serializable. If JSON.stringify can't stringify it, we can't store it!

If your app throws an error, or the above conditions aren't met, Jam will both log in your browser's live console, and display an error when the Jam is captured:

As always, if you have suggestions or requests for the Jam.metadata feature, or the direction our SDK should evolve in, our inbox is open at hello@jam.dev!

To see this live, try going to our and creating a Jam! This example site already has Jam.Metadata integrated, so as soon as you capture any kind of Jam, we'll include up-to-date debugging info.

The live code for is , and the jam.metadata() call is , for your reference. This demo shows a realistic example of how to include data from a store. In this case, we use MobX for state management, but you can pull from Redux, Zustand, or any other store you prefer.

example site
here
here
Your site's metadata, included! Try creating more todo items to see how todoItemCount changes
Here, we've snapshotted our app's last todo item, in case rendering it caused the bug!
It says "developers" in monospace, so you know it's for you ;)