This post is older than 2 years and might not be relevant anymore
More Info: Consider searching for newer posts

cat tracker app v9.0.13 whitescreen

Hey all!

Today I tested the Asset Tracker App V2 (NCS v1.6.0) with the AWS implementation of the Cat Tracker App.

The rollout was totally fine at the end, and also the App worked well in the beginning: I could register, I could log in, I saw my Thingy device, all the details (modemfirmware, etc), at first there was no historical data, but after a few minutes I also see the charts for all of the tracked values. But after another few minutes, out of nowhere the detail view of the cat (url xxxxxx.cloudfront.net/cat/imei) became a white screen. When reloading it after a few mili seconds, also only a white screen is displayed. 

I have rolled out everything in aws region eu-central-1

The other urls (e.g. xxxxxx.cloudfront.net/cats, url xxxxxx.cloudfront.net/cats-on-map, xxxxxx.cloudfront.net/about) and also the help works fine.
This happens with

Chrome Version 91.0.4472.114, Firefox 88.0.1 and Safari Version 14.1.1 on a MacOs Big Sur 11.4 

Any suggestions where to start to repair the app or database connection or a hint what the error could be or how I could find it would be totally awesome!

Thanks a lot in Advance & have a nice weekend!

Best regards
Rudolph

Parents
  • In the browser console I got the following error's:

    Invalid LatLng object

    Invalid LatLng object: (undefined, undefined)
    at new V (LatLng.js:32)
    at j (LatLng.js:123)
    at e.initialize (Map.js:153)
    at new e (Class.js:22)
    at MapContainer.js:10
    at Ii (react-dom.production.min.js:262)
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at $l (react-dom.production.min.js:122)
    at Oi (react-dom.production.min.js:261)
    at vi (react-dom.production.min.js:243)
    uu @ react-dom.production.min.js:216
    

    Failed to load resource: the server responded with a status of 400 () 

    XXXXXXXXXX.execute-api.REGION.amazonaws.com/.../cell

    {
        "type":"BadRequest",
        "message":"Validation failed!",
        "detail":[
                    {
                        "instancePath":"/nw",
                        "schemaPath":"#/properties/nw/enum",
                        "keyword":"enum",
                        "params":{
                                    "allowedValues":["ltem","nbiot"]
                                  },
                        "message":"must be equal to one of the allowed values"
                    }
                ]
    }

    geolocateCell

    [geolocateCell]
    Response
        body: (...)
        bodyUsed: false
        headers: Headers
            __proto__: Headers append: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ Headers()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Headers"__proto__: Object
        ok: false
        redirected: false
        status: 400
        statusText: ""
        type: "cors"
        url: "https://XXXXXXXX.execute-api.REGION.amazonaws.com/2020-10-26/cell?area=XXXX&mccmnc=XXXXXX&cell=XXXXXXX"
        __proto__: ResponsearrayBuffer: ƒ arrayBuffer()blob: ƒ blob()body: (...)bodyUsed: (...)clone: ƒ clone()formData: ƒ formData()headers: (...)json: ƒ json()ok: (...)redirected: (...)status: (...)statusText: (...)text: ƒ text()type: (...)url: (...)constructor: ƒ Response()Symbol(Symbol.toStringTag): "Response"get body: ƒ body()get bodyUsed: ƒ bodyUsed()get headers: ƒ headers()get ok: ƒ ok()get redirected: ƒ redirected()get status: ƒ status()get statusText: ƒ statusText()get type: ƒ type()get url: ƒ url()__proto__: Object
    (anonymous) @ geolocateCell.ts:67

    Failed to load resource: the server responded with a status of 404 (Not Found)

    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" type="image/svg+xml" href="https://XXXXXXXXXX.cloudfront.net/favicon.svg"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-XXXXXXX" crossorigin="anonymous"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css" integrity="sha512-XXXXXXX" crossorigin="anonymous"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#00A9CE"/><link rel="manifest" href="https://XXXXXXXXXX.cloudfront.net/manifest.json"/><meta name="application-name" content="Cat Tracker"/>
        <meta name="msapplication-TileColor" content="#00A9CE"/><title>Cat Tracker</title><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-XXXXXXXXX" crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XXXXXX" crossorigin=""></script>
        <link rel="stylesheet" href="https://rsms.me/inter/inter-ui.css" crossorigin=""/>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script>!function(e){function t(t){for(var n,o,u=t[0],i=t[1],f=t[2],l=0,d=[];l<u.length;l++)o=u[l],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&d.push(a[o][0]),a[o]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(s&&s(t);d.length;)d.shift()();return c.push.apply(c,f||[]),r()}function r(){for(var e,t=0;t<c.length;t++){for(var r=c[t],n=!0,o=1;o<r.length;o++){var i=r[o];0!==a[i]&&(n=!1)}n&&(c.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={3:0},a={3:0},c=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{5:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({4:"xlsx"}[e]||e)+"."+{0:"31d6cfe0",1:"31d6cfe0",4:"31d6cfe0",5:"057e68f0",6:"31d6cfe0",7:"31d6cfe0",8:"31d6cfe0",10:"31d6cfe0",11:"31d6cfe0",12:"31d6cfe0"}[e]+".chunk.css",a=u.p+n,c=document.getElementsByTagName("link"),i=0;i<c.length;i++){var f=(s=c[i]).getAttribute("data-href")||s.getAttribute("href");if("stylesheet"===s.rel&&(f===n||f===a))return t()}var l=document.getElementsByTagName("style");for(i=0;i<l.length;i++){var s;if((f=(s=l[i]).getAttribute("data-href"))===n||f===a)return t()}var d=document.createElement("link");d.rel="stylesheet",d.type="text/css",d.onload=t,d.onerror=function(t){var n=t&&t.target&&t.target.src||a,c=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");c.code="CSS_CHUNK_LOAD_FAILED",c.request=n,delete o[e],d.parentNode.removeChild(d),r(c)},d.href=a,document.getElementsByTagName("head")[0].appendChild(d)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var c,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+"static/js/"+({4:"xlsx"}[e]||e)+"."+{0:"1f887622",1:"74114f7c",4:"fdddab8d",5:"bd8b30d1",6:"4433f877",7:"173ec54c",8:"3168a4a9",10:"632f44d6",11:"36c64f79",12:"6081ce48"}[e]+".chunk.js"}(e);var f=new Error;c=function(t){i.onerror=i.onload=null,clearTimeout(l);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",f.name="ChunkLoadError",f.type=n,f.request=o,r[1](f)}a[e]=void 0}};var l=setTimeout((function(){c({type:"timeout",target:i})}),12e4);i.onerror=i.onload=c,document.head.appendChild(i)}return Promise.all(t)},u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="https://XXXXXXXX.cloudfront.net/",u.oe=function(e){throw console.error(e),e};var i=this["webpackJsonp@nordicsemiconductor/asset-tracker-cloud-app"]=this["webpackJsonp@nordicsemiconductor/asset-tracker-cloud-app"]||[],f=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var s=f;r()}([])
        </script>
        <script src="https://XXXXXXXX.cloudfront.net/static/js/9.421e14dc.chunk.js"></script>
        <script src="https://XXXXXXXX.cloudfront.net/static/js/main.705e0453.chunk.js"></script>
    </body>

    So it seems it is not working, cause the Device is not sending GPS Data?
    I tried it indoors at first.

    I will try it outdoors and have a look if it will help with the white screen.
    But there should be a way to not trigger the NordicAPI when there are no Long/Lat values, or I am wrong? I am not really into the application and the details at the moment.

    Best regards. Rudolph

Reply
  • In the browser console I got the following error's:

    Invalid LatLng object

    Invalid LatLng object: (undefined, undefined)
    at new V (LatLng.js:32)
    at j (LatLng.js:123)
    at e.initialize (Map.js:153)
    at new e (Class.js:22)
    at MapContainer.js:10
    at Ii (react-dom.production.min.js:262)
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at $l (react-dom.production.min.js:122)
    at Oi (react-dom.production.min.js:261)
    at vi (react-dom.production.min.js:243)
    uu @ react-dom.production.min.js:216
    

    Failed to load resource: the server responded with a status of 400 () 

    XXXXXXXXXX.execute-api.REGION.amazonaws.com/.../cell

    {
        "type":"BadRequest",
        "message":"Validation failed!",
        "detail":[
                    {
                        "instancePath":"/nw",
                        "schemaPath":"#/properties/nw/enum",
                        "keyword":"enum",
                        "params":{
                                    "allowedValues":["ltem","nbiot"]
                                  },
                        "message":"must be equal to one of the allowed values"
                    }
                ]
    }

    geolocateCell

    [geolocateCell]
    Response
        body: (...)
        bodyUsed: false
        headers: Headers
            __proto__: Headers append: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ Headers()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Headers"__proto__: Object
        ok: false
        redirected: false
        status: 400
        statusText: ""
        type: "cors"
        url: "https://XXXXXXXX.execute-api.REGION.amazonaws.com/2020-10-26/cell?area=XXXX&mccmnc=XXXXXX&cell=XXXXXXX"
        __proto__: ResponsearrayBuffer: ƒ arrayBuffer()blob: ƒ blob()body: (...)bodyUsed: (...)clone: ƒ clone()formData: ƒ formData()headers: (...)json: ƒ json()ok: (...)redirected: (...)status: (...)statusText: (...)text: ƒ text()type: (...)url: (...)constructor: ƒ Response()Symbol(Symbol.toStringTag): "Response"get body: ƒ body()get bodyUsed: ƒ bodyUsed()get headers: ƒ headers()get ok: ƒ ok()get redirected: ƒ redirected()get status: ƒ status()get statusText: ƒ statusText()get type: ƒ type()get url: ƒ url()__proto__: Object
    (anonymous) @ geolocateCell.ts:67

    Failed to load resource: the server responded with a status of 404 (Not Found)

    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" type="image/svg+xml" href="https://XXXXXXXXXX.cloudfront.net/favicon.svg"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-XXXXXXX" crossorigin="anonymous"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css" integrity="sha512-XXXXXXX" crossorigin="anonymous"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#00A9CE"/><link rel="manifest" href="https://XXXXXXXXXX.cloudfront.net/manifest.json"/><meta name="application-name" content="Cat Tracker"/>
        <meta name="msapplication-TileColor" content="#00A9CE"/><title>Cat Tracker</title><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-XXXXXXXXX" crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XXXXXX" crossorigin=""></script>
        <link rel="stylesheet" href="https://rsms.me/inter/inter-ui.css" crossorigin=""/>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script>!function(e){function t(t){for(var n,o,u=t[0],i=t[1],f=t[2],l=0,d=[];l<u.length;l++)o=u[l],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&d.push(a[o][0]),a[o]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(s&&s(t);d.length;)d.shift()();return c.push.apply(c,f||[]),r()}function r(){for(var e,t=0;t<c.length;t++){for(var r=c[t],n=!0,o=1;o<r.length;o++){var i=r[o];0!==a[i]&&(n=!1)}n&&(c.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={3:0},a={3:0},c=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{5:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({4:"xlsx"}[e]||e)+"."+{0:"31d6cfe0",1:"31d6cfe0",4:"31d6cfe0",5:"057e68f0",6:"31d6cfe0",7:"31d6cfe0",8:"31d6cfe0",10:"31d6cfe0",11:"31d6cfe0",12:"31d6cfe0"}[e]+".chunk.css",a=u.p+n,c=document.getElementsByTagName("link"),i=0;i<c.length;i++){var f=(s=c[i]).getAttribute("data-href")||s.getAttribute("href");if("stylesheet"===s.rel&&(f===n||f===a))return t()}var l=document.getElementsByTagName("style");for(i=0;i<l.length;i++){var s;if((f=(s=l[i]).getAttribute("data-href"))===n||f===a)return t()}var d=document.createElement("link");d.rel="stylesheet",d.type="text/css",d.onload=t,d.onerror=function(t){var n=t&&t.target&&t.target.src||a,c=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");c.code="CSS_CHUNK_LOAD_FAILED",c.request=n,delete o[e],d.parentNode.removeChild(d),r(c)},d.href=a,document.getElementsByTagName("head")[0].appendChild(d)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var c,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+"static/js/"+({4:"xlsx"}[e]||e)+"."+{0:"1f887622",1:"74114f7c",4:"fdddab8d",5:"bd8b30d1",6:"4433f877",7:"173ec54c",8:"3168a4a9",10:"632f44d6",11:"36c64f79",12:"6081ce48"}[e]+".chunk.js"}(e);var f=new Error;c=function(t){i.onerror=i.onload=null,clearTimeout(l);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",f.name="ChunkLoadError",f.type=n,f.request=o,r[1](f)}a[e]=void 0}};var l=setTimeout((function(){c({type:"timeout",target:i})}),12e4);i.onerror=i.onload=c,document.head.appendChild(i)}return Promise.all(t)},u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="https://XXXXXXXX.cloudfront.net/",u.oe=function(e){throw console.error(e),e};var i=this["webpackJsonp@nordicsemiconductor/asset-tracker-cloud-app"]=this["webpackJsonp@nordicsemiconductor/asset-tracker-cloud-app"]||[],f=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var s=f;r()}([])
        </script>
        <script src="https://XXXXXXXX.cloudfront.net/static/js/9.421e14dc.chunk.js"></script>
        <script src="https://XXXXXXXX.cloudfront.net/static/js/main.705e0453.chunk.js"></script>
    </body>

    So it seems it is not working, cause the Device is not sending GPS Data?
    I tried it indoors at first.

    I will try it outdoors and have a look if it will help with the white screen.
    But there should be a way to not trigger the NordicAPI when there are no Long/Lat values, or I am wrong? I am not really into the application and the details at the moment.

    Best regards. Rudolph

Children
No Data
Related