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`).
`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`).
`url.query`	Parsed query string from the current URL (redacted by `urlDenylist`).
`http.request.cookies`	All browser cookies as key-value pairs.

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;
    },
});

Client hooks Adding glows

On this page
Customizing the report before sending