META-INF Forge Logger - Resolver

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

Installation

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

Usage

Define the resolver in order to use the React logger

import Resolver from '@forge/resolver';
import {defineLogResolver} from '@meta-inf/forge-logger-resolver';

const resolver = new Resolver();

defineLogResolver(resolver); // <--- Add this line

export const handler = resolver.getDefinitions();

Use logger functions inside your backend resolvers

import {createLogLocation} from "@meta-inf/forge-logger-resolver";

const {log, logError, logWarn, logInfo, logDebug} = createLogLocation('my-log-location');

New, more convenient way to log messages

There is a more convenient way to log messages. You can initialize the Logger class statically, which will add a click event listener to the document. When you click on an element, the logger will log the element's location in the DOM, if it has a data-location (or the provided) data attribute.

In your entry file (index.tsx or main.tsx), initialize the Logger class statically.

Logger.init();
// or
Logger.init({
    dataFields: ["location", "test-id"] // default is ["location"]
})

Example: when a user clicks on a button that has a data-location attribute with the value my-button, the logger will log my-button as location with a 'Clicked' event.

However, if you have onClick listeners on the button, the events won't propagate to the document, and the logger won't log the location. In this case, you can use the withClickTracking wrapper function, which will log the event accordingly, and then call the original function.

There is also a withChangeTracking function, which logs the event when the input value changes.

import {withClickTracking, withChangeTracking} from "@meta-inf/forge-logger-react";
<button
    data-location="modal-trigger"
    onClick={withClickTracking(openModal)}>
    Open modal
</button>

Configuration

The logger can be configured by passing a configuration object to the defineLogResolver function.

import {defineLogResolver} from "@meta-inf/forge-logger-resolver";

defineLogResolver(resolver, {
    functionKey: 'my-log-key', // The function key to use in the resolver, defaults to '@forge-logger-send-log'
});