React

ByteHide Logger works in React applications for client-side logging, user interaction tracking, and error boundary integration.

Installation

npm install @bytehide/logger react

Basic Setup

import React, { useEffect } from 'react';
import { Log } from '@bytehide/logger';

function App() {
    useEffect(() => {
        Log.configure({
            projectToken: process.env.REACT_APP_BYTEHIDE_TOKEN,
            logLevel: 'info'
        });
        
        Log.info('React app initialized');
    }, []);

    return <div>My React App</div>;
}

Component Logging

function UserProfile({ userId }) {
    useEffect(() => {
        Log.info('UserProfile component mounted', {
            context: { userId }
        });
        
        return () => {
            Log.info('UserProfile component unmounted', {
                context: { userId }
            });
        };
    }, [userId]);
    
    const handleClick = () => {
        Log.info('Profile button clicked', {
            context: { userId, action: 'view-profile' }
        });
    };

    return (
        <button onClick={handleClick}>
            View Profile
        </button>
    );
}

Error Boundary

class ErrorBoundary extends React.Component {
    componentDidCatch(error, errorInfo) {
        Log.error('React error boundary caught error', {
            context: { 
                componentStack: errorInfo.componentStack 
            }
        }, error);
    }

    render() {
        if (this.state?.hasError) {
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

Custom Hook

import { useEffect } from 'react';
import { Log } from '@bytehide/logger';

function useLogger(componentName) {
    useEffect(() => {
        Log.info(`${componentName} mounted`);
        
        return () => {
            Log.info(`${componentName} unmounted`);
        };
    }, [componentName]);
    
    const logAction = (action, context = {}) => {
        Log.info(`${componentName} action: ${action}`, {
            context: { component: componentName, ...context }
        });
    };
    
    return { logAction };
}

// Usage
function MyComponent() {
    const { logAction } = useLogger('MyComponent');
    
    const handleSubmit = () => {
        logAction('form-submit', { formId: 'contact-form' });
    };
    
    return <form onSubmit={handleSubmit}>...</form>;
}

User Identification

function AuthProvider({ children }) {
    const login = async (credentials) => {
        try {
            const user = await authenticate(credentials);
            
            // Identify user for logging
            Log.identify(user.id, user.email);
            
            Log.info('User logged in successfully', {
                context: { userId: user.id }
            });
            
        } catch (error) {
            Log.error('Login failed', {
                context: { email: credentials.email }
            }, error);
        }
    };
    
    return <AuthContext.Provider value={{ login }}>{children}</AuthContext.Provider>;
}

Best Practices