Adding custom context

We already collect a lot of context about the environment to help you debug bugs, but if you feel like we're missing something or you can add some application-specific information, you can add some context of your own 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: "adriaan@spatie.be",
    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 method of the client:

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

flare.beforeSubmit = report => {
    const editedReport = _.deepclone(report);

    // Hide a client's useragent
    editedReport.context.request.useragent = null;

    return editedReport;
}

You can also return a promise from this function:

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

flare.beforeSubmit = report => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ ...report, message: "Billing: " + message });
        }, 1000);
    });
};

If you want to stop a report from being sent to Flare, simply return false from this function:

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

flare.beforeSubmit = function(report) {
    // Some checks you want to do before sending a report, for example if a user is on IE
    const passedChecks = …;

    if (!passedChecks) {
        return false;
    }

    return report;
}