🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@logsnag/remix

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@logsnag/remix

LogSnag client for Remix applications

latest
npmnpm
Version
1.0.0-beta.1
Version published
Weekly downloads
5
-16.67%
Maintainers
1
Weekly downloads
 
Created
Source
LogSnag

@logsnag/remix

Clear, Simple, Effective Product Analytics for SaaS.

NPM Version Discord Documentation

Installation

Using npm

npm install @logsnag/remix

Using yarn

yarn add @logsnag/remix

Using pnpm

pnpm add @logsnag/remix

Usage

First, wrap your application with the LogSnagProvider at the top level, passing in your project and token:

Set your token's scope to public in the LogSnag dashboard.

import { LogSnagProvider } from '@logsnag/remix';

function App() {
  return (
    <html lang="en">
    <head>{/* ... */}</head>
    <body>
      <LogSnagProvider
        token="<TOKEN>"
        project="<PROJECT_NAME>"
      >
        <Outlet />
      </LogSnagProvider>
    </body>
    </html>
  );
}

Hooks

The useLogSnag hook can be used across your React components and provides the following methods:

  • track(options: TrackOptions): Track custom events.
  • identify(options: IdentifyOptions): Identify user traits.
  • setUserId(userId: string | null): Set the user id for the current user. If the user is not logged in, pass null.
  • clearUserId(): Clear the user id for the current user.
  • setDebug(flag: boolean = true): Set debug mode for logging.
import { useLogSnag } from '@logsnag/remix';

export function Component() {
  // Get the hooks
  const { setUserId, track, identify } = useLogSnag();

  // Set the user id when a user logs in
  setUserId('user-123');

  // Track an event
  track({
    channel: "payments",
    event: "New Subscription",
    user_id: "user-123", // optional when set using setUserId
    icon: "💰",
    notify: true,
    tags: {
      plan: "premium",
      cycle: "monthly",
      trial: false
    }
  });

  // Identify user traits (e.g., name, email, plan, etc.)
  identify({
    user_id: "user-123", // optional when set using setUserId
    properties: {
      name: "John Doe",
      email: "john@doe.com",
      plan: "premium",
    }
  });

  // Rest of your component
}

Tracking Events

You can also track events directly from HTML elements using data attributes:

<button
    data-event="Upgraded Plan"
    data-user-id="user-123"     // optional (optional when set using setUserId)
    data-channel="billing"      // optional (defaults to "events")
    data-icon=":moneybag:"      // optional
    data-tag-plan="Pro"         // optional
    data-tag-period="Monthly"   // optional
    data-tag-price="9.99"       // optional
>
    Upgrade to Pro
</button>

In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.

Server-side Usage with Remix

For server-side usage, you can use LogSnag from @logsnag/remix/server It behaves similarly to @logsnag/node

Use a different token for server-side usage and set its scope to private in the LogSnag dashboard.

import { LogSnag } from '@logsnag/remix/server';

// Initialize LogSnag
const logsnag = new LogSnag({
  token: '<TOKEN>',
  project: '<PROJECT_NAME>',
});

// Use it in your server-side code
// Track an event
await logsnag.track({
  channel: "payments",
  event: "New Subscription",
  user_id: "user-123",
  icon: "💰",
  notify: true,
  tags: {
    plan: "premium",
    cycle: "monthly",
    trial: false
  }
});

// Identify a user
await logsnag.identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "john@doe.com",
    plan: "premium",
  }
});

// Track an insight
await logsnag.insight.track({
  title: "User Count",
  value: "100",
  icon: "👨",
});

// Increment an insight value
await logsnag.insight.increment({
  title: "User Count",
  value: 1,
  icon: "👨",
});

API Documentation

For more information about the LogSnag API, see: docs.logsnag.com

Support

If you encounter any problems or issues, please contact us at shayan@logsnag.com

Keywords

logsnag
react
remix
remix.run
logging
analytics

FAQs

Package last updated on 11 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Access Permissions and Custom Roles

Product

Introducing Repository Access Permissions and Custom Roles

Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.

By Joe Werle  -  Jun 19, 2026