> Meticulous records real user sessions from a web app and replays them against each commit to catch visual regressions.
>
> Full AI-readable docs index (complete project setup journey + every page as markdown): https://app.meticulous.ai/llms.txt

# Set up session recording using an NPM dependency

> **warning: Script tag is the recommended installation method**
> We recommend [installing the recorder via a script tag](/docs/how-to/recorder-script#installation-instructions) instead. The script tag is the only way to fully guarantee that the recorder initializes before any other scripts execute, ensuring Meticulous can capture all network responses. Only use the NPM package if you cannot template your HTML to conditionally include the script tag.

Please select your framework:

### Angular

### Installing on Angular

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

```bash
npm install @alwaysmeticulous/recorder-loader
```

or

```bash
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 your app initialises in order to capture all
network requests / user interactions correctly.

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

```
### Dev & Staging Only

```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
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,
      });
    }

    // Initialise app after the Meticulous recorder is ready, e.g.
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

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

startApp();

```
### All Environments

```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'

// Record 1% of production sessions
const METICULOUS_SAMPLING_RATE = 0.01;

async function startApp() {
    if (!isProduction() || Math.random() < METICULOUS_SAMPLING_RATE) {
      // 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: isProduction(),
        maxMsToBlockFor: isProduction() ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
      });
    }

    // Initialise app after the Meticulous recorder is ready, e.g.
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

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

startApp();

```
```

If you have any cross-origin or sandboxed iFrames then the recorder should be added to each of these iFrames as well as the main frame. If you have any issues setting up the recorder then click [here](https://calendly.com/gabriel-h/meticulous-demo-booking) 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](/docs/session-recording/csp-exceptions) CSP exceptions.

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

See [troubleshooting](/docs/how-to/troubleshoot-recorder) 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](mailto:support@meticulous.ai).
### Vue

### Installing on Vue

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

```bash
npm install @alwaysmeticulous/recorder-loader
```

or

```bash
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 your app initialises in order to capture all
network requests / user interactions correctly.

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

```
### Dev & Staging Only

```typescript
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
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,
      });
    }

    // Initialise app after the Meticulous recorder is ready, e.g.
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
}

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

startApp();

```
### All Environments

```typescript
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'

// Record 1% of production sessions
const METICULOUS_SAMPLING_RATE = 0.01;

async function startApp() {
    if (!isProduction() || Math.random() < METICULOUS_SAMPLING_RATE) {
      // 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: isProduction(),
        maxMsToBlockFor: isProduction() ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
      });
    }

    // Initialise app after the Meticulous recorder is ready, e.g.
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
}

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

startApp();

```
```

If you have any cross-origin or sandboxed iFrames then the recorder should be added to each of these iFrames as well as the main frame. If you have any issues setting up the recorder then click [here](https://calendly.com/gabriel-h/meticulous-demo-booking) 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](/docs/session-recording/csp-exceptions) CSP exceptions.

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

See [troubleshooting](/docs/how-to/troubleshoot-recorder) 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](mailto:support@meticulous.ai).

### React or any other framework

### Installing on any other framework

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

```bash
npm install @alwaysmeticulous/recorder-loader
```

or

```bash
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 your app initialises in order to capture all
network requests / user interactions correctly.

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

```
### Dev & Staging Only

```typescript
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,
      });
    }

    // Initialise 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();

```
### All Environments

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

// Record 1% of production sessions
const METICULOUS_SAMPLING_RATE = 0.01;

async function startApp() {
    if (!isProduction() || Math.random() < METICULOUS_SAMPLING_RATE) {
      // 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: isProduction(),
        maxMsToBlockFor: isProduction() ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
      });
    }

    // Initialise 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 cross-origin or sandboxed iFrames then the recorder should be added to each of these iFrames as well as the main frame. If you have any issues setting up the recorder then click [here](https://calendly.com/gabriel-h/meticulous-demo-booking) 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](/docs/session-recording/csp-exceptions) CSP exceptions.

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

See [troubleshooting](/docs/how-to/troubleshoot-recorder) 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](mailto:support@meticulous.ai).