Our front-end JavaScript library has been updated with an easier way to add more metadata to front-end errors using the sendError and wrap helpers.

Previously, sendError and wrap helpers only supported customizing tags and the namespace for the error. More information could be set on error spans if they were manually created, but now that type of information can be added to errors sent using these helpers.

The Metadata for Front-end JavaScript Errors

This new version makes it easier to:

• Add tags
  • Set tags with details about the environment to track which user or config options caused the error to occur.
• Add request parameters
  • See which combination of request parameters caused the error to occur.
• Customize the namespace
  • The default namespace is frontend. Customize the namespace per error for different parts of the app.
• Customize the action name
  • Track where the error originates from and group these errors together on AppSignal.com.

The Callback Function for Front-end JavaScript Errors

A callback argument has been added to the sendError and wrap helper functions to allow for more customization of sent errors - see the examples below.

The tags and namespace parameters are now deprecated for both helpers and we recommend upgrading to the callback function argument instead. Check the web console for deprecation warnings after upgrading to see if an app uses the now deprecated methods.

// Deprecated sendError behavior
appsignal.sendError(
  new Error("sendError with tags and namespace argument"),
  { tag1: "value 1", tag2: "value 2" },
  "custom_namespace"
);
 
// New sendError behavior
appsignal.sendError(
  new Error("sendError with callback argument"),
  function (span) {
    span.setAction("SendErrorTestAction");
    span.setNamespace("custom_namespace");
    span.setTags({ tag1: "value 1", tag2: "value 2" });
  }
);

The new callback function provides the span (created for the error given to sendError) as an argument before it's sent to the AppSignal API. Use this span to customize metadata, the same way as when the span is manually created.

// Deprecated wrap behavior
appsignal.wrap(
  function () {
    throw new Error("wrap with tags and namespace argument");
  },
  { tag1: "value 1", tag2: "value 2" },
  "custom_namespace"
);
 
// New wrap behavior
appsignal.wrap(
  function () {
    throw new Error("wrap with callback argument");
  },
  function (span) {
    span.setAction("WrapErrorTestAction");
    span.setNamespace("custom_namespace");
    span.setTags({ tag1: "value 1", tag2: "value 2" });
  }
);

See our docs for more information on how to use sendError and wrap helper functions, and for an overview of what span functions are available.

Track Your Front-end Errors with a Stroopwaffle by Your Side 🍪

If you haven’t yet tried AppSignal for monitoring your apps, take five minutes and check it out. Here’s what you need to know:

• Front-end 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.