LogRocket

https://docs.logrocket.com/docs
Admin
LogRocket is a comprehensive platform that combines session replay, product analytics, and issue...
Tokens:74,812
Snippets:1,216
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install LogRocket CLI

Source: https://docs.logrocket.com/docs/stacktraces

Install the LogRocket command line tool globally using npm. This tool is required for uploading source maps.

```shell
npm install -g logrocket-cli

```

--------------------------------

### Install LogRocket SDK with NPM

Source: https://docs.logrocket.com/docs/using-logrocket-with-ember-cli

Use this command to add the LogRocket SDK to your project dependencies.

```shell
npm install --save logrocket
```

--------------------------------

### Install LogRocket via NPM

Source: https://docs.logrocket.com/docs/quickstart

Install the LogRocket package using NPM. This command should be run in your project's terminal.

```bash
$ npm i --save logrocket
```

--------------------------------

### Configure Web SDK with NPM

Source: https://docs.logrocket.com/docs/using-aws-cloudfront-as-a-proxy

When using NPM, import and call the `setup` function before `LogRocket.init`. This ensures that LogRocket uses your specified CloudFront `sdkServer` and `ingestServer` endpoints and your custom AppID.

```javascript
import setup from 'logrocket/setup';
const LogRocket = setup({
  sdkServer: 'https://your.cloudfront.net',
  ingestServer: 'https://your.cloudfront.net'
});
LogRocket.init('your/appid');
```

--------------------------------

### Initialize LogRocket with NPM

Source: https://docs.logrocket.com/docs/quickstart

Import and initialize LogRocket in your client-side JavaScript code after installing via NPM. Replace YOUR_APP_ID with your actual LogRocket App ID.

```javascript
import LogRocket from 'logrocket';

LogRocket.init(YOUR_APP_ID);
```

--------------------------------

### Get Export Files by Date (SaaS API)

Source: https://docs.logrocket.com/docs/data-export

Retrieve a list of exported session files starting from a specific time by providing a Unix timestamp in milliseconds to the `date` query parameter. Ensure you use your API key for authorization.

```bash
curl 'https://api.logrocket.com/v1/orgs/<your-org>/apps/<your-app>/data-export/?date=1530651654308' -H 'Authorization: Token <your-api-key>'
```

--------------------------------

### Configure Cursor MCP Server

Source: https://docs.logrocket.com/docs/mcp

Add the LogRocket MCP server configuration to Cursor. This is the default setup for OAuth authentication.

```json
{
  "mcpServers": {
    "logrocket": {
      "url": "https://mcp.logrocket.com/mcp"
    }
  }
}
```

--------------------------------

### Correct LogRocket Initialization Order

Source: https://docs.logrocket.com/docs/troubleshooting-sessions

Ensure LogRocket.init() is called before other application code is loaded. Import LogRocket in a separate setup file to maintain the correct initialization order.

```javascript
// DOES NOT WORK!
import LogRocket from 'logrocket'

LogRocket.init('foo/bar')
import './myOtherModule';

```

```javascript
// in entry file
import './logrocketSetup';
import './myOtherModule';

// in logrocketSetup.js
import LogRocket from 'logrocket';
LogRocket.init('foo/bar');

```

--------------------------------

### Configure Data Export Bucket (On-Premise)

Source: https://docs.logrocket.com/docs/data-export

Configure a unique data export bucket name in your values.yaml file for on-premise LogRocket installations. Replace `<unique-id>` with a string of your choice, such as your organization's name.

```yaml
buckets:
  dataExport: 'logrocket-data-export-<unique-id>'
  # ... existing keys you set up during initial deployment
```

--------------------------------

### Enable Data Export (On-Premise)

Source: https://docs.logrocket.com/docs/data-export

Add this configuration to your values.yaml file to enable the data export feature for on-premise LogRocket installations. Ensure you also configure a data export bucket.

```yaml
dataExport:
  enabled: true
```

--------------------------------

### Get List of Export Files (SaaS API)

Source: https://docs.logrocket.com/docs/data-export

Use this curl command to retrieve a list of your oldest exported session files from the LogRocket API. Replace `<your-org>` and `<your-app>` with your organization and application identifiers, and `<your-api-key>` with your generated API key.

```bash
curl https://api.logrocket.com/v1/orgs/<your-org>/apps/<your-app>/data-export/ -H 'Authorization: token <your-api-key>'
```

--------------------------------

### Initialize, Plan, and Apply Terraform

Source: https://docs.logrocket.com/docs/using-aws-cloudfront-as-a-proxy

Use these commands to initialize your Terraform configuration, review the planned changes, and apply them to create the necessary AWS resources for your CloudFront distribution.

```bash
terraform init
terraform plan
terraform apply
```

--------------------------------

### Install ember-browserify for Older Ember CLI Versions

Source: https://docs.logrocket.com/docs/using-logrocket-with-ember-cli

Install ember-browserify as a development dependency if you are using an older version of Ember CLI to enable CommonJS module loading.

```shell
npm install --save-dev ember-browserify
```

--------------------------------

### Enable Same-Domain Iframe Playback

Source: https://docs.logrocket.com/docs/iframes

Include this `LogRocket.init()` call in both your main application and within your iframes to enable same-domain iframe playback.

```javascript
LogRocket.init(YOUR_APP_ID, {
  mergeIframes: true,
});
```

--------------------------------

### Android Jetpack Compose Selector Example

Source: https://docs.logrocket.com/docs/query-selectors-for-mobile

This example shows how a Jetpack Compose Text element with testTag and layoutId modifiers can be referenced using a LogRocket selector. It highlights the NodeName.testTag#id structure.

```kotlin
// This Compose element can be referenced in LogRocket with selector:
//   TextController.HeaderText#abc123
Text(
  text = "My App",
  modifier = Modifier.testTag("HeaderText").layoutId("abc123")
)
```

--------------------------------

### Initialize LogRocket with a New Project

Source: https://docs.logrocket.com/docs/adding-a-new-project

When creating a new project, a unique string is appended to your organization slug in the LogRocket.init() call to route sessions to the correct project. Ensure this is correctly configured for session routing.

```javascript
LogRocket.init('your-org-slug/your-new-project-slug');
```

--------------------------------

### Import LogRocket in Older Ember CLI Versions

Source: https://docs.logrocket.com/docs/using-logrocket-with-ember-cli

After installing ember-browserify, you can import LogRocket normally in your project.

```javascript
import LogRocket from 'logrocket';
```

--------------------------------

### Configure whatwg-fetch for LogRocket

Source: https://docs.logrocket.com/docs/troubleshooting-sessions

Import 'whatwg-fetch' normally into your bundle and ensure LogRocket is imported afterward. Avoid using webpack's ProvidePlugin to set 'whatwg-fetch' as a global before LogRocket initialization.

```javascript
// DO NOT DO THIS
new webpack.ProvidePlugin({
  fetch: 'exports-loader?self.fetch!whatwg-fetch'
})

// DO THIS

import 'whatwg-fetch';
import LogRocket from 'logrocket';
```

--------------------------------

### Initialize LaunchDarkly and Send Flags to LogRocket

Source: https://docs.logrocket.com/docs/launchdarkly

Initializes the LaunchDarkly client and sends all flag values to LogRocket when the client is ready. Ensure you have the LaunchDarkly JS SDK and LogRocket initialized.

```javascript
import * as LDClient from 'launchdarkly-js-client-sdk';
import LogRocket from 'logrocket';

// Initialize LaunchDarkly
const ldClient = LDClient.initialize('YOUR_CLIENT_SIDE_ID', {
  key: currentUserId, // your user or multi-context key
  // ...any additional LD context attributes
});

// When the LD client is ready, capture all flag values
ldClient.on('ready', () => {
  const flags = ldClient.allFlags(); // { [flagKey]: value }
  // Send a single custom event containing the full flag map
  LogRocket.track('LaunchDarkly Flags', flags);
});
```

--------------------------------

### Android Native View Selector Example

Source: https://docs.logrocket.com/docs/query-selectors-for-mobile

This selector targets an EditText element with a specific ID and tag. It demonstrates the structure for Android Native views.

```xml
  <EditText
    android:id="@+id/user_email"
    android:tag="test-email-input"
    ... />
```

```text
EditText.test-email-input#user_email
```

--------------------------------

### List Exported Sessions by Date

Source: https://docs.logrocket.com/docs/data-export

Retrieves a list of exported session files starting from a specific point in time using a Unix timestamp in milliseconds.

```APIDOC
## GET /v1/orgs/<your-org>/apps/<your-app>/data-export/

### Description
Retrieves a list of exported session files starting from a specific point in time using a Unix timestamp in milliseconds.

### Method
GET

### Endpoint
/v1/orgs/<your-org>/apps/<your-app>/data-export/

### Parameters
#### Query Parameters
- **date** (integer) - Required - A Unix timestamp in milliseconds to retrieve sessions starting from a specific time.

#### Headers
- **Authorization** (string) - Required - API token in the format `token <your-api-key>`.

### Request Example
```bash
curl 'https://api.logrocket.com/v1/orgs/<your-org>/apps/<your-app>/data-export/?date=1530651654308' -H 'Authorization: Token <your-api-key>'
```
```

--------------------------------

### Run ngrok for Local Testing

Source: https://docs.logrocket.com/docs/local-development

Use ngrok to make your local development server accessible to LogRocket's servers. Ensure you use the HTTPS URL provided by ngrok for testing.

```bash
ngrok http 3000
```

--------------------------------

### Initialize LogRocket with Release

Source: https://docs.logrocket.com/docs/stacktraces

Initialize the LogRocket SDK in your application's script tag, specifying the release version. This associates subsequent recordings and uploads with a specific release.

```javascript
LogRocket.init('yourorg/yourapp', {
  release: 'b620fm'
});

```

--------------------------------

### Get CloudFront Distribution Configuration

Source: https://docs.logrocket.com/docs/using-aws-cloudfront-as-a-proxy

Retrieve the configuration of your CloudFront distribution as a YAML file using the AWS CLI. This is useful for support or manual configuration checks.

```bash
aws cloudfront get-distribution --id <your distribution's ID>
```

--------------------------------

### Import isomorphic-fetch Correctly

Source: https://docs.logrocket.com/docs/troubleshooting-sessions

Ensure 'isomorphic-fetch' is imported directly to allow LogRocket to instrument fetch. Avoid assigning the imported fetch to a variable before LogRocket initialization.

```javascript
// DO NOT DO THIS:
import fetch from 'isomorphic-fetch';
fetch(...);
      
// DO THIS:
import 'isomorphic-fetch';
fetch(...);
```

--------------------------------

### Frontend Logging with sumo-logger NPM Package

Source: https://docs.logrocket.com/docs/sumo-logic

Use the sumo-logger NPM package to send data to a Sumo Logic HTTP Source without a server-side Collector. Initialize the logger with the session key obtained from LogRocket.

```javascript
const SumoLogger = require('sumo-logger');

var recordingURL;
LogRocket.getSessionURL(function(sessionURL) {
  recordingURL = sessionURL;
});

const logger = new SumoLogger({
  // other options
  sessionKey: recordingURL
});

// example of logging
logger.log('message');
```

--------------------------------

### Get LogRocket Session URL with Callback for Sentry

Source: https://docs.logrocket.com/docs/sentry

To ensure a session URL is available, use `LogRocket.getSessionURL()` with a callback. This guarantees the URL is present before configuring the Sentry scope.

```javascript
LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra("sessionURL", sessionURL);
  });
});
```

--------------------------------

### Create a Release with LogRocket CLI

Source: https://docs.logrocket.com/docs/stacktraces

Create a new release in LogRocket using the CLI. This command requires your API key and the release version string.

```shell
logrocket release b620fm --apikey="your:api:key"

```

--------------------------------

### Example Metadata Event JSON

Source: https://docs.logrocket.com/docs/logrocket-events-table-schema

This JSON represents a sample metadata event. It shows the structure and fields that are typically included in such events, which are then translated into column names for data export.

```json
{
  "type": "lr.Metadata",
  "seqID": 9,
  "time": 1681406759856,
  "tabID": "911d320a-ab31-4b80-9f11-1c5ec1af5e59",
  "data": {
    "release": "48fc3710a6e3a02c0876f8a456ea8b5deeee34b5",
    "sdkVersion": "script",
    "scriptVersion": "16.265.0",
    "country": "United States",
    "region": "Virginia",
    "city": "Ashburn",
    "browserInfo": {
      "href": "https://staging.logrocket.com/pingdom/test",
      "codeName": "Mozilla",
    },
  }
}
```

--------------------------------

### Reporting-Endpoints Header Example

Source: https://docs.logrocket.com/docs/crash-logging-configuration

This header informs browsers to send crash reports to the specified endpoints. Ensure the endpoint URI is correctly formatted and includes your organization and application names.

```http
Reporting-Endpoints: default="https://app.logrocket.com/reports/{orgName}/{appName}", secondary-endpoint="..."
```

--------------------------------

### Count Identified Users by Day

Source: https://docs.logrocket.com/docs/example-queries

Aggregates the count of distinct identified users on a daily basis within a specified date range. It extracts the date from session start times.

```sql
WITH
  sessions_start AS (
  SELECT
    -- There can be many events with event_type = 'session' for the same session_id.
    -- Behavior such as a full page reload or opening the site in a new tab will
    -- trigger such an event; the start of a session is the one with the earliest date.
    MIN(updated_at) AS session_date,
    session_id
  FROM
    "<DB_NAME>.<SCHEMA_NAME>.logrocket_events"
  WHERE
    event_type = 'session'
    AND app_id = '<YOUR APP ID>'
  GROUP BY
    session_id 
  ),
  users AS (
  SELECT
    user_id,
    session_id
  FROM
    "<DB_NAME>.<SCHEMA_NAME>.logrocket_events"
  WHERE
    event_type = 'user'
    AND app_id = '<YOUR APP ID>'
    AND user_id <> ''
    AND user_id NOT LIKE '%<INTERNAL IDENTIFIER>%'
    AND user_identity_status = 'Identified'
  )
SELECT
  session_day,
  COUNT(DISTINCT user_id) AS user_count
FROM (
  SELECT
    users.user_id AS user_id,
    users.session_id AS session_id,
    date(sessions_start.session_date) AS session_day
  FROM
    sessions_start
  INNER JOIN
    users
  ON
    users.session_id = sessions_start.session_id
    AND sessions_start.session_date BETWEEN '2023-05-07' and '2023-05-14'
)
GROUP BY
  session_day
ORDER BY session_day DESC

```

--------------------------------

### Configure Web SDK with Script Tag

Source: https://docs.logrocket.com/docs/using-aws-cloudfront-as-a-proxy

Update your application's script tags to point to your CloudFront distribution for both the logger script and the main LogRocket SDK. Ensure the `ingestServer` and `appid` are correctly set.

```html
<script>window._lrAsyncScript = "https://your.cloudfront.net/logger.min.js"</script>
<script src="https://your.cloudfront.net/LogRocket.min.js" crossorigin="anonymous"></script>
<script>window.LogRocket && window.LogRocket.init('your/appid', { ingestServer: 'https://yourcloudfront.cloudfront.net'});</script>
```

--------------------------------

### Configure Cursor MCP Server with API Key

Source: https://docs.logrocket.com/docs/mcp

Configure Cursor to use an API key for authentication by setting the Authorization header. Replace `<your-api-key>` with your actual LogRocket API key.

```json
{
  "mcpServers": {
    "logrocket": {
      "url": "https://mcp.logrocket.com/mcp",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      }
    }
  }
}
```

--------------------------------

### Count Identified Users in a Time Range

Source: https://docs.logrocket.com/docs/example-queries

Counts the number of distinct identified users within a specified date range. It identifies session start times and filters for unique, identified users.

```sql
WITH
  sessions_start AS (
  SELECT
    -- There can be many events with event_type = 'session' for the same session_id.
    -- Behavior such as a full page reload or opening the site in a new tab will
    -- trigger such an event; the start of a session is the one with the earliest date.
    MIN(updated_at) AS session_date,
    session_id
  FROM
    "<DB_NAME>.<SCHEMA_NAME>.logrocket_events"
  WHERE
    event_type = 'session'
    AND app_id = '<YOUR APP ID>'
  GROUP BY
    session_id 
  ),
  users AS (
  SELECT
    user_id,
    session_id
  FROM
    "<DB_NAME>.<SCHEMA_NAME>.logrocket_events"
  WHERE
    event_type = 'user'
    AND app_id = '<YOUR APP ID>'
    AND user_id <> ''
    AND user_id NOT LIKE '%<INTERNAL IDENTIFIER>%'
    AND user_identity_status = 'Identified'
  )
SELECT
  COUNT(DISTINCT user_id) AS user_count
FROM (
  SELECT
    users.user_id AS user_id,
    users.session_id AS session_id,
    sessions_start.session_date AS session_date
  FROM
    sessions_start
  INNER JOIN
    users
  ON
    users.session_id = sessions_start.session_id
    AND sessions_start.session_date BETWEEN '2023-05-07' and '2023-05-14'
)
```

--------------------------------

### Create Snowflake User with Key-Pair Authentication

Source: https://docs.logrocket.com/docs/snowflake-prerequisites

Use this SQL command as an alternative to password authentication for creating a Snowflake user. Replace '<PUBLIC_KEY>' with your actual public key obtained from the Streaming Data Export UI. This method is preferred for enhanced security.

```sql
create user if not exists identifier($user_name)
RSA_PUBLIC_KEY='<PUBLIC_KEY>'; -- your public key can be found from in the Streaming Data Export onboarding UI
```

--------------------------------

### Avoid Script Hoisting with Async Script URL

Source: https://docs.logrocket.com/docs/proxying-traffic-through-your-own-domain

Ensure that import statements for LogRocket do not get hoisted above the `_lrAsyncScript` variable declaration. This prevents issues where the script might not be correctly configured to use your proxy.

```javascript
window._lrAsyncScript = window._lrAsyncScript = 'https://logrocket-cdn.example.com/logger.min.js';

// this gets hoisted above the variable declaration on L1
import LogRocket from 'logrocket';
```
Tokens:
Raw