Skip to main content

​
Setting up AppSignal

To configure AppSignal for front-end JavaScript, we recommend creating an appsignal.js file with the AppSignal config in your project’s root or src directory. Then require or import the configuration file from the app’s code before any other packages are required or imported. In the example below, there is an appsignal.js file in the root of the applications directory. On line 8 we’ve added the namespace config option. 
// For ES Module via npm/yarn, or with import maps
import Appsignal from "@appsignal/javascript";
// For CommonJS module via npm/yarn
const Appsignal = require("@appsignal/javascript").default;
// With the JSPM.dev CDN
import Appsignal from "https://jspm.dev/@appsignal/javascript";

const appsignal = new Appsignal({
  key: "<YOUR FRONTEND API KEY>",
});

module.exports = { appsignal };

​
Customize the configuration

You can customize the error reporting from your application with the Front-end configuration options. Here’s an example of how the namespace option is customized. 
 const appsignal = new Appsignal({
   key: "<YOUR FRONTEND API KEY>",
+  namespace: "frontend", // Configure the AppSignal namespace for front-end errors in this app
 });

​
Require the AppSignal configuration

Once you’re done with your application’s config, require the appsignal.js file at the very top of your application’s main file, like in the example below: 
// Place this at the top
// Import the file created in the previous step
const { appsignal } = require("./appsignal"); // Update to the location used in the previous step

// Place your app code below this
After your application loads the AppSignal JavaScript library, make sure to follow all the steps in the installation guide, adding integrations, adding plugins, and customize your configuration.