Htykuut

My frontend log is full of these errors.
When I hit any undefined address I got this in my terminal (in the vscode not in the browser).
The main problem is I'm not sure how to handle errors that are caused by hitting an undefined url. For example here I know that /ca/en/category is undefined and doesn't exist but I don't know how to stop js from trying to map this undefined URL.

    error: {

  "requestedPath": "/ca/en/category", (or any other unefined address)

  "errorMessage": "Cannot read property 'map' of undefined",

  "clientIp": "::1"

}

TypeError: Cannot read property 'map' of undefined

    at Chrome.module.exports../src/components/Chrome.tsx.Chrome.render (...distserver.js:518:916)

    at processChild (...node_modulesreact-domcjsreact-dom-server.node.development.js:2207:18)

    at resolve (...node_modulesreact-domcjsreact-dom-server.node.development.js:2064:5)

    at ReactDOMServerRenderer.render (...node_modulesreact-domcjsreact-dom-server.node.development.js:2383:22)

    at ReactDOMServerRenderer.read (...react-domcjsreact-dom-server.node.development.js:2357:19)

    at Object.renderToString (...node_modulesreact-domcjsreact-dom-server.node.development.js:2729:25)

    at...distserver.js:4346:69

    at step (...node_modulestslibtslib.js:133:27)

    at Object.next (...node_modulestslibtslib.js:114:57)

    at fulfilled (...enode_modulestslibtslib.js:104:62)

and here is how I'm building addresses (for category):

    if (pathname.startsWith('/category/')) {

        const cat = menu.find(({ slug }) => pathname.startsWith('/category/' + slug));

        if (cat) {

            leftBar = cat.subcategories.map(({ name, productLines, slug: subSlug }) => ({

                title: name,

                path: `/category/${cat.slug}/${subSlug}`,

                links: productLines.map(({ name, slug }) => ({

                    title: name,

                    path: `/category/${cat.slug}/${subSlug}/${slug}`,

                })),

            }));

            leftBarTitle = cat.name;

        }

    }

and I have a server,js file and in line 518 I have:

        return _react2.default.createElement(_react2.default.Fragment, null, banner && this.state.bannerOpen ? _react2.default.createElement(_Banner2.default, { banner: banner, onClose: this.handleBannerClose }) : null, _react2.default.createElement("div", { className: classes.frame }, _react2.default.createElement(_CssBaseline2.default, null), _react2.default.createElement(_TopBar2.default, null), _react2.default.createElement("div", { className: classes.container, id: "container" }, _react2.default.createElement("div", { className: classes.content }, children), pathname.startsWith('/category') && _react2.default.createElement("div", { className: classes.leftBar }, leftBarTitle && _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Typography2.default, { variant: "headline", component: "span" }, leftBarTitle), _react2.default.createElement("p", null)), leftBar.map(function (_a, i) {

        var title = _a.title,

            path = _a.path,

            links = _a.links;

I think there shouldn't be errors like this in the terminal but I'm not sure how to handle it.

just try this code and look where you try to map undefined object

if(!cat.subcategories) console.log('not exist but i try to map')



cat.subcategories.map(({ name, productLines, slug: subSlug }) => {  

    if(!productLines) console.log('not exist but i try to map')



})`

you can validate with:

if(!cat.subcategories) return

In render you always need to return something so that's the way I solved the issue:

            if (cat) {....

        } else {

            return <Redirect to="/" />;

doing so, it will redirect me to an address and won't give me Nothing was returned from render. anymore.