Set up session recording using an NPM dependency

There are a couple of ways to add the Meticulous recorder to your web application:

  1. By inserting it as script tag
  2. By installing an NPM package

If possible, we recommend you to use the script tag as it is the only way to fully guarantee that the recorder initializes before any other scripts execute, thereby ensuring Meticulous can capture all network responses (learn more).

However, if it's not possible to template your HTML to include the script tag to only be included in the environments where you want to record sessions then you can read on for how to use the NPM package.

Install the Meticulous recorder via an NPM dependency

Please select your framework:

Installing on any other framework

Step A) Add a dependency on the @alwaysmeticulous/recorder-loader package:

npm install @alwaysmeticulous/recorder-loader

or

yarn add @alwaysmeticulous/recorder-loader

Step B) In your app entry point call await tryLoadAndStartRecorder({ ... }) before your app initialisation logic. It is important to initialise the Meticulous recorder before you app initialises in order to capture all network requests / user interactions correctly.

For example your index.js or main.js might contain something like:

import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'

async function startApp() {
    // Record all sessions on localhost, staging stacks and preview URLs
    if (!isProduction()) {
      // Start the Meticulous recorder before you initialise your app.
      // Note: all errors are caught and logged, so no need to surround with try/catch
      await tryLoadAndStartRecorder({
        recordingToken: '<RECORDING_TOKEN>',
        isProduction: false,
      });
    }

    // Initalise app after the Meticulous recorder is ready, e.g.
    ReactDOM.render(component, document.getElementById('root'));
}

function isProduction() {
    // TODO: Update me with your production hostname
    return window.location.hostname.indexOf("your-production-site.com") > -1;
}

startApp();

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