Reid Burke

Jeremy Morrell:

Developers tend to treat tracing as deep magic, and OpenTelemetry is no exception. OpenTelemetry may be even more mysterious given how many concepts you are exposed to even with beginning examples.

It also doesn’t help that as part of building a mature, battle-tested tracing library, the code itself tends to become more and more cryptic over time, contorting itself to avoid edge-cases, work across many environments, and optimize code paths to avoid impacting performance of its host applications. Auto-instrumentation is particularly prone to inscrutibility as it seeks to auto-magically wrap code that may never have been intended to be wrapped or extended.

It’s no wonder then that most developers approach tracing libraries as unknowable black boxes. We add them to our applications, cross our fingers, and hope they give us useful information when the pager goes off at 2am.

They are likely a lot simpler than you expect! Once you peel back the layers, I find a useful mental model of tracing looks like “fancy logging” combined with “context propagation” a.k.a “passing some IDs around”.

Lots of useful tool mentions like otel-tui which is new to me. And for more fancy context, consider async-provider.

SVG icons with nested <g> may be corrupted when displayed in WordPress. This is a 4+ year old bug. The simple workaround is to uncheck “WordPress should correct invalidly nested XHTML automatically” in Settings > Writing.

In addition to pnpm supporting minimumReleaseAge in pnpm 10.16, Yarn has introduced a similar feature with npmMinimalAgeGate. There are some minor differences which mostly effect npmMinimumReleaseAgeExclude. This option is similar to pnpm’s minimumReleaseAgeExclude but also supports an exact match on package locators like @react-router/[email protected] or semver and micromatch globs like @react-router/node@^7.9.1, @react-router/node@npm:^7.9.1, @react-router/node@*, or @react-router/*.

Zoltan Kochan, following a wave of incidents where common npm packages including debug were compromised with a phishing attack last week and nx was compromised with a credential catcher a few weeks ago:

There have been several incidents recently where popular packages were successfully attacked. To reduce the risk of installing a compromised version, we are introducing a new setting that delays the installation of newly released dependencies. In most cases, such attacks are discovered quickly and the malicious versions are removed from the registry within an hour.

The new setting is called minimumReleaseAge. It specifies the number of minutes that must pass after a version is published before pnpm will install it. For example, setting minimumReleaseAge: 1440 ensures that only packages released at least one day ago can be installed.

Matt Brophy:

We landed our initial unstable implementation of middleware behind a future flag in 7.3.0. Since then, we’ve been iterating on the API/implementation and working closely with community members who adopted the unstable flag for alpha testing. We received a ton of valuable feedback from those folks that helped us move the API to an even better spot in the end.

We’re excited to finally stabilize these APIs in 7.9.0 behind the future.v8_middleware flag and can’t wait to see the interesting patterns folks come up with when using them. There are already a handful of useful middlewares available in remix-utils that are worth checking out!

Providing data from a parent to a child:

// app/root.tsx
const context = createContext<User>();

const userMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  context.set(userContext, user); // 👈 Provide data here
};

export const middleware = [userMiddleware];

export async function loader({ context }) {
  return { user: context.get(userContext) }; // 👈 Access data here
}

// app/routes/_index.tsx
export async function loader({ request }) {
  let user = context.get(userContext); // 👈 Access data here
  // ...
}

// app/root.tsx
const context = createContext<User>();

const userMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  context.set(userContext, user); // 👈 Provide data here
};

export const middleware = [userMiddleware];

export async function loader({ context }) {
  return { user: context.get(userContext) }; // 👈 Access data here
}

// app/routes/_index.tsx
export async function loader({ request }) {
  let user = context.get(userContext); // 👈 Access data here
  // ...
}

Short-circuiting child loaders with a redirect:

// app/routes/_auth.tsx
const requireUserMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  if (!user) {
    throw redirect("/login");
  }
  // ...
};

export const middleware = [requireUserMiddleware];

// app/routes/_auth.profile.tsx
export async function loader({ request }) {
  // ✅ This code will never run if there's no logged-in user
  let data = await getUserData(request);
  return data;
}

// app/routes/_auth.tsx
const requireUserMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  if (!user) {
    throw redirect("/login");
  }
  // ...
};

export const middleware = [requireUserMiddleware];

// app/routes/_auth.profile.tsx
export async function loader({ request }) {
  // ✅ This code will never run if there's no logged-in user
  let data = await getUserData(request);
  return data;
}