DOCSEARCHbyAlgolia
Submit Docs

Palette Documentation

website·Indexed 33 days ago

https://docs.palette.dev

Performance monitoring and profiling tool for web applications. Palette provides capabilities for recording JavaScript profiles in production, tracking Web Core Vitals (including INP), monitoring network requests, and analyzing React component interaction performance. It includes features for session profiling, flamegraphs, call trees, and metric alerts with Slack integration.

Tokens
13.6K
Snippets
58
Records
131
Agent score
48%

What's inside Palette

  1. Visualize execution time with the Flamegraph

    The Flamegraph provides a visual representation of call tree structures. Key characteristics include:

    • Rectangle size: Larger rectangles indicate greater running time.
    • Top rectangles: These represent the stacks contributing to 'self time', where the program actually spends its time.
    • Sorting: Functions are sorted alphabetically in ascending order from left to right.

  2. Analyze session markers using Marker Charts and Tables

    Palette provides two ways to analyze markers:

    • Marker Chart: A visual representation of markers over time, showing the duration, name, and type of each marker.
    • Marker Table: A tabular view listing the duration, name, and type of each marker.

  3. Track function execution over time with the Stack Chart

    The Stack Chart visualizes function execution with respect to time. Users can overlay markers on the stack chart by enabling the 'Show user timings' option.

  4. Analyze function execution with the Call Tree

    The Call Tree panel visualizes function execution as a list-hierarchy. In this view, parent nodes represent functions that call other functions, and the called functions are displayed as child nodes.

  5. Visualize React Paint interaction metrics

    React Paint metrics are recorded as markers following the naming convention: <Your Component> <interaction> to Paint. These markers can be added to the Metrics Chart in the Palette dashboard.

  6. Understand the purpose of source maps in Palette

    Source maps are used to map minified production stack traces back to the original source code. This allows developers to see readable stack traces, accurate line numbers, and original variable/function names in error reports and profiler views, which would otherwise be obscured by production minification and optimization.

  7. Inspect network requests in the Network tab

    The Network tab displays all network requests made during a session. It provides detailed metadata including the request URL, cache hit/miss status, total duration, and specific DNS, TLS, and TCP timings.

  8. Understand Palette network payload compression and transmission

    Palette minimizes main-thread impact by compressing network payloads asynchronously. It uses Gzip compression via the CompressionStream API in browsers, and Brotli compression in Node and Electron applications. To avoid interfering with user experience, payloads are only sent when the user is idle or the browser tab/Electron app has been backgrounded.

  9. Understand Profile Aggregates in Palette

    Profile Aggregates summarize code behavior across end-user sessions by sorting functions by execution time and comparing changes between versions. They are used to identify performance regressions in metrics like p95 click responsiveness, keypress responsiveness on specific devices, or custom metrics (e.g., dashboard_render_time) on specific pages.

  10. Understand Release Markers in Palette Metrics

    Release Markers are visual indicators in Palette that denote when a new version of an application was released to production. They are used in conjunction with performance metrics to analyze and compare how performance changes between different app versions.

  11. Visualize performance with Call Trees and Flame Graphs

    Palette provides two ways to visualize the call stack:

    • Call Trees: A hierarchical list where parent nodes are the callers and child nodes are the called functions.
    • Flame Graphs: A visual representation of the call tree where:
      • Rectangle width indicates running time.
      • Rectangles at the top represent the stacks contributing to 'self time'.
      • Functions are sorted alphabetically from left to right.

  12. Add session context using tags in Palette

    Tags allow you to attach additional metadata to a user's session, which is useful for identifying specific users or cohorts (e.g., A/B test variants) when debugging performance issues. Common use cases include tagging session IDs and user IDs.
    import { tag } from "@palette.dev/browser";

// Tag a user ID for identification
tag("userId", "janedoe_123");

// Tag a specific experiment variant
tag("myABTest", "variantA");