npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fiberplane/hono

v0.3.0

Published

Hono middleware to forward data to a local instance of @fiberplane/studio

Downloads

27

Readme

FPX Hono Middleware

This is a client library that will send telemetry data to a local FPX server upon every incoming request and outgoing response.

Note that it also monkey-patches console.* functions to send events to a local FPX server, so any time you use a console.log, console.error, etc., in your app, it will send that data to FPX.

Quick Start

Create Hono project

# Create a hono project, using cloudflare-workers runtime
npm create hono@latest my-hono-project
# > cloudflare-workers

Install middleware

npm i @fiberplane/hono

Add middleware to your project

import { Hono } from "hono";
import { createHonoMiddleware } from "@fiberplane/hono";

const app = new Hono();

app.use(createHonoMiddleware(app))

app.get("/", (c) => {
  return c.text("Hello Hono!");
});

export default app;

Launch the FPX Studio UI

npx @fiberplane/studio

Visit http://localhost:8788 to see your logs come in as you test your app!

Usage

This section takes you through:

  • Creating a Hono Project
  • Installing the FPX Hono Middleware
  • Configuring your project to use FPX
  • Launching the FPX UI locally

Create a Hono project

Create a new Hono project with the following command. When prompted, choose cloudflare-workers as the template.

npm create hono@latest my-hono-project
# > cloudflare-workers

Install the FPX Hono Middleware

npm i @fiberplane/hono

Add middleware

Add the @fiberplane/hono import, and then add middleware definitions AT THE TOP OF YOUR APP, ideally in your src/index.ts

If you only just started your project, you can copy paste the entire contents below into your src/index.ts:

import { Hono } from "hono";
import { createHonoMiddleware } from "@fiberplane/hono";

const app = new Hono();

const fpxConfig = {
  libraryDebugMode: false, // By default, do not print noisy debug logs
  monitor: {
    // This example would turn off auto-logging of fetch requests to FPX
    fetch: false,
    // This example keeps the default behavior of logging all requests to FPX
    requests: true,
  },
}

app.use(createHonoMiddleware(app, fpxConfig))
app.get("/", (c) => {
  return c.text("Hello Hono!");
});

export default app;

Launch the FPX UI

You only need one command:

npx @fiberplane/studio

When you first run npx @fiberplane/studio, you'll be taken through a few initalization steps.

Visit the link to studio that's printed in your UI, and that's it! You should see your logs in the FPX UI.

Your configuration will be saved for the future.

If you ever want to change your configuration, you can do so by running npx @fiberplane/studio again, with the appropriate environment variables set:

# Launch the FPX Studio UI on a different port
FPX_PORT=8789 npx @fiberplane/studio

# Point the FPX Studio UI to your service, in order to autodetect its routes
FPX_SERVICE_TARGET=http://localhost:1234 npx @fiberplane/studio

The FPX_ENDPOINT environment variable

The FPX_ENDPOINT environment variable controls where the FPX client library sends telemetry data.

If it is not defined, the middleware will do nothing. This means you can safely deploy your Hono app to any cloud environment, and by default, it will not send telemetry data.

The cli should help you initialize your project correctly, but if you want to connect your api to FPX Studio manually, you can add or modify this variable with, e.g., FPX_ENDPOINT=http://localhost:8788/v0/logs in your environment variable file.

echo -e '\nFPX_ENDPOINT=http://localhost:8788/v0/logs\n' >> .dev.vars

Local Development

See DEVELOPMENT.md for instructions on how to develop this library.