[Feature]: Allow project-defined formatting of network bodies in Trace Viewer #42261

🚀 Feature Request

The raw body view/copy is accurate, but the built-in JSON pretty printer can lose precision for integers outside JavaScript's safe integer range. Binary formats such as protobuf cannot be made readable because decoding depends on schemas or libraries unknown to Playwright.

The proposed design is a Playwright Test configuration hook:

playwright.config.js

import { jsonBig, DemoEnvelope } from "helper.js";

export default defineConfig({
  traceViewer: {
    bodyFormatter: (body, context) => {
      if (context.contentType.includes('application/json')) {
        return jsonBig.parse(body.toString('utf8'))
      }

      if (context.contentType.includes('application/x-protobuf')) {
        return DemoEnvelope.decode(body)
      }

      return undefined
    },
  },
})

The formatter would:

• receive the exact body bytes as a Node.js Buffer;
• run locally in the Playwright process, where it can import project code, schemas, and dependencies;
• never be embedded in the trace archive.

A user could switch directly from Raw to Customize or built-in pretty print.

Example

I created an exploratory prototype to validate the end-to-end behavior in UI mode and local show-trace:

sanlengjingvv#3

Prototype screenshots

Raw bigint response

Custom bigint formatter

Custom formatter decodes the protobuf response

Motivation

This matters for:

• JSON APIs containing 64-bit database IDs, monetary values, timestamps, or other integers beyond Number.MAX_SAFE_INTEGER;
• protobuf, MessagePack, CBOR, Avro, and other binary formats;
• compressed, encrypted, or application-specific envelopes;
• teams that already have the correct decoder in their test project and should not have to add that decoder to Playwright itself.