How to fix this error "<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9000 to undefined [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)" #7854

JohnAdam-123 · 2024-09-25T12:48:52Z

JohnAdam-123
Sep 25, 2024

After I installed openMCT it worked well and I was able to see the project in YAMCS myproject, but ater I did some configuration with different file like index.html this error raised <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9000 to undefined [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) how do I solve this. Any help please?

Answered by ozyx

Oct 13, 2024

Hi @JohnAdam-123 ,

Apologies for the late response.

To fix this you can register your plugin prior to openmct being started. Move your plugin code from index.html to index.js like this:

import installYamcsPlugins from '../src/openmct-yamcs.js';

// Define the GreenCubeTelemetryPlugin inside the script block
function GreenCubeTelemetryPlugin() {
    return function install(openmct) {
        // Define the GreenCube telemetry type
        openmct.types.addType('greencube.telemetry', {
            name: 'GreenCube Telemetry Data',
            description: 'Telemetry data from the GreenCube modem',
            cssClass: 'icon-telemetry'
        });

        // Add a provider to fetch telemetr…

View full answer

ozyx · 2024-09-25T20:37:34Z

ozyx
Sep 25, 2024

Hi @JohnAdam-123 !

Thanks for raising this issue. I'm happy to help resolve this, but I need some more info. Are you able to share your code? Are you using the openmct-yamcs plugin with YAMCS quickstart?

5 replies

JohnAdam-123 Sep 26, 2024
Author

Yes, I am still using it. The modification I did is in index.html file only, because I want to customize it. Or perhaps i should start dealing with YAMCS first.

JohnAdam-123 Sep 26, 2024
Author

About the code... here they are

<!DOCTYPE html>
<html>
<head>
    <title>Open MCT - GreenCube Telemetry</title>
    <script src="/node_modules/openmct/dist/openmct.js"></script>
    <script src="/openmct-yamcs-example.js" defer></script>

    <!-- Link to OpenMCT favicons -->
    <link rel="icon" type="image/png" href="/node_modules/openmct/dist/favicons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/node_modules/openmct/dist/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/node_modules/openmct/dist/favicons/favicon-16x16.png" sizes="16x16">
</head>
<body>
    <script>
        // Define the GreenCubeTelemetryPlugin inside the script block
        function GreenCubeTelemetryPlugin() {
            return function install(openmct) {
                // Define the GreenCube telemetry type
                openmct.types.addType('greencube.telemetry', {
                    name: 'GreenCube Telemetry Data',
                    description: 'Telemetry data from the GreenCube modem',
                    cssClass: 'icon-telemetry'
                });

                // Add a provider to fetch telemetry data for this type
                openmct.objects.addProvider('telemetry', {
                    get: function (identifier) {
                        if (identifier.key === 'greencube.telemetry') {
                            return Promise.resolve({
                                identifier: identifier,
                                type: 'greencube.telemetry',
                                name: 'GreenCube Telemetry Data',
                                telemetry: {
                                    values: [
                                        { key: 'elevation', name: 'Elevation', units: 'deg' },
                                        { key: 'doppler', name: 'Doppler Shift', units: 'Hz' },
                                        { key: 'time', name: 'Timestamp', format: 'utc', hints: { domain: 1 } }
                                        // Add more telemetry fields if needed
                                    ]
                                }
                            });
                        }
                        return Promise.reject('Not found');
                    }
                });

                // Add a telemetry data request provider
                openmct.telemetry.addProvider({
                    supportsRequest: function (domainObject) {
                        return domainObject.type === 'greencube.telemetry';
                    },
                    request: function (domainObject, options) {
                        return fetchTelemetryData();  // Fetch telemetry data from your custom server
                    }
                });
            };
        }

        // Function to fetch telemetry data from your server
        function fetchTelemetryData() {
            return fetch('http://localhost:9000')  // Replace with your actual server endpoint, from port 1001
                .then(response => response.json())
                .then(data => {
                    return [
                        {
                            elevation: data.Elevation,
                            doppler: data.DopplerShift,
                            time: new Date(data.IrigbTimebag).getTime()
                        }
                    ];
                });
        }

        // After OpenMCT is loaded, install the GreenCubeTelemetryPlugin
        window.addEventListener('load', function () {
            openmct.install(new GreenCubeTelemetryPlugin());
        });
    </script>
</body>
</html>

I added the plugin function, let me know what's your idea.

ozyx Oct 13, 2024

Hi @JohnAdam-123 ,

Apologies for the late response.

To fix this you can register your plugin prior to openmct being started. Move your plugin code from index.html to index.js like this:

import installYamcsPlugins from '../src/openmct-yamcs.js';

// Define the GreenCubeTelemetryPlugin inside the script block
function GreenCubeTelemetryPlugin() {
    return function install(openmct) {
        // Define the GreenCube telemetry type
        openmct.types.addType('greencube.telemetry', {
            name: 'GreenCube Telemetry Data',
            description: 'Telemetry data from the GreenCube modem',
            cssClass: 'icon-telemetry'
        });

        // Add a provider to fetch telemetry data for this type
        openmct.objects.addProvider('telemetry', {
            get: function (identifier) {
                if (identifier.key === 'greencube.telemetry') {
                    return Promise.resolve({
                        identifier: identifier,
                        type: 'greencube.telemetry',
                        name: 'GreenCube Telemetry Data',
                        telemetry: {
                            values: [
                                {
                                    key: 'elevation',
                                    name: 'Elevation',
                                    units: 'deg'
                                },
                                {
                                    key: 'doppler',
                                    name: 'Doppler Shift',
                                    units: 'Hz'
                                },
                                {
                                    key: 'time',
                                    name: 'Timestamp',
                                    format: 'utc',
                                    hints: { domain: 1 }
                                }
                                // Add more telemetry fields if needed
                            ]
                        }
                    });
                }

                return Promise.reject('Not found');
            }
        });

        // Add a telemetry data request provider
        openmct.telemetry.addProvider({
            supportsRequest: function (domainObject) {
                return domainObject.type === 'greencube.telemetry';
            },
            request: function (domainObject, options) {
                return fetchTelemetryData(); // Fetch telemetry data from your custom server
            }
        });
    };
}

// Function to fetch telemetry data from your server
function fetchTelemetryData() {
    return fetch('http://localhost:9000') // Replace with your actual server endpoint, from port 1001
        .then(response => response.json())
        .then(data => {
            return [
                {
                    elevation: data.Elevation,
                    doppler: data.DopplerShift,
                    time: new Date(data.IrigbTimebag).getTime()
                }
            ];
        });
}

const config = {
    yamcsDictionaryEndpoint: "http://localhost:9000/yamcs-proxy/",
    yamcsHistoricalEndpoint: "http://localhost:9000/yamcs-proxy/",
    yamcsWebsocketEndpoint: "ws://localhost:9000/yamcs-proxy-ws/",
    yamcsUserEndpoint: "http://localhost:9000/yamcs-proxy/api/user/",
    yamcsInstance: "myproject",
    yamcsProcessor: "realtime",
    yamcsFolder: "myproject",
    throttleRate: 1000,
    // Batch size is specified in characers as there is no performant way of calculating true
    // memory usage of a string buffer in real-time.
    // String characters can be 8 or 16 bits in JavaScript, depending on the code page used.
    // Thus 500,000 characters requires up to 16MB of memory (1,000,000 * 16).
    maxBufferSize: 1000000
};
const STATUS_STYLES = {
    NO_STATUS: {
        iconClass: "icon-question-mark",
        iconClassPoll: "icon-status-poll-question-mark"
    },
    GO: {
        iconClass: "icon-check",
        iconClassPoll: "icon-status-poll-question-mark",
        statusClass: "s-status-ok",
        statusBgColor: "#33cc33",
        statusFgColor: "#000"
    },
    MAYBE: {
        iconClass: "icon-alert-triangle",
        iconClassPoll: "icon-status-poll-question-mark",
        statusClass: "s-status-warning",
        statusBgColor: "#ffb66c",
        statusFgColor: "#000"
    },
    NO_GO: {
        iconClass: "icon-circle-slash",
        iconClassPoll: "icon-status-poll-question-mark",
        statusClass: "s-status-error",
        statusBgColor: "#9900cc",
        statusFgColor: "#fff"
    }
};
const openmct = window.openmct;

(() => {
    const ONE_SECOND = 1000;
    const ONE_MINUTE = ONE_SECOND * 60;
    const THIRTY_MINUTES = ONE_MINUTE * 30;

    openmct.setAssetPath("/node_modules/openmct/dist");

    installDefaultPlugins();
    openmct.install(installYamcsPlugins(config));
    openmct.install(
        openmct.plugins.OperatorStatus({ statusStyles: STATUS_STYLES })
    );

    document.addEventListener("DOMContentLoaded", function () {
        openmct.start();
    });

    openmct.install(
        openmct.plugins.Conductor({
            menuOptions: [
                {
                    name: "Realtime",
                    timeSystem: "utc",
                    clock: "local",
                    clockOffsets: {
                        start: -THIRTY_MINUTES,
                        end: 0
                    }
                },
                {
                    name: "Fixed",
                    timeSystem: "utc",
                    bounds: {
                        start: Date.now() - THIRTY_MINUTES,
                        end: 0
                    }
                }
            ]
        })
    );

    function installDefaultPlugins() {
        openmct.install(openmct.plugins.LocalStorage());
        openmct.install(openmct.plugins.Espresso());
        openmct.install(openmct.plugins.MyItems());
        openmct.install(openmct.plugins.example.Generator());
        openmct.install(openmct.plugins.example.ExampleImagery());
        openmct.install(openmct.plugins.UTCTimeSystem());
        openmct.install(openmct.plugins.TelemetryMean());

        openmct.install(
            openmct.plugins.DisplayLayout({
                showAsView: ["summary-widget", "example.imagery", "yamcs.image"]
            })
        );
        openmct.install(openmct.plugins.SummaryWidget());
        openmct.install(openmct.plugins.Notebook());
        openmct.install(openmct.plugins.LADTable());
        openmct.install(
            openmct.plugins.ClearData([
                "table",
                "telemetry.plot.overlay",
                "telemetry.plot.stacked"
            ])
        );

        openmct.install(openmct.plugins.FaultManagement());
        openmct.install(openmct.plugins.BarChart());
        openmct.install(new GreenCubeTelemetryPlugin());
    }
})();

You might try checking out openmct-hello. It's a repository that provides an example setup for developing plugins for Open MCT. Good luck! Let us know if you run into any other issues.

Answer selected by davetsay

JohnAdam-123 Oct 17, 2024
Author

Okay, I'll. But how can I be able to display the packets that are captured of telemetry into yamcs web interface. Any ideas, please!!

davetsay Apr 1, 2025
Collaborator

Hi @JohnAdam-123 , sorry for the delay in response.

Was @ozyx 's suggestion able to resolve your issue?

Regarding your follow up question,

But how can I be able to display the packets that are captured of telemetry into yamcs web interface. Any ideas, please!!

Are you trying to display data from your YAMCS server in Open MCT, and are having difficulties with your telemetry dictionary?
Or are you trying to actually use the YAMCS UI in some way in conjunction with Open MCT?

JohnAdam-123 · 2025-04-10T18:14:24Z

JohnAdam-123
Apr 10, 2025
Author

Yes… I was using OPENMCT for display of whats going on from the Yamcs Server, so I was not able to connect the two. Regards, J. M. Adam

…

On Tue, Apr 1, 2025 at 7:57 PM David Tsay ***@***.***> wrote: Hi @JohnAdam-123 <https://github.com/JohnAdam-123> , sorry for the delay in response. Was @ozyx <https://github.com/ozyx> 's suggestion able to resolve your issue? Regarding your follow up question, But how can I be able to display the packets that are captured of telemetry into yamcs web interface. Any ideas, please!! Are you trying to display data from your YAMCS server in Open MCT, and are having difficulties with your telemetry dictionary? Or are you trying to actually use the YAMCS UI in some way in conjunction with Open MCT? — Reply to this email directly, view it on GitHub <#7854 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6MHT445F5XRXAGD5X6VBET2XLANZAVCNFSM6AAAAABO2O433GVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRZGEZDCNQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

1 reply

davetsay Apr 16, 2025
Collaborator

Can you provide the code that you are having issues with?

JohnAdam-123 · 2025-04-17T10:23:49Z

JohnAdam-123
Apr 17, 2025
Author

Though I have stopped working on that project, since January. When I get time for it, I’ll consider that. Regards, J. M. Adam

…

On Thu, Apr 17, 2025 at 2:02 AM David Tsay ***@***.***> wrote: Can you provide the code that you are having issues with? — Reply to this email directly, view it on GitHub <#7854 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6MHT4ZZFIFZMQE26AODQLD2Z3OOXAVCNFSM6AAAAABO2O433GVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOBWGA2DGMI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

1 reply

davetsay Apr 21, 2025
Collaborator

Thanks for the update, @JohnAdam-123 . I'll mark this conversation as closed. Feel free to reach out again if you have any more issues, or pick up work on this project again in the future.

How to fix this error "<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9000 to undefined [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)" #7854

Uh oh!

JohnAdam-123 Sep 25, 2024

Replies: 3 comments · 7 replies

Uh oh!

ozyx Sep 25, 2024

Uh oh!

JohnAdam-123 Sep 26, 2024 Author

Uh oh!

Uh oh!

JohnAdam-123 Sep 26, 2024 Author

Uh oh!

ozyx Oct 13, 2024

Uh oh!

JohnAdam-123 Oct 17, 2024 Author

Uh oh!

davetsay Apr 1, 2025 Collaborator

Uh oh!

JohnAdam-123 Apr 10, 2025 Author

Uh oh!

davetsay Apr 16, 2025 Collaborator

Uh oh!

JohnAdam-123 Apr 17, 2025 Author

Uh oh!

davetsay Apr 21, 2025 Collaborator

JohnAdam-123
Sep 25, 2024

Replies: 3 comments 7 replies

ozyx
Sep 25, 2024

JohnAdam-123 Sep 26, 2024
Author

JohnAdam-123 Sep 26, 2024
Author

JohnAdam-123 Oct 17, 2024
Author

davetsay Apr 1, 2025
Collaborator

JohnAdam-123
Apr 10, 2025
Author

davetsay Apr 16, 2025
Collaborator

JohnAdam-123
Apr 17, 2025
Author

davetsay Apr 21, 2025
Collaborator