Spike: Evaluating LogSnag for Event Monitoring in Web Applications

[colburncodes]

Log Snag - Realtime monitoring

As a developer, I want to investigate and assess the capabilities of LogSnag for monitoring events in the app. So that I can determine if it meets our requirements for real-time event tracking and is suitable for integration in the development workflow.

Goals of the Spike:

1. Understanding LogSnag's Features:

• explore key functionalities of LogSnag focusing on its ability to monitor events in various types of applications.
• identify real-time tracking capabilities and how it provides insights into application performance and user interactions.

2. Ease of Integration:

• evaluate integration process of LogSnag with existing application.
• identify any technical challenges or limitations during the integration.

3. Reporting and Documentation

• review reporting capabilities of LogSnag, including customization options and generated reports.
• explore documentation and support resources provided by LogSnag for troubleshooting and usage.

Outcome of the Spike:

Outline the findings and recommendations regarding the adoption of LogSnag for event monitoring, including identified pros and cons, and potential integration strategies.

[colburncodes]

https://docs.logsnag.com/sdks/next

[colburncodes]

Once you set up your account and define the project.

Next, create two tokens SERVER_SIDE_TOKENand CLIENT_SIDE_TOKEN

Pages Directory:

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <LogSnagProvider token='<TOKEN_NAME>' project='<PROJECT_NAME>'>
      {/* Your app content */}
      <Component {...pageProps} />
    </LogSnagProvider>
  );
}

Server-side Usage with Next

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

// Initialize LogSnagServer
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: "👨",
});