How can I get proper JavaScript logging for Application Insights

I'm hoping that someone can answer a question of why logging occurs in one location but not in another. I am using the snippet-based-setup to enable the logging and I have two simple test logs that I entered into JavaScript that I have on the page.

$(document).ready(function () {
    RetrieveSessionData(function (d) {
        formData = d;
        var prop = { "SessionCode": getSessionCode() };
        var met = { "model risk type": formData.projectionData.modelRiskType };
        appInsights.trackEvent("ACTIONS-JS-READY", prop, met);
        appInsights.trackEvent("ACTIONS-JS-READY2", "prop", "met");
        appInsights.flush();
    });
    var properties = { "SessionCode": getSessionCode() };
    var metrics = { "metrics field": 10 };
    appInsights.trackEvent("ACTIONS-JS", properties, metrics);
    appInsights.flush();
});

The appInsights.trackEvent lines in the RetrieveSessionData function do not log anything, nor do they return any sort of error/message at all letting me know there is an issue. The one at the bottom of the script, outside of the function, does log a custom event into application insights.

What am I missing on this? I haven't found any specific examples on the proper way to do JavaScript logging inside of functions or can it not be done?

Solution

As OP said in the comment, code snippet on the Microsoft site will work.

I'm not sure, but I tested in my side, it really worked, here's my code. Did you check if your code in the parameter of RetrieveSessionData has executed?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            snippet-code-copy-from-tutorial-here
                instrumentationKey: "ceec379c-xxxxx-4296327"
            }});
        </script>
        <script src="../js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <div>this is page</div>
        <script>
            $(document).ready(function() {
                console.log("============execute===============");
                   RetrieveSessionData(function (d) {
                       formData = d;
                       var prop = { "SessionCode": "aa" };
                       var met = { "model risk type": "bbb" };
                       appInsights.trackEvent("ACTIONS-JS-READY", prop, met);
                       appInsights.trackEvent("ACTIONS-JS-READY2", "prop", "met");
                       appInsights.flush();
                   });
                
                console.log("============execute222===============");
                var properties = {
                    "SessionCode": "session_code_01"
                };
                var metrics = {
                    "metrics field": 10
                };
                appInsights.trackEvent("ACTIONS-JS", properties, metrics);
                appInsights.flush();
            });
            
            function RetrieveSessionData(func){
                func();
            }
        </script>
    </body>
</html>