What's the work flow of the jitsi web part

I am researching the jitsi web part and trying to figure out the workflow of jitis web js.
have a few question:

  1. where is the source code of app.bundle.min.js ? it is not a part of jitsi code ?
  2. on the browser console, I can see message from react/*** (like react/index.web.js or react/features/base/media/middleware.js) where is that code ?
  3. after we clicking the GO button to create a meeting, which function will this OnClick event call first ?
  1. app.bundle.min.js is generated via webpack. https://github.com/jitsi/jitsi-meet/blob/6c4901a8260ed23f64c6a72881126b117f0bf90b/webpack.config.js#L168, https://github.com/jitsi/jitsi-meet/blob/6c4901a8260ed23f64c6a72881126b117f0bf90b/Makefile#L18, https://github.com/jitsi/jitsi-meet/blob/6c4901a8260ed23f64c6a72881126b117f0bf90b/README.md#building-the-sources
  2. That various source files are here: https://github.com/jitsi/jitsi-meet. While app.bundle.min.js is what’s downloaded, source-maps are enabled by default so you can see individual files on deployments. https://github.com/jitsi/jitsi-meet/blob/6c4901a8260ed23f64c6a72881126b117f0bf90b/webpack.config.js#L45
  3. Callback for Go click is here: https://github.com/jitsi/jitsi-meet/blob/6c4901a8260ed23f64c6a72881126b117f0bf90b/react/features/welcome/components/AbstractWelcomePage.js#L179. It’s in “Abstract” because common code between react web and react-native is shared in it.

@Lenny8 Thanks!!

I am reading the _sendEvent in AnalyticsAdapter.js. I believe this code will send request to backend server using BOSH (correct me if I am wrong)

for this code:
this.analyticsHandlers.forEach(handler => {
try {
handler.sendEvent(event);
} catch (e) {
logger.warn(Error sending analytics event: ${e});
}
});

I am trying to see the handler.sendEvent() function but cannot find it. which code define the “handler” object ?

I see a function setAnalyticsHandlers(handlers) but I don’t see which js call it. in another word, which code define the SET analyticsHandlers ?

I see settAnalyticsHandlers being called in jitsi-meet react/features/analytics/functions.js. The codepath seems to be initAnalytics -> _loadHandlers -> analytics.setAnalyticsHandlers. The handers are are generated in _loadHandlers, based on “scriptUrls” which are defined in the global config under the “analytics” key.

thanks!! @Lenny8
I check the global config. the analytics part is empty.
analytics: {
// The Google Analytics Tracking ID:
// googleAnalyticsTrackingId: ‘your-tracking-id-UA-123456-1’

    // The Amplitude APP Key:
    // amplitudeAPPKey: '<APP_KEY>'

    // Array of script URLs to load as lib-jitsi-meet "analytics handlers".
    // scriptURLs: [
    //      "libs/analytics-ga.min.js", // google-analytics
    //      "https://example.com/my-custom-analytics.js"
    // ],
},

below is the Go icon click event callback. does it means the " sendAnalytics()" is actually not working because of empty analytics setting ? if yes, I will be confused because I don’t see any code related with the Go Click event.

_onJoin() {
    const room = this.state.room || this.state.generatedRoomname;

    sendAnalytics(
        createWelcomePageEvent('clicked', 'joinButton', {
            isGenerated: !this.state.room,
            room
        }));

    if (room) {
        this.setState({ joining: true });

        // By the time the Promise of appNavigate settles, this component
        // may have already been unmounted.
        const onAppNavigateSettled
            = () => this._mounted && this.setState({ joining: false });

        this.props.dispatch(appNavigate(encodeURI(room)))
            .then(onAppNavigateSettled, onAppNavigateSettled);
    }
}

Yep, if there are no analytics handlers defined, sendAnalytics will not do anything.

The _onJoin method dispatches an action, this.props.dispatch... that action is handled by some middleware in one of the features and something else is executed… This is how it works there is a state, there are middlewares dispatching actions and there are reducers changing the state.
This is a standard architecture using react and redux, I believe.