Skip to content

Commit

Permalink
feat: Honeycomb observability (#219)
Browse files Browse the repository at this point in the history
* Initial Honeycomb integration code

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* More stuff

* Bla
  • Loading branch information
patricklafrance authored Nov 5, 2024
1 parent 9d5813d commit 25cb482
Show file tree
Hide file tree
Showing 174 changed files with 20,357 additions and 9,540 deletions.
13 changes: 13 additions & 0 deletions .changeset/pretty-plants-dress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
"@squide/firefly-webpack-configs": minor
"@squide/module-federation": minor
"@squide/webpack-configs": minor
"@squide/react-router": minor
"@squide/env-vars": minor
"@squide/firefly": minor
"@squide/i18next": minor
"@squide/core": minor
"@squide/msw": minor
---

Now dispatching events to enable instrumentation packages for observability platforms.
12 changes: 12 additions & 0 deletions .changeset/swift-foxes-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"@squide/firefly-honeycomb": major
---

New package instrumentating Squide for [Honeycomb](https://www.honeycomb.io/).

This packages includes:

- [registerHoneycombInstrumentation](https://gsoft-inc.github.io/wl-squide/reference/honeycomb/registerhoneycombinstrumentation/)
- [setGlobalSpanAttributes](https://gsoft-inc.github.io/wl-squide/reference/honeycomb/setglobalspanattributes/)

A [migration guide](https://gsoft-inc.github.io/wl-squide/upgrading/migrate-to-firefly-v9.3) is available to update a Squide application to v9.3 and use Honeycomb observability.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ jobs:
uses: actions/setup-node@v4
with:
node-version: ">=21.1.0"
check-latest: true,
check-latest: true
cache: pnpm

- name: Install dependencies
Expand Down
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ A modular web application shell built on top of [Module Federation](https://mod
| [@squide/webpack-configs](packages/webpack-configs/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/webpack-configs)](https://www.npmjs.com/package/@squide/webpack-configs) |
| [@squide/msw](packages/msw/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/msw)](https://www.npmjs.com/package/@squide/msw) |
| [@squide/i18next](packages/i18next/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/i18next)](https://www.npmjs.com/package/@squide/i18next) |
| [@squide/env-vars](packages/env-vars/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/env-vars)](https://www.npmjs.com/package/@squide/env-vars) |
| [@squide/firefly](packages/firefly/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/firefly)](https://www.npmjs.com/package/@squide/firefly) |
| [@squide/firefly-webpack-configs](packages/firefly-webpack0configs/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/firefly-webpack-configs)](https://www.npmjs.com/package/@squide/firefly-webpack-configs) |
| [@squide/firefly-webpack-configs](packages/firefly-webpack-configs/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/firefly-webpack-configs)](https://www.npmjs.com/package/@squide/firefly-webpack-configs) |
| [@squide/firefly-honeycomb](packages/firefly-honeycomb/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/firefly-honeycomb)](https://www.npmjs.com/package/@squide/firefly-honeycomb) |
| [@squide/fakes](packages/fakes/README.md) | [![npm version](https://img.shields.io/npm/v/@squide/fakes)](https://www.npmjs.com/package/@squide/fakes) |

## Have a question or found an issue?
Expand Down
28 changes: 15 additions & 13 deletions docs/getting-started/create-host.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,11 @@ export {};
### Module registration

Next, to register the modules, instanciate a shell [FireflyRuntime](/reference/runtime/runtime-class.md) instance and register the remote module with the [registerRemoteModules](/reference/registration/registerRemoteModules.md) function (the configuration of the remote module will be covered in the [next section](create-remote-module.md)):
Next, to register the modules, instanciate a shell [FireflyRuntime](/reference/runtime/runtime-class.md) instance and register the remote module with the [bootstrap](/reference/registration/bootstrap.md) function (the configuration of the remote module will be covered in the [next section](create-remote-module.md)):

```tsx !#11-13,16 host/src/bootstrap.tsx
```tsx !#11-13,16-18 host/src/bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, registerRemoteModules, type RemoteDefinition } from "@squide/firefly";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, bootstrap, type RemoteDefinition } from "@squide/firefly";
import { App } from "./App.tsx";

// Define the remote modules.
Expand All @@ -102,11 +102,13 @@ const Remotes: RemoteDefinition[] = [

// Create the shell runtime.
const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger()]
loggers: [x => new ConsoleLogger(x)]
});

// Register the remote module.
await registerRemoteModules(Remotes, runtime);
await bootstrap(runtime, {
remotes: Remotes
});

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

Expand Down Expand Up @@ -265,9 +267,9 @@ The [PublicRoutes](../reference/routing/publicRoutes.md) and [ProtectedRoutes](.

Finally, update the bootstrapping code to [register](../reference/registration/registerLocalModules.md) the newly created local module:

```tsx !#17 host/src/bootstrap.tsx
```tsx !#18 host/src/bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, registerLocalModules, registerRemoteModules, type RemoteDefinition } from "@squide/firefly";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, bootstrap, type RemoteDefinition } from "@squide/firefly";
import { App } from "./App.tsx";
import { registerHost } from "./register.tsx";

Expand All @@ -278,14 +280,14 @@ const Remotes: RemoteDefinition[] = [

// Create the shell runtime.
const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger()]
loggers: [x => new ConsoleLogger(x)]
});

// Register the newly created local module.
await registerLocalModules([registerHost], runtime);

// Register the remote module.
await registerRemoteModules(Remotes, runtime);
// Register the modules.
await bootstrap(runtime, {
localModules: [registerHost],
remotes: Remotes
});

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

Expand Down
18 changes: 9 additions & 9 deletions docs/getting-started/create-local-module.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,11 +130,11 @@ Go back to the `host` application and add a dependency to the `@getting-started/
If your project is set up as a monorepo, use `workspace:*` for the version instead of `0.0.1`.
!!!

Then, register the local module with the [registerLocalModules](/reference/registration/registerLocalModules.md) function:
Then, register the local module with the [bootstrapping](/reference/registration/bootstrapping.md) function:

```tsx !#3,21 host/src/bootstrap.tsx
```tsx !#3,19 host/src/bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, registerRemoteModules, registerLocalModules, type RemoteDefinition } from "@squide/firefly";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, bootstrap, type RemoteDefinition } from "@squide/firefly";
import { register as registerMyLocalModule } from "@getting-started/local-module";
import { App } from "./App.tsx";
import { registerHost } from "./register.tsx";
Expand All @@ -146,14 +146,14 @@ const Remotes: RemoteDefinition[] = [

// Create the shell runtime.
const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger()]
loggers: [x => new ConsoleLogger(x)]
});

// Register the remote module.
await registerRemoteModules(Remotes, runtime);

// Register the local module.
await registerLocalModules([registerHost, registerMyLocalModule], runtime);
// Register the modules.
await bootstrap(runtime, {
localModules: [registerHost, registerMyLocalModule],
remotes: Remotes
})

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

Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,6 @@ Remove the [ConsoleLogger](../reference/logging/ConsoleLogger.md) from the produ
import { ConsoleLogger, FireflyRuntime } from "@squide/firefly";

const runtime = new FireflyRuntime({
loggers: process.env.isNetlify ? [] : [new ConsoleLogger()]
loggers: process.env.isNetlify ? [] : [x => new ConsoleLogger(x)]
});
```
30 changes: 20 additions & 10 deletions docs/getting-started/learn-the-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ By default, the Runtime [mode](../reference/runtime/runtime-class.md#change-the-

## Logging

Squide includes a built-in logging feature that integrates with the [FireflyRuntime](/reference/runtime/runtime-class.md) class and the [useLogger](/reference/runtime/useLogger.md) hook.
Squide includes a built-in logging feature that integrates with the [FireflyRuntime](../reference/runtime/runtime-class.md) class and the [useLogger](../reference/runtime/useLogger.md) hook.

First, register your own custom logger by implementing the [Logger](/reference/logging/Logger.md) interface or register Squide built-in [ConsoleLogger](/reference/logging/ConsoleLogger):
First, register your own custom logger by implementing the [Logger](../reference/logging/Logger.md) interface or register Squide built-in [ConsoleLogger](../reference/logging/ConsoleLogger):

```ts host/src/bootstrap.tsx
import { FireflyRuntime, ConsoleLogger, type LogLevel } from "@squide/firefly";

const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger(LogLevel.debug)]
loggers: [x => new ConsoleLogger(x, LogLevel.debug)]
});
```

Then, log entries from any parts of your modular application with the `useLogger` hook:
Then, log entries from any parts of your modular application with the [useLogger](../reference/runtime/useLogger.md) hook:

```ts
import { useLogger } from "@squide/firefly";
Expand All @@ -44,13 +44,23 @@ const logger = useLogger();
logger.debug("Hello", { world: "!" });
```

The logger is also available from the [FireflyRuntime](/reference/runtime/runtime-class.md#use-the-logger) instance.
Or the [useLoggers](../reference/runtime/useLoggers.md) hook to target specific logger instances:

```ts
import { useLoggers, ConsoleLogger } from "@squide/firefly";

const logger = useLoggers([ConsoleLogger.name]);

logger.debug("Hello", { world: "!" });
```

The logger is also available from the [FireflyRuntime](../reference/runtime/runtime-class.md#log-a-message) instance.

## Messaging

It's crucial that the parts of a modular application remains loosely coupled. To help with that, Squide offers a built-in [Event Bus](/reference/messaging/EventBus.md).
It's crucial that the parts of a modular application remains loosely coupled. To help with that, Squide offers a built-in [Event Bus](../reference/messaging/EventBus.md).

First, listen to an event with the [useEventBusListener](/reference/messaging/useEventBusListener.md) hook:
First, listen to an event with the [useEventBusListener](../reference/messaging/useEventBusListener.md) hook:

```ts
import { useCallback } from "react";
Expand All @@ -63,7 +73,7 @@ const handleFoo = useCallback((data, context) => {
useEventBusListener("foo", handleFoo);
```

Then, dispatch an event from anywhere with the [useEventBusDispatcher](/reference/messaging/useEventBusDispatcher.md) hook:
Then, dispatch an event from anywhere with the [useEventBusDispatcher](../reference/messaging/useEventBusDispatcher.md) hook:

```ts
import { useEventDispatcher } from "@squide/firefly";
Expand All @@ -75,7 +85,7 @@ dispatch("foo", "bar");

You can use the event bus to enable various communication scenarios, such as notifying components of state changes, broadcasting messages across modules, or triggering actions based on specific events.

The event bus is also available from the [FireflyRuntime](/reference/runtime/runtime-class.md#use-the-event-bus) instance.
The event bus is also available from the [FireflyRuntime](../reference/runtime/runtime-class.md#use-the-event-bus) instance.

## Plugins

Expand All @@ -101,7 +111,7 @@ import { MyPlugin } from "@sample/my-plugin";
const myPlugin = usePlugin(MyPlugin.name) as MyPlugin;
```

A plugin can also be retrieved from the [FireflyRuntime](/reference/runtime/runtime-class.md#retrieve-a-plugin) instance.
A plugin can also be retrieved from the [FireflyRuntime](../reference/runtime/runtime-class.md#retrieve-a-plugin) instance.

> By default, the `FireflyRuntime` registers Squide's [MSW plugin](../guides/setup-msw.md). An optional [i18next plugin](../guides/setup-i18next.md) is available.
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/add-a-shared-dependency.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 760
order: 740
---

# Add a shared dependency
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ expanded: true
- [Use feature flags](./use-feature-flags.md)
- [Use environment variables](./use-environment-variables.md)
- [Setup i18next](./setup-i18next.md)
- [Setup Honeycomb](./setup-honeycomb.md)
- [Develop a module in isolation](./develop-a-module-in-isolation.md)
- [Override a React context](./override-a-react-context.md)
- [Add a shared dependency](./add-a-shared-dependency.md)
- [Implement a custom logger](./implement-a-custom-logger.md)
- [Migrate to firefly v9](./migrate-to-firefly-v9.md)
35 changes: 19 additions & 16 deletions docs/guides/develop-a-module-in-isolation.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 800
order: 780
---

# Develop a module in isolation
Expand Down Expand Up @@ -136,9 +136,9 @@ export function App() {

And finally include the `registerShell` function to setup the `RootLayout` and `RootErrorBoundary` components as well as any other shell assets:

```tsx !#16 host/src/bootstrap.tsx
```tsx !#17 host/src/bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, registerRemoteModules, type RemoteDefinition } from "@squide/firefly";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, bootstrap, type RemoteDefinition } from "@squide/firefly";
import { App } from "./App.tsx";
import { registerHost } from "./register.tsx";
import { registerShell } from "@sample/shell";
Expand All @@ -148,13 +148,14 @@ const Remotes: RemoteDefinition[] = [
];

const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger()]
loggers: [x => new ConsoleLogger(x)]
});

// Register the newly created shell module.
await registerLocalModules([registerShell, registerHost], runtime);

await registerRemoteModules(Remotes, runtime);
await bootstrap(runtime, {
// Register the newly created shell module.
localModules: [registerShell, registerHost],
remotes: Remotes
});

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

Expand Down Expand Up @@ -199,25 +200,27 @@ remote-module

### index.tsx

The `index.tsx` file is similar to the `bootstrap.tsx` file of an host application but, tailored for an isolated module. The key distinctions are that the module is registered with the [registerLocalModules](/reference/registration/registerLocalModules.md) function instead of the [registerRemoteModules](/reference/registration/registerRemoteModules.md) function, and a new `registerDev` function is introduced to register the development homepage (which will be covered in an upcoming section):
The `index.tsx` file is similar to the `bootstrap.tsx` file of an host application but, tailored for an isolated module. The key distinctions are that all the modules are registered as local modules, and a new `registerDev` function is introduced to register the development homepage (which will be covered in an upcoming section):

```tsx !#10-12,16 remote-module/src/index.tsx
```tsx !#10-12,17 remote-module/src/index.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, registerLocalModules } from "@squide/firefly";
import { ConsoleLogger, RuntimeContext, FireflyRuntime, bootstrap } from "@squide/firefly";
import { App } from "./App.tsx";
import { register as registerModule } from "./register.tsx";
import { registerDev } from "./dev/register.tsx";
import { registerShell } from "@sample/shell";

// Services, loggers, etc... could be reuse through a
// Loggers, etc... could be reuse through a
// shared packages or faked when in isolation.
const runtime = new FireflyRuntime({
loggers: [new ConsoleLogger()]
loggers: [x => new ConsoleLogger(x)]
});

// Registering the remote module as a static module because the "register" function
// is local when developing in isolation.
await registerLocalModules([registerModule, registerDev, registerShell], runtime);
await bootstrap(runtime, {
// Registering the remote module as a local module because the "register" function
// is local when developing in isolation.
localModules: [registerModule, registerDev, registerShell]
});

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

Expand Down
14 changes: 7 additions & 7 deletions docs/guides/implement-a-custom-logger.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 740
order: 720
---

# Implement a custom logger
Expand All @@ -11,12 +11,14 @@ Many applications must integrate with specific remote logging solutions such as
First, let's define a custom logger:

```ts host/src/customerLogger.ts
import { LogLevel, type Logger } from "@squide/firefly";
import { Logger, type LogLevel, type Runtime } from "@squide/firefly";

export class CustomLogger implements Logger {
readonly #logLevel: LogLevel;
readonly #logLovel: LogLevel

constructor(runtime: Runtime, logLevel: LogLevel = LogLevel.debug) {
super(CustomLogger.name, logLevel);

constructor(logLevel: LogLevel = LogLevel.debug) {
this.#logLevel = logLevel;
}

Expand Down Expand Up @@ -69,9 +71,7 @@ import { FireflyRuntime } from "@squide/firefly";
import { CustomLogger } from "./customLogger.ts";

const runtime = new FireflyRuntime({
loggers: [
new CustomLogger()
],
loggers: [x => new CustomLogger(x)],
});
```

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/override-a-react-context.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 780
order: 760
---

# Override a React context
Expand Down
Loading

0 comments on commit 25cb482

Please sign in to comment.