Recording and Web enhancement

[sdg9]

React Native intercepting supported

Run this once and all network requests from the JS layer will be captured.

import { interceptReactNativeFetch } from '@caribou-crew/mezzo-interceptor-react-native';
const host = Platform.OS === 'android' ? '10.0.2.2' : 'localhost';
// Monkeypatch every fetch
interceptReactNativeFetch({
  host,
});

(Note all required libraries are not yet published to npm, until then this only works if locally adding dependencies)

React Native as a Reactotron plugin supported

import Reactotron from 'reactotron-react-native';
import mezzoAndReactotronNetworking from '@caribou-crew/mezzo-interceptor-react-native-with-reactotron';

Reactotron.configure({
  name: 'React Native Demo',
})
  .useReactNative({
    asyncStorage: false,
    networking: false, // set networking to false if using react native
    editor: false,
    overlay: false,
  })
  .use(mezzoAndReactotronNetworking()) // and use mezzo & reactotron networking
  .connect();

In this way both the Mezzo web GUI and the Reactotron app will receive API data. Otherwise if you wanted both whomever registered for the intercepts last was taking control, and since mezzo intercept logic is based off reactotron code was 90% identical anyways and did some heavy operations 2x (such as parsing every API payload). In this way all the parsing and intercepting logic happens once, but then it is sent to 2 places (Mezzo and Reactotron servers).

Closes #97

Non-monkey patch fetch supported

You will have to call this in place of every fetch as it simply wraps the network call, it doesn't actually rewrite any global behavior.

import { interceptedFetch } from '@caribou-crew/mezzo-intercept-fetch';
const fetchWithIntercept = interceptedFetch(fetch, {
  host,
});
// call me instead of fetch()
const response = await fetchWithIntercept(
  'https://reactnative.dev/movies.json',
 );

Web dashboard showing network capture supported

Not yet supported

• Persisting recordings to disk, i.e. updating existing routes w/ new variants or creating new routes
• Copying network recording as curl (if desired)
• Client reconnect when server connection is lost
  • e.g. if running RN with above monkey patched fetch but mezzo server is restarted, the socket connection will be broken. Subsequent network calls will not be accurately reported in mezzo until RN app is refreshed or reconnect mechanism is implemented

Misc

Conventional commits are now enforced. Based on commit details we can then properly bump versions when it is time to release. Run npm run commit or git cz when committing for an interactive commit experience, or manually format your commits to conventional commit standards.

Closes #36

Implementation details

• mezzo-core-client is now comprised of two clients
  • a socket client used to send or receive details around recordings.
    • For example RN monkeypatch implementation uses sockets on request and response to update mezzo-core (probably should be renamed to mezzo-core-server).
    • The admin web recording pane uses the same mezzo-core-client to listen to realtime updates of network traffic. Note on initial page load it makes a REST request to fetch all previous calls, the socket is only used to avoid long polling while sitting on the recording screen to see updates in realtime.
  • a REST client that is used to set or update mock variants. This is more useful when testing endpoints without the GUI (e.g. automated testing).

Closes #94

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 17211de. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 4 targets

• nx test core
• nx test admin-web
• nx run-many --all --target=lint --parallel
• nx test core-client

---

Sent with 💌 from NxCloud.

[Gonzalo8642]

"but CI will push it" by "push it" you mean it will bump it when a release is made?

[sdg9]

@Gonzalo8642 if you have my npm token you can push directly to npm locally, but in github if you create a release it will run the CI job to push. Bumping the version isn't currently possible via CI/CD. So workflow is

1. Run script locally to bump version
2. Push the tag created by that command to upstream
3. Create release on github.com which will trigger npm publish

[Gonzalo8642]

Will it prevent people from committing unless they use git cz? I don't see a pre commit hook. Would be nice to have all commits aligned. I guess I can test this after I merge

[sdg9]

@Gonzalo8642 it should be there unless it was only setup on my machine (it blocked me from committing using husky i believe). Give it a try now that it's merged in and let me know