META-INF Forge Logger - React

This package contains the React part of the Forge Logger, which is a simple yet powerful logger for Atlassian Forge apps.

Installation

yarn add @meta-inf/forge-logger-react

Usage

Using React Context

Create a log location and wrap your component with it.

import { LogLocation } from '@meta-inf/forge-logger-react';  

function App() {
  return (
    <LogLocation location="MyComponent">
        <MyComponent />
    </LogLocation>
  );
};

Use the useLogger hook to get the logger instance.

import { useLogger } from '@meta-inf/forge-logger-react';
//...
function MyComponent() {
  const {logInfo} = useLogger(); // Or logDebug, logWarn, logError
  const handleClick = () => {
      logInfo('Button clicked');
  };
  //...
}

Using createLogLocation in a component

Use the useRef hook to create a logger instance only once.

import {createLogLocation} from '@meta-inf/forge-logger-react';
import {useRef} from "react";

function MyComponent() {
  const myLogger = useRef(createLogLocation('MyComponent'));
  const handleClick = () => {
      myLogger.current.logInfo('Button clicked');  // Or logDebug, logWarn, logError
  };
  //...
}

You can omit useRefs if you are not using the logger in a component.

Testing & Debug mode

You should mock out the library during testing to avoid calling or importing the Forge bridge.