Adding custom context

The Flare client automatically collects the following attributes from the browser when reporting an error:

Attribute key	Description
`url.full`	Current page URL (sensitive query-string values redacted by `urlDenylist`).
`url.scheme`, `url.path`	Scheme and path of the current page URL.
`url.query`	Query string of the current URL (redacted by `urlDenylist`).
`host.name`	Hostname of the current page.
`http.route`	Path of the current page.
`flare.entry_point.*`	The page the error happened on, used to group errors by entry point.
`user_agent.original`	Browser User-Agent string.
`http.request.referrer`	Document referrer (redacted by `urlDenylist`).
`document.ready_state`	Document ready state (`loading`, `interactive`, or `complete`).
`http.request.cookies`	All browser cookies as key-value pairs.
`device.screen.*`	Screen width, height and pixel ratio.
`device.memory_gb`, `device.cpu_cores`	Device memory and CPU cores, in browsers that expose them.
`network.*`	Online status, and connection type, speed and round-trip time in browsers that expose them.

If you feel like we're missing something or you want to add application-specific information, you can add custom context like this:

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

flare.addContext('version', '2.1.2');

flare.addContext("vuex store content", {
    user: { name: "Adriaan", role: "admin" }
});

These will show up in the Generic context group in a report's Context tab.

You can also add custom context groups:

flare.addContextGroup("custom context group", {
    key: 0,
    anotherKey: "another value",
});

Or add a group that's handled by Flare (this info will show up in the User tab of the error occurrence UI in Flare):

flare.addContextGroup("user", {
    email: "[email protected]",
    name: "Adriaan",
    role: "admin",
});

Customizing the report before sending

Sometimes you want to add in some extra context right as an error report is being created, or you might want to do the opposite and strip some context to protect your users' privacy even more. You can do this by using the beforeSubmit hook:

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

flare.configure({
    beforeSubmit: (report) => {
        const editedReport = structuredClone(report);

        // Hide a client's useragent
        editedReport.attributes['user_agent.original'] = null;

        return editedReport;
    },
});

You can also return a promise from this callback:

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

flare.configure({
    beforeSubmit: (report) => {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({ ...report, message: `Billing: ${report.message ?? ''}` });
            }, 1000);
        });
    },
});

If you want to stop a report from being sent to Flare, return false or null:

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

flare.configure({
    beforeSubmit: (report) => {
        const passedChecks = /* … */;

        if (!passedChecks) {
            return false;
        }

        return report;
    },
});

Attributes Adding glows

On this page

Customizing the report before sending