@logshq.io/react NPM

Official LogsHQ.io logger for React

The official LogsHQ.io notifier for capturing errors in React and reporting them to LogsHQ.

Installation

Using npm:

npm install @logshq.io/react

Using yarn:

yarn add @logshq.io/react

Usage

Create a Stream in the Dashboard, get your Stream and Project API KEYS, and use it like this:

// myLogger.js
const LogshqLogger = require('@logshq.io/react');

const logger = new LogshqLogger({
  project_id: 'SOME-PROJECT-ID',
  api_key: 'SOME-STREAM-KEY',
  environment: 'production', // optional
  hostname: 'auth-service', // optional
});

module.exports = logger

PS: This can work inside or outside of your Components, like Saga for example!.

Inside React Components

import React, { useState, useEffect } from 'react';
// Import the logger
import LogshqLogger from'@logshq.io/react';
import axios from 'axios';

// This could in a seperate module so it can be called inside Redux Saga or inside // any other component
const logger = new LogshqLogger({
  project_id: 'SOME-PROJECT-ID',
  api_key: 'SOME-STREAM-KEY',
  environment: process.env.NODE_ENV, // optional
  hostname: 'auth-service', // optional
});

const MyComponent = () =>{ 
  const [data, setData] = useState([]);
  
  const fetchData = async () => {
    try {
      // Calling your API endpoind
      const result = await axios(
        'https://some-domain.com/api/v1/search?query=myQuery',
      );
      // Success
      setData(result.data)
    } catch (error) {
      // Send the error and some additional details to help debugging properly
      logger.error(error, {
        component: 'MyComponent',
        someData: {
          someNestedData: 'Some Value'
        }
      })
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {
          data.map(item => (
            <li key={item.id}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))
        }
      </ul>
    </div>
  );
}

export default MyComponent;