fix(vxrn): distinguish bundle and bytecode preparation in traces

packages/vxrn/src/plugins/reactNativeDevServer.ts

@@ -615,7 +615,10 @@ export function createReactNativeDevServerPlugin(
         }
 
         try {
+          // the opt-in response trace separates bundle preparation from bytecode.
+          res.emit('vxrn:bundle-phase', 'bundle:start')
           const bundle = await (await getDevEngine(platform)).getBundle()
+          res.emit('vxrn:bundle-phase', 'bundle:ready')
           let body: string | Buffer = bundle.code
           if (
             (platform === 'ios' || platform === 'macos') &&
@@ -625,10 +628,12 @@ export function createReactNativeDevServerPlugin(
               root,
               platform
             ))
+            res.emit('vxrn:bundle-phase', 'bytecode:start')
             body = await compile(
               bundle,
               `${url.origin}/index.bundle?platform=${platform}`
             )
+            res.emit('vxrn:bundle-phase', 'bytecode:ready')
           }
           // a client that connects after this response starts from the current
           // route map and does not need the pending reload intended for the

tests/test/scripts/nativeBundleTrace.ts

@@ -28,6 +28,7 @@ export function nativeBundleTrace(path: string | undefined): Plugin {
           )
         }
         record('request', { url: req.url, accept: req.headers.accept })
+        res.on('vxrn:bundle-phase', (phase: string) => record('phase', { phase }))
         const writeHead = res.writeHead.bind(res)
         res.writeHead = ((...args: Parameters<typeof res.writeHead>) => {
           record('headers', { status: args[0] })