Error while connecting local UI to Sandbox with persistance layer

I created a local persistence for Sandbox

daml sandbox .daml\dist*.dar --sql-backend-jdbcurl “jdbc:postgresql://localhost/postgres?user=postgres&password=password”

I startup the daml json-api

daml json-api --ledger-host localhost --ledger-port 6865 --http-port 7575 --max-inbound-message-size 4194304 --package-reload-interval 5s --application-id HTTP-JSON-API-Gateway --static-content “prefix=static,directory=./static-content” --query-store-jdbc-config “driver=org.postgresql.Driver,url=jdbc:postgresql://localhost:5432/postgres?&ssl=true,user=postgres,password=password,createSchema=false”

when connecting my local UI via
yarn start

In the Dev Console I also see the following errors pop-up

1. When accessing the Default.js page

Uncaught (in promise) {kind: “DecoderError”, input: undefined, at: “input”, message: “expected an array, got undefined”}at: "input"input: undefinedkind: "DecoderError"message: "expected an array, got undefined"proto: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()arguments: (…)caller: (…)length: 1name: "hasOwnProperty"proto: ƒ ()[[Scopes]]: Scopes[0]isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()defineGetter: ƒ defineGetter()defineSetter: ƒ defineSetter()lookupGetter: ƒ lookupGetter()lookupSetter: ƒ lookupSetter()get proto: ƒ proto()set proto: ƒ proto()
rejected @ hooks.js:19
Promise.then (async)
step @ hooks.js:20
(anonymous) @ hooks.js:21
push…/node_modules/@daml/react/hooks.js.__awaiter @ hooks.js:17
load @ hooks.js:97
(anonymous) @ hooks.js:110
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

1. When accessing the Report.JS i receive some different errors:

react_devtools_backend.js:6 Ledger.streamQuery warnings {warnings: {…}}warnings: unknownTemplateIds: Array(1)0: "afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network"length: 1__proto__: Array(0)proto: Object__proto__: Object
r @ react_devtools_backend.js:6
(anonymous) @ index.js:486
index.js:1 Ledger.streamQuery errors {errors: Array(1), status: 400}
console. @ index.js:1
r @ react_devtools_backend.js:6
(anonymous) @ index.js:489
index.js:1 useStreamQuery: web socket closed {code: 1000, reason: “”}
console. @ index.js:1
r @ react_devtools_backend.js:6
(anonymous) @ hooks.js:166
emit @ events.js:152
(anonymous) @ index.js:499

Below are the 2 records from my Postgress database in the “contracts” Table

id",“transaction_id”,“workflow_id”,“package_id”,“name”,“create_offset”,“archive_offset”,“key”,“create_event_id”
“003a71dddb22b58607a4722589504b741ebd97396c177ac47f3426dadac16aedc4”,“0A2465356666353663662D343734382D336262382D383761622D623331626562396563313266”,“5a518e907a912626”,“546e6d7a4b4607857f4bd77321abedd1b04ea08d822767e85a49faabe493b88b”,“Main:HealthClinicInvitation”,“binary data”,NULL,NULL,“#0A2465356666353663662D343734382D336262382D383761622D623331626562396563313266:0”
“00933e38b94e802c2564ed27e5ea71f7128ba6c971fc95bd193cbff2af084a0b1f”,“0A2434326537313465392D353461342D336263652D613531322D623065653262343236343664”,NULL,“546e6d7a4b4607857f4bd77321abedd1b04ea08d822767e85a49faabe493b88b”,“Main:Network”,“binary data”,NULL,NULL,“#0A2434326537313465392D353461342D336263652D613531322D623065653262343236343664:0”

Any suggestion for a resolution ?

When I connect the default Navigator to the Sandbox (with persistence), Templates and Contracts are displaying correctly

If you get unknownTemplateIds errors it’s almost always the case that your generated JS code is out of sync (has a different package ID) with your compiled DAML model. Try to resolve it with the answers suggested here: Sample React code for displaying all the templates and Contracts for a DAML Model

Also, make sure to restart your UI server after following the steps.

Thanks. Will give it a try