Monitor Your Node.js and Remix Application with AppSignal

Luismi Ramírez — Tue, 31 Oct 2023 12:01:47 +0000

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!

Improved Error Tracking for Node.js in AppSignal

Luismi Ramírez — Wed, 20 Oct 2021 11:31:45 +0000

Good news for Node.js developers using AppSignal: a new version of our Node.js library is available on npm with improved error tracking.

We've added two new helpers to make your life easier as a Node.js developer. One helper allows you to track errors whenever you need to, no matter how many nested spans you have in your current context. The other lets you send an isolated error with no spans or context involved (for more information about spans, check out our docs). Please keep reading to see some usage examples!

Using `tracer.setError(error)` to Set Errors on Traces in Node.js

If you are a user of AppSignal's Node.js library, you are probably familiar with the now deprecated helper span.addError(error). This helper allowed you to link an error to any span object. The main issue with this was that if the span calling the function was not a RootSpan, it was ignored. This made error tracking in complex nested contexts a problematic task.

Using the new tracer.setError(error) function will make everything easier and safer. If you want to send an error related to the current trace, you don't have to search for the root span; the tracer object is always there to receive the error and set it on the current root span.

Example:

const tracer = appsignal.tracer();

tracer.withSpan(tracer.currentSpan(),  (span) => {
  try {
    throw new Error("Oh no!");
  } catch (err) {
    tracer.setError(err);
  }
});

Send Isolated Node.js Errors with `tracer.sendError(error, fn())`

This new helper is really useful for instrumentation that doesn't automatically create AppSignal traces to profile, which means anything outside of a web or database context.

The function receives an error object and an optional callback function to set custom metadata as arguments if needed.

Example with metadata:

const tracer = appsignal.tracer();

try {
  throw new Error("Oh no!");
} catch (err) {
  tracer.sendError(err, span => {
    span.setName("daily.task"); // Set a recognizable action name
    span.set("user_id", user_id); // Set custom tags
  });
}

Example without metadata (note: this error is grouped in the same incident as errors of the same type without an action name):

const tracer = appsignal.tracer();

try {
  throw new Error("Oh no!")
} catch (err) {
  tracer.sendError(err);
}

Track Your Node.js Errors with a Stroopwaffle by Your Side 🍪

If you haven't yet tried AppSignal for monitoring your Node.js apps, [take five minutes and check it out (https://www.appsignal.com/nodejs).

Here's what you need to know:

Error monitoring is included alongside all of our features.
We have a free trial option that doesn’t require a credit card.
AppSignal supports Node.js, Ruby, and Elixir projects.
We’re free for open source & for good projects.
We ship stroopwafels to our trial users on request.

DEV Community: Luismi Ramírez