Flare by Spatie
    • Error Tracking
    • Performance Monitoring
    • Logs
  • Pricing
  • Docs
  • Insights
  • Changelog
  • Back to Flare ⌘↵ Shortcut: Command or Control Enter
  • Sign in
  • Try Flare for free
  • Error Tracking
  • Performance Monitoring
  • Logs
  • Pricing
  • Docs
  • Insights
  • Changelog
    • Back to Flare ⌘↵ Shortcut: Command or Control Enter
    • Try Flare for free
    • Sign in
Flare Flare Laravel Laravel PHP PHP JavaScript JavaScript React React Vue Vue Svelte Svelte Protocol Protocol
  • General
  • Installation
  • CDN installation
  • Resolving bundled code
  • API reference
  • Errors
  • Reporting errors
  • Client hooks
  • Logs
  • Introduction
  • Levels
  • Attributes
  • Data Collection
  • Adding custom context
  • Adding glows

CDN installation

If your project has no build step and you don't use npm, you can load the Flare client directly from the jsDelivr CDN. If you use npm with a bundler (Vite, Webpack, …), follow the regular installation guide instead.

Loading via jsDelivr

Add a module script to your page that imports the Flare client from jsDelivr and starts it with your project key:

<script type="module">
    import { flare } from 'https://cdn.jsdelivr.net/npm/@flareapp/js@2/+esm';

    flare.light('PROJECT PUBLIC KEY');
</script>

You can find the project key on the project settings page, below the project configuration section.

A few things to note about the URL:

  • @2 pins the client to major version 2. You'll automatically get bug fixes and new features, but a future breaking major release won't be pulled in until you bump it yourself. You can also pin an exact version like @flareapp/[email protected] if you want full reproducibility.
  • /+esm tells jsDelivr to serve the ES module build and rewrite the package's dependencies to browser-loadable CDN ESM URLs. The browser then fetches @flareapp/core (and its own dependencies) as a chain of CDN modules — jsDelivr rewrites the imports rather than bundling everything into one file. This is what makes the client work without a bundler: the raw @flareapp/js module on its own contains a bare @flareapp/core import that a browser can't resolve.

Verifying the install

The Flare client assigns itself to window.flare as soon as the module is imported. (The import binding itself is scoped to your module script, but the SDK sets the window.flare global as a side effect of being loaded — so it's available even though you're using ESM.) You can interact with it from the console. Once flare.light() has set your project key, run flare.test() in your browser console to send a real test error to Flare. It will show up on your project's dashboard.

If something goes wrong, enable debug mode by passing true as the second argument to flare.light('PROJECT PUBLIC KEY', true), or by calling flare.configure({ debug: true }).

Why a regular <script src> tag won't work

The @flareapp/js package only ships CommonJS and ES module builds — there is no UMD or IIFE ("browser global") build. A classic <script src="..."> tag therefore can't load the client or expose window.flare on its own. Always use <script type="module"> together with the jsDelivr /+esm URL shown above.

Next steps

Once the client is running, you can customize it with flare.configure(), and read about resolving bundled code if you later move to a build process.

Installation Resolving bundled code
  • On this page
  • Loading via jsDelivr
  • Verifying the install
  • Why a regular
  • Next steps

Catch errors and fix slowdowns with Flare, the full-stack application monitoring platform for Laravel, PHP & JavaScript.

  • Platform
  • Error Tracking
  • Performance Monitoring
  • Pricing
  • Support
  • Resources
  • Insights
  • Newsletter
  • Changelog
  • Documentation
  • Affiliate program
  • uptime status badge Service status
  • Terms of use
  • DPA
  • Privacy & cookie Policy
Made in by
Flare