# 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:

```javascript
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:

```javascript
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):

```javascript
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` hook:

```javascript
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:

```javascript
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`:

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

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

        if (!passedChecks) {
            return false;
        }

        return report;
    },
});
```