> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend error catching

To report an error to AppSignal, catch the error and pass it to the `sendError` helper function.

If you're using TypeScript, to use the `sendError` helper function, the argument must be an instance of `Error` or `ErrorEvent`. That's because in TypeScript, caught variables are of type `unknown` by default in strict mode since version 4.4.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    // do something that might throw an error
  } catch (error) {
    if (error instanceof Error || error instanceof ErrorEvent) {
      appsignal.sendError(error)
      // handle the error
    }
  }

  // You can catch errors asynchronously by listening to Promises...
  asyncActionThatReturnsAPromise().catch(error => appsignal.sendError(error))

  // ...or by using async/await
  async function() {
    try {
      const result = await asyncActionThatReturnsAPromise()
    } catch (error) {
      if (error instanceof Error || error instanceof ErrorEvent) {
        appsignal.sendError(error)
        // handle the error
      }

    }
  }

  // ...or in an event handler or callback function
  events.on("event", (err) => { appsignal.sendError(err) })
  ```
</CodeGroup>

## Adding metadata to errors

To add additional metadata to errors sent with `sendError`, use the callback function argument. This callback receives the current Span for the error as an argument and allows it to be modified before being sent to the AppSignal servers.

See the [Span API page][span api] for more information about all the data that can be set on a Span.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    // do something that might throw an error
  } catch (error) {
    appsignal.sendError(error, (span) => {
      span.setAction("MyCustomAction");
      span.setNamespace("custom_namespace");
      span.setTags({ tag1: "value 1", tag2: "value 2" });
    });
    // handle the error
  }
  ```
</CodeGroup>

## Uncaught exceptions

Uncaught exceptions are **not** captured by default. We made the decision to not include this functionality as part of the core library due to the high amount of noise from browser extensions, ad blockers etc. that generally makes libraries such as this less effective.

We recommend using a relevant [integration](/front-end/integrations/) as a better way to handle exceptions, or, if you *would* prefer capture uncaught exceptions, you can do so by using the [`@appsignal/plugin-window-events`](/front-end/plugins/plugin-window-events) package alongside this one.

## Wrapping a block of code

The library provides a convenience method for wrapping a block of code and sending any error thrown within it directly to AppSignal. This is the `appsignal.wrap()` method, an async function that returns a `Promise`. A function should be passed as an argument containing the code you'd like to wrap.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    await appsignal.wrap(() => {
      // catch any error from sync or async code here
    });
  } catch (e) {
    // do something else with the error here, the
    // error has already been sent to AppSignal
  }

  // Alternative usage
  appsignal
    .wrap(() => {
      // catch any error from sync or async code here
    })
    .catch((e) => {
      // do something else with the error here, the
      // error has already been sent to AppSignal
    });
  ```
</CodeGroup>

If an error is thrown anywhere in this function, we return a rejected promise with the `Error` passed as an argument to the `catch` handler.

### Adding metadata to wrapped errors

To add additional metadata to errors captured and sent with `wrap`, use the callback function argument. This callback receives the current Span for the error as an argument and allows it to be modified before being sent to the AppSignal servers.

See the [Span API page][span api] for more information about all the data that can be set on a Span.

<CodeGroup>
  ```javascript JavaScript theme={null}
  appsignal.wrap(
    () => {
      throw new Error("Test error");
    },
    (span) => {
      span.setAction("MyCustomAction");
      span.setNamespace("custom_namespace");
      span.setTags({ tag1: "value 1", tag2: "value 2" });
    },
  );
  ```
</CodeGroup>

## GraphQL errors

If you're using the `urql` GraphQL client, please see the [`@appsignal/urql` documentation](/front-end/integrations/urql) for instructions on how to set up error reporting from GraphQL.

[span api]: /front-end/span.html