# Setup loggers

By default, when running in development mode, a BrowserConsoleLogger is automatically added if no custom loggers are provided through the loggers option of the initializeFirefly function.

# Use a custom logger

To override this behavior, provide your own loggers array during initialization:

host/src/index.tsx
import { createRoot } from "react-dom/client";
import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { MyLogger } from "./MyLogger.tsx";
import { App } from "./App.tsx";

const runtime = initializeFirefly({
    loggers: [new MyLogger()]
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

# Enable console logging in production

To log to the browser console when Squide is running in production mode, first, open a terminal at the root of the host application and install the @workleap/logging package:

pnpm add @workleap/logging

Then, provide an instance of BrowserConsoleLogger at initialization:

host/src/index.tsx
import { createRoot } from "react-dom/client";
import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { BrowserConsoleLogger } from "@workleap/logging";
import { App } from "./App.tsx";

const runtime = initializeFirefly({
    mode: "production",
    loggers: [new BrowserConsoleLogger()]
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

# Capture logs in LogRocket

To capture logs in LogRocket session replays, first, open a terminal at the root of the host application and install the @workleap/logrocket package:

pnpm add @workleap/logrocket

Then, provide an instance of LogRocketLogger at initialization:

host/src/index.tsx
import { createRoot } from "react-dom/client";
import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { LogRocketLogger } from "@workleap/logrocket";
import { App } from "./App.tsx";

const runtime = initializeFirefly({
    loggers: [new LogRocketLogger()]
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

# Use multiple loggers

Multiple loggers can be provided at initialization:

host/src/index.tsx
import { createRoot } from "react-dom/client";
import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { BrowserConsoleLogger } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/logrocket";
import { App } from "./App.tsx";

const runtime = initializeFirefly({
    loggers: [new BrowserConsoleLogger(), new LogRocketLogger()]
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

# Custom logs

Once loggers are configured, the application can output custom log entries using either the useLogger hook or the FireflyRuntime instance:

import { useLogger } from "@squide/firefly";

const logger = useLogger();

logger.debug("Hello!");
import { useRuntime } from "@squide/firefly";

const runtime = useRuntime();

runtime.logger.debug("Hello!");