Add More Metadata to Your Front-end JavaScript Errors in AppSignal

Tom Tom de Bruijn on

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:

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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:

5 favorite Javascript articles

10 latest Javascript articles

Go back
Javascript sorcery icon

Subscribe to

JavaScript Sorcery

A true sorcerer combines ancient wisdom and new discoveries. We'll provide you with both. Sign up for our JavaScript Sorcery email series and receive deep insights about JavaScript, error tracking and other developments.

We'd like to set cookies, read why.