Network requests monitor

Learn about interceptors

Important information

CodeBud uses different methods of network requests interception for different frameworks. In order to use network monitoring, you should import and apply correct interceptor.

Requests may be intercepted only in dev mode with enabled debugging.

Available interceptors

NetworkInterceptorClassic - should work in NodeJS and ts-node projects
NetworkInterceptorXMLHttp - should work in React apps
NetworkInterceptorRN - should work in React Native apps
NetworkInterceptorXHR - should work in browsers (tested in React)

Usage examples

  import { NetworkInterceptorClassic } from "@appklaar/codebud/Network/NetworkInterceptorClassic";

  // Add options as 3rd arg of init method and pass Interceptor
  CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS, {
    Interceptor: NetworkInterceptorClassic,
    interceptorOptions: { // [optional]
      ignoredHosts: [ // List of hosts to ignore
        "dev.host.com"
      ],
      ignoredUrls: [ // List of urls to ignore
        "https://dev.host.com/test"
      ],
      ignoredPatterns: [ // List of url patterns to ignore
        /^GET https?\:\/\/localhost\:5173/,
        /chrome-extension\:\/\//,
        /socket.io/,
        /\/.vite\//
      ]
    },
  });

Now you should be able to check intercepted requests data on the Network tab in GUI.

Enabling encryption (optional)

For safety reasons you can enable additional end-to-end encryption for intercepted data & logs. This means, your data will be encrypted on client side before sending and decrypted just before you view it on GUI side.

How to enable encryption:

First step is same for every platform

Install tweetnacl and tweetnacl-util in your project. Those are CodeBud's peer dependencies, we use them for encryption. After installation you can go to the next steps.

NodeJS / ts-node / React

For NodeJS / ts-node / React encryption usage is really simple. You just need to import encryption plugin and apply it.

  import { EncryptionPlugin } from "@appklaar/codebud/encryption";

  // Add EncryptionPlugin into init options
  CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS, {
      // ...
      EncryptionPlugin: EncryptionPlugin
  });

That's it. Now your data is encrypted.

React Native

Currently we are still working on encryption for React Native. Described solution isn't easy to implement and we're planning to improve this in future (maybe we'll just use another encryption method for RN).

First you should apply EncryptionPlugin

  import { EncryptionPlugin } from "@appklaar/codebud/encryption";

  // Add EncryptionPlugin into init options
  CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS, {
      // ...
      EncryptionPlugin: EncryptionPlugin
  });

But, since react-native doesn't have crypto.randomBytes or window.getRandomValues, you need to use a polyfill.

This might help you: https://github.com/dchest/tweetnacl-js/issues/251