Install the Meticulous recorder via a script tag

Please select your framework:

Installing on any other framework

Important: The Meticulous Recorder script should be the first script to load, and have no async or defer attributes

Libraries you depend on may snapshot references to window.fetch or window.XMLHttpRequest early in the page lifecycle, which means if Meticulous is not the first script to load it may not be able to record all the network responses required for your app to function (learn more). Therefore the recorder script must be the first script to load in order to be guaranteed to capture all network requests correctly. This means:

  1. It should be added to your index.html file, before any other script tags.
  2. It should not have any async or defer attributes set.
  3. It should be present in the initial HTML returned from the server -- you can not add the script tag dynamically using javascript, since if you do so the browser may execute the script after other scripts have loaded. If you need to include the script tag in your HTML only in certain environments then this must be done either server-side, or at build time by templating your HTML.

If it's not possible to meet these requirements then you can use an NPM dependency instead of a script tag. If you need to wait for a network request to complete before you know whether you should record the session then you can buffer the requests in memory, and only send them later.

Add the recorder as the first script tag in your <head> tag. If you only want to record sessions in non-production environments then you will need to template your HTML to only include the script tag in non-production environments (if this is not possible then you can use an NPM dependency instead of a script tag).

<head>
  ...
  <script
    data-recording-token="<RECORDING_TOKEN>"
    data-is-production-environment="<true/false>"
    src="https://snippet.meticulous.ai/v1/meticulous.js">
  </script>

  <!--Meticulous snippet should be added before your app -->
  ...
  <script src="main_app.js"></script>
</head>

If you have any issues setting up the recorder then click here to book a call with us.

Validating installation

Once you add the Meticulous snippet open your webapp (either locally or on the environment that you injected the snippet into) and record a session by clicking around on your web app.

If the snippet was installed successfully you should be able to view the recorded session in your Meticulous dashboard in the Sessions section.

If you set a CSP policy on your application then you'll need to add these CSP exceptions.

I've installed the snippet but why do I not see any sessions in my Meticulous dashboard?

See troubleshooting for more information on why this might be happening.

Issues / questions?

We're always happy to help you with any issues you encounter while setting up or anything you might be unsure about.

Get in touch by emailing support@meticulous.ai

Next Steps