# Setup the logger

Squide logger provides visibility into the application's bootstrapping flow and how modules behave and interact. It also offers an abstraction that allows applications to emit custom logs to multiple destinations defined by the host application.

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.

# Configure loggers

To replace the default console logging behavior, configure your own loggers during initialization:

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>
);

To keep logging to the console, first, open a terminal at the root of the host application and install the @workleap/logging package:

pnpm add @workleap/logging

Then, explicitly provide a BrowserConsoleLogger instance:

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

const runtime = initializeFirefly({
    loggers: [new MyLogger(), 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:

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>
);

# 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>
);

# Custom logs

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

For more details, refer to the use the logger essential page.

# Try it 🚀

Start the application in a development environment. Open the DevTools console, render a page, and look for log entries such as:

[squide] Found X local modules to register.
[squide] 1/X Registering local module.
[squide] Successfully registered local module.