API integration with React.js

Thank you for this. I just switched to the development version and everything cleared up and was just trying to set up the view using the example from the codepen and I just started getting a cors error. it seems some security was set on the development version.

here is the error incase

DOMException: Blocked a frame with origin "myUrl" from accessing a cross-origin frame.

Please post the full browser console log

sure here it is

backend.js:1 DOMException: Blocked a frame with origin "https://myURL" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at a.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1098:418)
    at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1107:467)
    at module$src$app$ViewerApp.default.getSettings (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1154:438)
    at module$src$app$ViewerApp.default.module$src$app$partials$ViewerAppParameterManager.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1834:170)
    at new module$src$app$ViewerApp.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2878:396)
    at new ParametricViewer$$module$build$package.ParametricViewer (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2896:382)
    at t.value (https://myURL/static/js/main.4eaf073f.chunk.js:1:40265)
    at qo (https://myURL/static/js/2.91193c0b.chunk.js:1:1165568)
    at Ho (https://myURL/static/js/2.91193c0b.chunk.js:1:1168244)
r @ backend.js:1
fo @ react-dom.production.min.js:4408
n.callback @ react-dom.production.min.js:4773
ro @ react-dom.production.min.js:4271
no @ react-dom.production.min.js:4257
qo @ react-dom.production.min.js:4999
Ho @ react-dom.production.min.js:5123
(anonymous) @ react-dom.production.min.js:5975
t.unstable_runWithPriority @ scheduler.production.min.js:274
Ps @ react-dom.production.min.js:5974
As @ react-dom.production.min.js:5958
js @ react-dom.production.min.js:5925
_s @ react-dom.production.min.js:5860
Zo @ react-dom.production.min.js:5787
Ms @ react-dom.production.min.js:6077
Fs @ react-dom.production.min.js:6085
Us.render @ react-dom.production.min.js:6276
(anonymous) @ react-dom.production.min.js:6360
Ns @ react-dom.production.min.js:6007
Vs @ react-dom.production.min.js:6359
render @ react-dom.production.min.js:6390
(anonymous) @ index.js:14
Promise.then (async)
1085 @ index.js:13
f @ model:1
496 @ serviceWorker.js:132
f @ model:1
a @ model:1
e @ model:1
(anonymous) @ main.4eaf073f.chunk.js:1
CopyManager.js:33 Uncaught (in promise) DOMException: Blocked a frame with origin "https://myURL" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at a.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1098:418)
    at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1107:467)
    at module$src$app$ViewerApp.default.getSettings (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1154:438)
    at module$src$app$ViewerApp.default.module$src$app$partials$ViewerAppParameterManager.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1834:170)
    at new module$src$app$ViewerApp.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2878:396)
    at new ParametricViewer$$module$build$package.ParametricViewer (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2896:382)
    at t.value (https://myURL/static/js/main.4eaf073f.chunk.js:1:40265)
    at qo (https://myURL/static/js/2.91193c0b.chunk.js:1:1165568)
    at Ho (https://myURL/static/js/2.91193c0b.chunk.js:1:1168244)

We will need a full minimal code example to understand what’s going on here. I am pretty sure that this problem is not caused by our viewer. Some questions related to this:

  • What is myURL? A local alias for the loopback address 127.0.0.1?
  • The error message suggests that you are using an iframe. What for?
  • Can you make your example available on Codepen or Jsfiddle?

Thanks very much for all the help.

  • The myURL was just an identifier I was trying to use to show that the url of the site was there. Because I am actually testing on a live site and not allowed to show the url publicly for now.

Once you confirmed that it was not a block from your end I began full debugging of the entire codebase and I finally got the issue. It was due to the stripe library that is also been used in this application there seems to be a sort of clash between the two libraries am guessing this is because they are both adding some frames or embedding something in the app.

So once I removed that I was able to get the model to show up. I am still looking for a workaround for the stripe library because I need the both libraries in the app but glad I was able to pin point where my own issue was coming from.

Thanks once again for the codepen and the update to the library really helped to get this solved.

FYI we release version 2.16.0 of the ShapeDiver Viewer, which includes support for React, the codepen has been updated to use this released version instead of development: https://codepen.io/ShapeDiver/pen/oNvoBxb

@snabela, thanks for this snippet, it works well. However, I tried to implement it with a function component instead of a class component in React. There was a bug on my side and accidentally too many requests have been sent to the SD server and got an 429 response as too many requests. The response doesn’t include a Retry-after header and I wonder how much time should I wait until try again? Thank you and sorry for the overload :wink:

@Balazs_Kisfali please try again after a typical Grasshopper computation time of your model, we will add the Retry-After header to one of our next releases.

@snabela thank you, …after an hour or so it worked perfectly.

Forgot to tell you, we have two types of rate limits:

  1. Opening new sessions (that’s the one you ran into, 1 hour window, 15min precision)
  2. Model computation queue, per model (I thought you were running into this one, but obviously not)

The Retry-After header will make it easy to distinguish between these two cases.