Send Custom Data with Diagnostic Information

‍

Custom data are additional pieces of information that you want to send in order to identify and debug issues specific to your product or application. You can send custom data when issues are created with Redpen.

There are two ways to send custom data:

1. Static Data
2. Dynamic Data

1. Static Data

Static data are the known metadata that is sent in every issue created. e.g. productId, tenantId, etc.

Add the customData JSON code inside the Redpen Widget script to send the static data as shown below:

  ...
  customData : {
    tenantId: 'xxx-xxx-xxx',
    productId: 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy',
    ...
  }
  ...
 

After adding the customData in the widget script, the script will look as below:

  <script id="redpen-widget-data" type="text/javascript">
  window.redpenWidgetConfig = { 
            widgetId: 'aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
            customData : {
                tenantId: 'xxx-xxx-xxx',
                productId: 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy',
                ...
            } 
        }
</script>
<script id="redpen-widget-script"
src="https://app.redpen.ai/redpenWebWidget.js" defer>
</script>
 

2. Dynamic Data

Dynamic data are the metadata that is specific to the business logic of your application that you want to collect and send with every issue created. e.g. userId, application state, etc.

To collect dynamic data, you need to implement the getCustomData() method (the method must be on the same page where the Redpen widget script is added) in the application that has the business logic and returns a JSON string. Redpen widget will call the method when a user captures a screenshot or stops the screen recording to get the data.

  ...
  customData : getCustomData,
  ...
 

  ...
  function getCustomData(){
    // Business Logic
    let user = getUser();

    // Return the JSON object
    return {
      logedinUserId: user.userID,
      email: user.email,
      ...
    }
  }
  ...
 

After adding the getCustomData() method in the widget script, the script will look as below:

  <script id="rredpen-widget-script" type="text/javascript">
  window.redpenWidgetConfig = { 
            widgetId: 'aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
            customData : getCustomData,
            ... 
        }
  </script> 
  <script id="redpen-widget-script"
  src="https://app.redpen.ai/redpenWebWidget.js" defer></script>