AppSignal now supports Remix!

With insights into the performance of Remix components like loaders and routing, AppSignal helps you refine your Remix application.

This blog post will show you how to start monitoring your Remix application using AppSignal.

Getting Started

To get started with Remix monitoring, you need an AppSignal account. If you don't have one, don't worry - we've got a generous trial period to help you get started.

After creating an AppSignal account, install version 3.0.18 or higher of AppSignal's Node.js package.

Once you've got your application up and running with AppSignal, you'll need to install the opentelemetry-instrumentation-remix package.

After installing opentelemetry-instrumentation-remix, activate the instrumentation by adding it to the AppSignal client configuration with the additionalInstrumentations option:

additionalInstrumentations: [new RemixInstrumentation()];

Then we advise disabling the Express instrumentation to avoid any confusion between Express and Remix spans:

disableInstrumentations: ["@opentelemetry/instrumentation-express"];

Once you've followed these steps, your configuration file should look something like this:

// appsignal.cjs
const { Appsignal } = require("@appsignal/nodejs");
const { RemixInstrumentation } = require("opentelemetry-instrumentation-remix");
 
new Appsignal({
  active: true,
  name: "<YOUR APPLICATION NAME>",
  pushApiKey: "<YOUR API KEY>", // Note: renamed from `apiKey` in version 2.2.5
  additionalInstrumentations: [new RemixInstrumentation()],
  disableInstrumentations: ["@opentelemetry/instrumentation-express"], // Disable Express
});

Finally, ensure that the AppSignal configuration is required when your application runs. You can do this using the NODE_OPTIONS environment variable and the require flag:

NODE_OPTIONS='--require ./appsignal.cjs' remix dev

Remix in Action

Once you've installed Remix, AppSignal will receive metric data from your Remix components. AppSignal will then translate this data into handy performance insights.

In this article, we'll explore the insights AppSignal provides into Remix errors and Splat route responses.

Errors

In this example, we've created a root called NoMoreStroopwaffles.

The root throws an error from the data loader. This will cause the route to return a 500 error with the error message: We're all out of stroopwaffles today!

// app/routes/no-more-stroopwaffles.tsx
import { useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";
import assert from "assert";
 
export const loader = () => {
  // This'll throw an error
  assert(false)
 
  return json({
    error: "We're all out of stroopwaffles today!"
  });
}
 
export default function NoMoreStroopwaffles() {
  const data = useLoaderData<typeof loader>();
 
  return (
    <div>
      {data. error}
    </div>
  )

When this error is raised, AppSignal will automatically record it, allowing you to investigate where, when, and why the error occurred. AppSignal's Error detection helps you keep your application stable by pinpointing where in your code exceptions occur.

Our Error detection feature also allows you to:

• View samples of other occurrences of the same error.
• Assign the error to a teammate.
• Record important information in the logbook for colleagues or your future self.

Splat Route Responses

For this example, we've created a splat route called hello.$name.

This route takes the second part of the URL and returns it in the response body as a greeting:

// app/routes/hello.$name.tsx
import { Await, useLoaderData } from "@remix-run/react";
import { json, LoaderArgs } from "@remix-run/node";
 
export const loader = async ({ params }: LoaderArgs) => {
  return json({
    greeting: `Hello ${params.name ?? "world"}!`
  })
}
export default function Slow() {
  const data = useLoaderData<typeof loader>();
  return (
    <div>
      <Await resolve={data}>
        {({greeting}) => <p>{greeting}</p>}
      </Await>
    </div>
  );
}

If we request GET /hello/waffel not only will we see Hello waffel! as the response, but AppSignal will record the roots performance.

AppSignal's insights allow us to see how the route performs and provide insights into how the root has been performing historically.

Another handy feature is AppSignal's Time Detective.

Time Detective offers a glimpse into your application's state at the time of the request, providing immediate visibility into overall performance. With Time Detective, you can pinpoint the underlying causes of issues before they affect your users.

Get A Taste of AppSignal

These are just some of the ways AppSignal helps you get the most out of your Remix applications. With features like Error reporting, Performance Monitoring, Host Monitoring, and Logging, AppSignal has all the tools you need to level up your Remix application's performance.

We also love sending Stroopwaffles to new trial users, so be sure to drop us a line once you've got your Remix application pushing data to AppSignal!