` to uninstall an AppSignal package.
3. Remove any AppSignal [configuration](/front-end/configuration/) from your app.
4. Commit, deploy and restart your app.
* This will make sure the AppSignal servers won't continue to receive data from your app.
5. Finally, [remove the app](/guides/application/deleting-applications) on AppSignal.com.
📖 Continue with our [uninstall
guide](/guides/application/deleting-applications).
# AppSignal for JavaScript integrations
Source: https://docs.appsignal.com/front-end/integrations
## Integrations
An integration is a module that can consume the `Appsignal` object to catch errors from popular libraries or frameworks. These integrations may come in a variety of different forms, and we aim to generally provide APIs that are consistent, and feel idiomatic to use, with the libraries and/or frameworks that you’re using.
These currently include:
* [React - `@appsignal/react`](/front-end/integrations/react) (works with React Native and Expo)
* [Vue - `@appsignal/vue`](/front-end/integrations/vue)
* [Angular - `@appsignal/angular`](/front-end/integrations/angular)
* [Ember - `@appsignal/ember`](/front-end/integrations/ember)
* [Preact - `@appsignal/preact`](/front-end/integrations/preact)
* [Stimulus - `@appsignal/stimulus`](/front-end/integrations/stimulus)
# @appsignal/angular
Source: https://docs.appsignal.com/front-end/integrations/angular
## Installation
### With npm or yarn
Add the `@appsignal/angular` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/angular
npm install @appsignal/javascript @appsignal/angular
```
### With JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/angular` to the dependencies list, then add the generated import map and ES module shims to your application's code.
### With `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/angular
```
## Usage
### `AppsignalErrorHandler`
The default Angular integration is a class that extends the `ErrorHandler` class provided by `@angular/core`. In a new app created using `@angular/cli`, your `app.module.ts` file might include something like this:
```js JavaScript theme={null}
import { ErrorHandler, NgModule } from "@angular/core";
import { appsignal } from "./appsignal";
import { createErrorHandlerFactory } from "@appsignal/angular";
@NgModule({
// other properties
providers: [
{
provide: ErrorHandler,
useFactory: createErrorHandlerFactory(appsignal),
},
],
// other properties
})
export class AppModule {}
```
# @appsignal/ember
Source: https://docs.appsignal.com/front-end/integrations/ember
## Installation
Add the `@appsignal/ember` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/ember
npm install @appsignal/javascript @appsignal/ember
```
Starting with Ember 4, projects created with `ember new` include `ember-auto-import` out of the box. If your project does not, you will need to add some kind of method for loading `npm` packages into your application. We recommend using [`ember-auto-import`](https://github.com/ef4/ember-auto-import), which you can install using `ember-cli`:
```bash Bash theme={null}
ember install ember-auto-import
```
[A number of other methods and custom configurations are available](https://guides.emberjs.com/release/addons-and-dependencies/) for importing this library in a way that suits your app.
## Usage
### `Ember.onerror`/`Ember.RSVP.on("error")`
The default Ember integration is a function that binds to the `Ember.onerror` and `Ember.RSVP.on("error")` handlers. In a new app created using `ember-cli`, your `app.js` file might include something like this:
```js JavaScript theme={null}
import { appsignal } from "./appsignal";
import Ember from "ember";
import { installErrorHandler } from "@appsignal/ember";
installErrorHandler(appsignal, Ember);
```
# @appsignal/preact
Source: https://docs.appsignal.com/front-end/integrations/preact
## Installation
### With npm or yarn
Add the `@appsignal/preact` and `@appsignal/javascript` packages to your `package.json`. Then, run `npm install`/`yarn install`.
You can also add these packages to your `package.json` on the command line:
```sh Shell theme={null}
yarn add @appsignal/javascript @appsignal/preact
npm install @appsignal/javascript @appsignal/preact
```
### With JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/preact` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.
### With `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/preact
```
## Usage
### Error Boundary
If you are using Preact v10.0.0 or higher, you can use the `ErrorBoundary` component to catch errors from anywhere in the child component tree.
```jsx JavaScript theme={null}
import { Component } from "preact";
import { appsignal } from "./appsignal";
import { ErrorBoundary } from "@appsignal/preact";
const FallbackComponent = () => (
Uh oh! There was an error :(
);
export default class App extends Component {
render() {
return (
} {/* Optional */}
>
{ /** Child components here **/}
)
}
}
```
# @appsignal/react
Source: https://docs.appsignal.com/front-end/integrations/react
## Installation
### With npm or yarn
Add the `@appsignal/react` and `@appsignal/javascript` packages to your `package.json`. Then, run `npm install`/`yarn install`.
You can also add these packages to your `package.json` on the command line:
```sh Shell theme={null}
yarn add @appsignal/javascript @appsignal/react
npm install @appsignal/javascript @appsignal/react
```
You can also use the React integration with React Native and Expo.
### With JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/react` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.
### With `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/react
```
## Usage
You must pass the AppSignal client instance as the `instance` prop. In addition, the following props can optionally be passed to both the `ErrorBoundary` and `LegacyBoundary` components:
| Prop name | Description |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action` | The action name for which to show errors reported by this boundary. We recommend using the name of the component. |
| `tags` | An object containing the tags to set for errors reported by this boundary. |
| `fallback` | A function that optionally takes the error as an argument, and returns a fallback component to use when rendering fails. |
| `override` | A function that takes the error span, and optionally the error itself, as arguments, and returns a modified span. Only called when an error is reported. Use it to [set tags, params or breadcrumbs](/front-end/span#updating-a-span) on the error sample. |
When using `tags`, `fallback` or `override`, use `useMemo` (or `useCallback` for `fallback` and `override`) to memoize the values. This will prevent unnecessary re-renders.
### Error Boundary
If you are using React v16 or higher, you can use the `ErrorBoundary` component to catch errors from anywhere in the child component tree.
```jsx JavaScript theme={null}
import React from "react";
import ReactDOM from "react-dom";
import { appsignal } from "./appsignal";
import { ErrorBoundary } from "@appsignal/react";
const FallbackComponent = () => (
Uh oh! There was an error :(
);
const App = () => (
const tags = useMemo(() => ({ tag: "value" }), []);
const fallback = useCallback((error) => , []);
const override = useCallback((span, error) => {
span.setParams({ customParams: "123" });
return span
}, []);
{ /* Child components here */ }
);
ReactDOM.render(, document.getElementById("root"));
```
### Legacy Boundary
The API that this component uses is unstable at this point in React's
development. We offer this component as a means to support those running React
v15, but do not guarantee its reliablity. You are encouraged to use the
`ErrorBoundary` whenever possible.
The `LegacyBoundary` works in almost exactly the same way as the `ErrorBoundary`:
```jsx JavaScript theme={null}
import React from "react";
import ReactDOM from "react-dom";
import { appsignal } from "./appsignal";
import { LegacyBoundary } from "@appsignal/react";
const FallbackComponent = () => (
Uh oh! There was an error :(
);
const App = () => (
const tags = useMemo(() => ({ tag: "value" }), []);
const fallback = useCallback((error) => , []);
const override = useCallback((span, error) => {
span.setParams({ customParams: "123" });
return span
}, []);
{ /* Child components here */ }
);
ReactDOM.render(, document.getElementById("root"));
```
# @appsignal/stimulus
Source: https://docs.appsignal.com/front-end/integrations/stimulus
## Installation
### With npm or yarn
Add the `@appsignal/stimulus` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/stimulus
npm install @appsignal/javascript @appsignal/stimulus
```
### With JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/stimulus` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.
### With `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/stimulus
```
## Usage
### `Application.handleError`
The default Stimulus integration is a function that binds to the `Application.handleError` property. In a new app created using `rails new $APP_NAME --webpack=stimulus`, for example, your `javascript/controllers/index.js` file would look something like this:
```js JavaScript theme={null}
import { Application } from "stimulus";
import { definitionsFromContext } from "stimulus/webpack-helpers";
import { appsignal } from "./appsignal";
import { installErrorHandler } from "@appsignal/stimulus";
const application = Application.start();
installErrorHandler(appsignal, application);
const context = require.context("controllers", true, /_controller\.js$/);
application.load(definitionsFromContext(context));
```
# @appsignal/urql
Source: https://docs.appsignal.com/front-end/integrations/urql
[`urql`](https://urql.dev/) is a GraphQL client for JavaScript applications. The `@appsignal/urql` package provides a [custom exchange](https://urql.dev/docs/architecture/#the-exchanges), which, once added to your `urql` client, automatically intercepts all GraphQL errors and reports them to AppSignal.
## Installation
### `npm` or `yarn`
Add the `@appsignal/urql` and `@appsignal/javascript` packages to your `package.json`. Then, run `npm install`/`yarn install`.
You can also add these packages to your `package.json` on the command line:
```sh Shell theme={null}
yarn add @appsignal/javascript @appsignal/urql
npm install @appsignal/javascript @appsignal/urql
```
### JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/urql` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.
### `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/urql
```
## Usage
### Adding exchange to the client
The `@appsignal/urql` package provides a custom urql exchange that automatically reports GraphQL errors to AppSignal. This exchange intercepts all query and mutation results and reports any errors without requiring changes to individual `useQuery` calls.
```typescript TypeScript theme={null}
import { createClient, fetchExchange } from "urql";
import Appsignal from "@appsignal/javascript";
import { createAppsignalExchange } from "@appsignal/urql";
const appsignal = new Appsignal({
key: "YOUR FRONTEND API KEY",
});
const client = createClient({
url: "https://api.example.com/graphql",
exchanges: [createAppsignalExchange(appsignal), fetchExchange],
});
```
The exchange will automatically:
* Report all GraphQL errors to AppSignal
* Include the GraphQL query body as a parameter (visible in AppSignal's error details)
* Include the endpoint URL as a tag
* Include operation name and type as tags (when available)
## Error Details
When a GraphQL error occurs, AppSignal will receive:
* **Error message**: A concatenation of all GraphQL error messages
* **Tags**:
* `endpoint`: The GraphQL endpoint URL
* `operationName`: The name of the GraphQL operation (if specified)
* `operationType`: The type of operation (query, mutation, subscription)
* **Parameters**:
* `query`: The full GraphQL query body
This provides complete context for debugging GraphQL errors in your application.
# @appsignal/vue
Source: https://docs.appsignal.com/front-end/integrations/vue
## Installation
### With npm or yarn
Add the `@appsignal/vue` and `@appsignal/javascript` packages to your `package.json`. Then, run `npm install`/`yarn install`.
You can also add these packages to your `package.json` on the command line:
```sh Shell theme={null}
yarn add @appsignal/javascript @appsignal/vue
npm install @appsignal/javascript @appsignal/vue
```
### With JSPM.io import maps
Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.
Add `@appsignal/javascript` and `@appsignal/vue` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.
### With `rails-importmap`
Use the following command to add these packages to your Rails application's import maps:
```sh Shell theme={null}
./bin/importmap pin @appsignal/javascript @appsignal/vue
```
## Usage
### `Vue.config.errorHandler`
The default Vue integration is a function that binds to Vue's global `errorHandler` hook.
#### Vue v2
In a new Vue v2 app created using `@vue/cli`, your `main.js`/`.ts` file would look something like this:
```js JavaScript theme={null}
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { appsignal } from "./appsignal";
import { errorHandler } from "@appsignal/vue";
Vue.config.errorHandler = errorHandler(appsignal, Vue);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
```
#### Vue v3
Version 3 of Vue includes a change to the way you'd use our Vue integration. Instead of attaching it to the global `Vue` object, you would use it like this instead:
```js JavaScript theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import { appsignal } from "./appsignal";
import { errorHandler } from "@appsignal/vue";
const app = createApp(App);
app.config.errorHandler = errorHandler(appsignal, app);
app.mount("#app");
```
# AppSignal for JavaScript plugins
Source: https://docs.appsignal.com/front-end/plugins
## Plugins
The following plugins are available to add additional metadata to Front-end error reports.
* [plugin-breadcrumbs-console](/front-end/plugins/plugin-breadcrumbs-console)
* [plugin-breadcrumbs-network](/front-end/plugins/plugin-breadcrumbs-network)
* [plugin-window-events](/front-end/plugins/plugin-window-events)
* [plugin-path-decorator](/front-end/plugins/plugin-path-decorator)
## Loading plugins
The `Appsignal` object can take one or many optional "plugins" that can extend the base functionality of the library e.g. for handling uncaught exceptions via `window.error` or `onunhandledpromiserejection`.
```javascript JavaScript theme={null}
import { plugin } from `appsignal/plugin-${PLUGIN_NAME}`
appsignal.use(plugin())
```
# plugin-breadcrumbs-console
Source: https://docs.appsignal.com/front-end/plugins/plugin-breadcrumbs-console
The `@appsignal/javascript` plugin for automatically adding a breadcrumb on every call to any of the [supported `console` methods](https://github.com/appsignal/appsignal-javascript/blob/develop/packages/plugin-breadcrumbs-console/src/index.ts#L3), e.g. `console.log`, `console.warn`.
## Installation
Add the `@appsignal/plugin-breadcrumbs-console` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/plugin-breadcrumbs-console
npm install @appsignal/javascript @appsignal/plugin-breadcrumbs-console
```
## Usage
```js JavaScript theme={null}
import Appsignal from "@appsignal/javascript";
import { plugin } from "@appsignal/plugin-breadcrumbs-console";
const appsignal = new Appsignal({
key: "YOUR FRONTEND API KEY",
});
appsignal.use(plugin(options));
```
### `plugin` options
The `plugin` currently receives no options.
# plugin-breadcrumbs-network
Source: https://docs.appsignal.com/front-end/plugins/plugin-breadcrumbs-network
The `@appsignal/javascript` plugin for automatically adding a breadcrumb on every network request. Works with both `XMLHttpRequest` and `fetch`.
## Installation
Add the `@appsignal/plugin-breadcrumbs-network` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/plugin-breadcrumbs-network
npm install @appsignal/javascript @appsignal/plugin-breadcrumbs-network
```
## Usage
```js JavaScript theme={null}
import Appsignal from "@appsignal/javascript";
import { plugin } from "@appsignal/plugin-breadcrumbs-network";
const appsignal = new Appsignal({
key: "YOUR FRONTEND API KEY",
});
appsignal.use(plugin(options));
```
### `plugin` options
The `plugin` can be initialized with the following options:
| Param | Type | Description |
| ------------ | ------- | --------------------------------------------------------------------------------------------------------------- |
| xhrEnabled | Boolean | (optional) A boolean value representing whether the plugin should bind to `XMLHttpRequest`. Defaults to `true`. |
| fetchEnabled | Boolean | (optional) A boolean value representing whether the plugin should bind to `fetch`. Defaults to `true`. |
# plugin-path-decorator
Source: https://docs.appsignal.com/front-end/plugins/plugin-path-decorator
## Installation
Add the `@appsignal/plugin-path-decorator` and `@appsignal/javascript` packages to your `package.json`. Then, run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/plugin-path-decorator
npm install @appsignal/javascript @appsignal/plugin-path-decorator
```
## Usage
The `plugin-path-decorator` is a plugin that decorates all outgoing `Span`s with the current path. This is computed by reading from `window.location.pathname`.
```javascript JavaScript theme={null}
import { plugin } from `@appsignal/plugin-path-decorator`
appsignal.use(plugin(options))
```
## `plugin` options
The plugin currently takes no options as parameters.
# plugin-window-events
Source: https://docs.appsignal.com/front-end/plugins/plugin-window-events
The `@appsignal/plugin-window-events` plugin binds to the `window.onerror` and `window.onunhandledrejection` event handlers to catch any errors that are otherwise not caught elsewhere in your code.
## Installation
Add the `@appsignal/plugin-window-events` and `@appsignal/javascript` packages to your `package.json` file and run `yarn install`/`npm install`.
You can also add these packages to your `package.json` on the command line:
```bash Bash theme={null}
yarn add @appsignal/javascript @appsignal/plugin-window-events
npm install @appsignal/javascript @appsignal/plugin-window-events
```
## Usage
```javascript JavaScript theme={null}
import { plugin } from `@appsignal/plugin-window-events`
appsignal.use(plugin(options));
```
### Use with Next.js
Even with `"use client"`, Next.js pre-renders client components on the server, where the `window` object is not available. Guard the plugin initialization with:
```javascript JavaScript theme={null}
if (typeof window !== "undefined") {
appsignal.use(plugin(options));
}
```
## `plugin` options
The `plugin` can be initialized with the following options:
| Param | Type | Description |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| onerror | Boolean | (optional) A boolean value representing whether the plugin should bind to the `window.onerror` handler. Defaults to `true`. |
| onunhandledrejection | Boolean | (optional) A boolean value representing whether the plugin should bind to the `window.onunhandledrejection` handler. Defaults to `true`. |
# Sourcemaps
Source: https://docs.appsignal.com/front-end/sourcemaps
Sourcemaps are a way to convert backtraces from minified or transpiled JavaScript files to their original representation in your source code. A sourcemap contains data about your front-end source code, which we can use to derive the function name, line and column number, and surrounding source code from the position referenced in the backtrace.
## Requirements
Enhancing backtraces with sourcemaps requires each sample to be tagged with a `revision` of your application. This is used to determine when to fetch new sourcemaps after a deploy has changed your (front-end) code. You can specify the revision in the options given when creating a new AppSignal instance.
```js JavaScript theme={null}
const appsignal = new Appsignal({
key: "",
revision: "",
});
```
## Public sourcemaps
With public sourcemaps, the sourcemap is hosted next to the JavaScript file. At the bottom of the minified JavaScript there needs to be a special comment to indicate that a sourcemap is available for the code.
```js JavaScript theme={null}
//# sourceMappingURL=file.js.map
```
The URL in this comment can be a full URL to the sourcemap, or a relative path from the JavaScript file to the sourcemap.
For example, if the minified JS is hosted on: `https://your.app/assets/application.min.js` and the sourcemap comment looks like `//# sourceMappingURL=application.min.js.map`, we will attempt to retrieve the source map from the following URL: `https://your.app/assets/application.min.js.map`.
We attempt to cache public sourcemaps, but we may nonetheless request the minified version and the sourcemap file more than once.
## Private sourcemaps
We usually recommend using public sourcemaps whenever possible, as builds that produce lots of sourcemaps can take a long time to upload via our private sourcemap endpoint.
However, if that is not possible, you can also upload your sourcemaps to our [sourcemaps API endpoint](/api/sourcemaps).
### Retention
Sourcemaps are grouped into a "release" by the `revision` string and we will keep the last "release" until a new `revision` is uploaded. Older "releases" will be kept for up to sixty days.
# Creating and Using a Span
Source: https://docs.appsignal.com/front-end/span
A `Span` is the name of the object that we use to capture data about an error and its surrounding context. It is designed to be similar to, but not exactly like, the Span from the [OpenTelemetry](https://github.com/open-telemetry/opentelemetry-specification) standard specification.
## Creating a new `Span`
A `Span` can be created by calling `appsignal.createSpan()`, which initializes a new `Span` object with any default options that you passed when the `Appsignal` object was initialized.
```js JavaScript theme={null}
const span = appsignal.createSpan();
```
The `createSpan()` method can also take a function as a parameter, allowing you to define the `Span`'s data as the same time as it is created.
```js JavaScript theme={null}
const span = appsignal.createSpan((span) => {
return span.setTags({
tag: "value",
});
});
```
`Span`s cannot be nested, nor can multiple `Span`s be passed to `appsignal.send()` at once. We recommend using `Promise.all` for concurrent `send` operations.
```js JavaScript theme={null}
const span1 = appsignal.createSpan();
const span2 = appsignal.createSpan();
Promise.all([appsignal.send(span1), appsignal.send(span2)]);
```
## Updating a `Span`
After a `Span` is created, you can begin adding data to it using methods on the `Span` object:
```js JavaScript theme={null}
const span = appsignal.createSpan();
span.setTags({ tag: "value" });
console.log(span.serialize().tags); // { tag: "value" }
```
Each method that modifies the `Span` returns `this`, allowing you to chain methods together:
```js JavaScript theme={null}
const span = appsignal.createSpan();
span.setTags({ tag: "value" }).setError(new Error("test error"));
console.log(span.serialize().tags); // { tag: "value" }
console.log(span.serialize().error); // { name: "Error", message: "test error", backtrace: [...] }
```
### `span.setAction(name: string)`
Sets the `action` of the current `Span`. The `action` must never be an empty string - it can be either `undefined` or a non-empty string. An action name is used to identify the location of a certain sample error and performance issues.
### `span.setNamespace(name: string)`
Sets the `namespace` of the current `Span`. Namespaces are a way to group error incidents, performance incidents, and host metrics in your app.
### `span.setError(error: Error | object)`
Sets the `error` of the current `Span`. The `Error` object has a `name`, `message` and `backtrace` property. Make sure to only use something describing the error's type as the `name`. AppSignal groups the errors based on this name. You can put anything you like in the `message`.
When an `Error` object is passed to the `setError` method, the `stack` property is normalised and transformed into an array of strings, with each string representing a line in the stacktrace. For consistency with our other integrations, `stack` is renamed to `backtrace`.
### `span.setTags(tags: object)`
Adds `tags` to the current `Span`. The current `tags` will be merged with the `tags` object passed as a parameter.
### `span.setParams(params: object)`
Adds `params` to the current `Span`. The current `params` will be merged with the `params` object passed as a parameter.
If you're using a version prior to 1.3.28, the `params` object must not
contain any nested objects.
### `span.serialize()`
Returns the contents of a `Span` as an object.
## Sending a `Span` to AppSignal
When you're finished adding data to the `Span`, it can then be passed to `appsignal.send()` to be pushed to our API.
```js JavaScript theme={null}
const span = appsignal.createSpan((span) => {
return span.setError(new Error("test error"));
});
appsignal.send(span);
```
The `send()` method is different to the `sendError()` method as it allows a `Span` to be passed as a parameter, which is either pushed immediately to the API, or in the case of a network error, added to the queue to be retried later.
Once the `Span` is passed to `appsignal.send()`, any [Hooks](/front-end/hooks) are applied to the `Span` in the following order:
* Decorators
* Optional `tags` or `namespace` arguments to `appsignal.send()`
* Overrides
### About the Retry Queue
If, for any reason, pushing an error to the API fails (e.g. if the network connection is not working), the `Span` object that it belongs to is placed in the retry queue. By default, requests are retried **5 times** with exponential backoff. If the request succeeds, the corresponding `Span` is removed from the queue. Once the retry limit has been reached, any `Span`s left in the queue are discarded.
No caching is currently implemented for the retry queue, meaning that if a
`Span` is in the queue when the user navigates away from your application,
that `Span` will also be discarded.
# Troubleshooting
Source: https://docs.appsignal.com/front-end/troubleshooting
## CDN hosted assets
Your app's assets are hosted on a CDN and you see the following warning message in the browser's web console:
```sh Shell theme={null}
Cross-domain or eval script error detected, error ignored
```
This is normal browser behaviour and is a consequence of the [Same-Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy), a security measure designed to protect your users from [Cross-Site Request Forgery](/appsignal/terminology#cross-site-request-forgery) (CSRF) attacks. Luckily, this is a fairly easy problem to remedy.
First, on your CDN, add a cross-origin (CORS) header:
```sh Shell theme={null}
Access-Control-Allow-Origin: *
```
In your app, make sure the `crossorigin` attribute is present in all your JavaScript tags.
```html HTML theme={null}