app-tracking-npm-package

v1.0.8

Published

a year ago

Track and visualize Next.js components, props, and state for the SPS Canvas tool

0High
0Medium
0Low

linguist89

react nextjs visualization components debugging

Next.js Component Tracker

A lightweight library that enables tracking React component state, props, and render behavior in Next.js applications for visualization in the SPS Canvas tool.

Installation

npm install --save app-tracking-npm-package
# or
yarn add app-tracking-npm-package

Usage

1. Initialize the tracker in your app

For App Router (Next.js 13+)

Add the tracker to your root layout:

// app/layout.js
'use client';

import { initTracker } from 'app-tracking-npm-package';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      initTracker();
    }
  }, []);

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

For Pages Router

Add the tracker to your _app.js file:

// pages/_app.js
import { initTracker } from 'app-tracking-npm-package';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      initTracker();
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

2. Track components (Optional)

You can enhance your components with tracking capabilities using the withTracking HOC:

import { withTracking } from 'app-tracking-npm-package';

function Button({ onClick, children }) {
  return (
    <button 
      onClick={onClick}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      {children}
    </button>
  );
}

// Export with tracking - second parameter is the component name for the canvas
export default withTracking(Button, 'Button');

3. Track component state

Use the useTrackedState hook to automatically track state changes:

import { useTrackedState } from 'app-tracking-npm-package';

function Counter() {
  // Works just like useState but reports state changes to the Canvas
  const [count, setCount] = useTrackedState(0, 'Counter');
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Connecting to the Canvas

Run your Next.js app locally (e.g., npm run dev)
Open the SPS Canvas tool
Enter your local app URL (typically http://localhost:3000)
Click "Connect"

The Canvas will automatically:

Detect your components
Visualize the component hierarchy
Show real-time props and state changes
Track component relationships

API Reference

`initTracker()`

Initializes the tracker and connects to the Canvas tool when available.

`withTracking(Component, displayName)`

Higher-Order Component that wraps your React component to track renders and props.

Component: The React component to track
displayName: (Optional) Name to display in the Canvas (defaults to component name)

`useTrackedState(initialState, componentName)`

A drop-in replacement for React's useState that tracks state changes.

initialState: Initial state value (same as useState)
componentName: Name of the component using this state

`trackComponent(componentName, props, state)`

Low-level function to manually track component data.

componentName: Name of the component to track
props: Component props object
state: Component state object

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme