1. Integration
  2. Javascript error tracking
  3. Installation

Installation

Flare's JavaScript integration consists of a couple different packages:

The Flare client will catch any unhandled JavaScript errors and send them to Flare, you need to install the client for every integration. Additionally, you can install one of the framework integrations to easily integrate the client in Vue or React. Finally, the sourcemap plugin runs at build time and uploads a sourcemap of your code to Flare. This way Flare can show you properly formatted code snippets in the in-app stacktrace.

Installing the Flare client

Everything starts here! You can install the Flare client by running one of the following commands:

yarn add @flareapp/js
# or
npm install @flareapp/js

Next, you need to initialize the Flare client as early in your application as possible. Typically this would be in your app.js or index.js file.

import { flare } from "@flareapp/js";

// Only enable Flare in production, we don't want to waste your quota while you're developing:
if (process.env.NODE_ENV === 'production') {
    flare.light('PROJECT PUBLIC KEY');
}

Please make sure that you're using your projects public key. You can find it on the project settings page, in one of the JavaScript installation sections.

If you're using the sourcemap plugin, you don't need to specify an project public key here. The sourcemap plugin will automatically hook up the flare.light() call to your project. You can read more about this in the sourcemap plugin documentation.

To verify that the Flare JavaScript Client was installed correctly and will report your frontend errors, build your code and run the flare.test() command in your browser console. This will generate and report a test error that will show up on your project's dashboard in Flare.

If something goes wrong during the installation, you can enable debug mode on the client by passing true as the second parameter in your flare.light command flare.light('key', true), or by setting flare.debug = true.

Next steps

If your application is a vanilla JavaScript application without a build process, you're all set! Keep reading if you're using a framework or build process.

Some frameworks like React and Vue have their own way of handling errors and require some extra steps to get running. You can easily hook into these by using one of the plugins we provide.

If your application uses a build process (using Webpack, Vite, …), your front-end code for production won't look like the original code anymore. This causes the code snippets attached to error reports to be malformed as well. You can use the Vite or Webpack plugin to circumvent this issue by uploading a sourcemap to Flare. Read more about resolving bundle code here.

Important notes

  • Errors in a development environment might not always be reported, this is normal. If you want to be sure the Flare client is set up correctly, try it out in a production build on your machine.

  • If you want the client to work on older browsers (<=IE11), you have to provide a polyfill for the Promise library yourself. The client might not work on browsers older than IE9 at all.

Previous topicNext topic