Introduction

This chapter covers the parts of the Flare protocol that only apply to a browser client. Read it alongside the shared pages, which describe the payload structure itself.

Where things live

The three ingestion endpoints and the way you encode attributes are the same for every client, whatever language it is written in. Those pages sit under Shared by all clients in the sidebar:

• Entry points for saying which page or request a report belongs to.
• Resources for the attributes describing your application.
• Attribute formats for the OpenTelemetry value encoding.
• Errors payload, Traces payload and Logs payload for the endpoints themselves.

The pages in this chapter cover what a browser does differently:

• Sending data for the public key, the origin allowlist, timestamps and the last batch before the page closes.
• Events for the browser span types and their attributes.
• Attributes for the page context on an error report.
• Sourcemaps for turning minified stack frames back into readable ones.
• Lifecycle, Web vitals and Aggregations for how browser traces are shaped and grouped.

What a browser does differently

The key is public. A browser cannot keep a secret, so a browser client sends with the project's public key, and the project decides which domains may use it.

A page view is the unit of work. Traces are rooted in a page load or a client-side navigation instead of a request or a job.

Some data shows up after the trace has closed. Core Web Vitals are not final when the page finishes loading, so they go out later, in a second request, on a span backdated to the page's start.

The route pattern takes work. A server framework knows its route from routing. In the browser you either get a pattern out of the router or you fall back to the raw path, and you record which one happened.

Stack frames are minified. Column numbers and a source map version are what make them readable again.

Building a client

Implement the errors, traces and logs endpoints, then follow the attribute conventions in this chapter and in the shared pages.

The span types here are shaped around what a browser can actually observe. If your framework needs a span type or a grouping that does not exist yet, send us a mail and we will look at adding it.