Web Client Extension Error - React App

[christine_01]

Hey everyone,

I have created a React App for the purpose of deploying it on the Web Client. I followed the instructions on SAPs documentation "How to Develop Web Client Extensions" in order to package and deploy it. However when I click on its tile in the web client I get the following error:

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Oct 17 11:38:02 EEST 2023There was an unexpected error (type=Not Found, status=404).
Any ideas on what I should look out for in my code in order to troubleshoot it?
Thank you in advance.

[andy_bai]

the expected url should be something like below:

GET https://centrix-sapcy:4443/extn/ui-static/22028/my-react-app/index.html

Not sure if there is something wrong with your mtar package.

Maybe you can send it to me.

[christine_01]

Indeed, there was an issue with my WebClientExtension.json
Now it looks like this:

{
  "tiles": [
    {
      "text": "react-app-webclient",
      "icon": "sap-icon://activity-items",
      "url": "index.html",
      "subtitle": "Activity and Service Call Manager Extension",
      "size": "1x1"
    }
  ]
}

However the issue now is that when I click the extension tile I get this error displayed

Unexpected Application Error!

404 Not Found

and the only errors in the console when I click on the tile are these two

jquery-dbg.js:9269

GET https://centrix-sapcy:4443/webx/apps/boEXTENSION/i18n/i18n_en.properties 404 (Not Found)

jquery-dbg.js:9269

GET https://centrix-sapcy:4443/webx/~1684179293907~/apps/boEXTENSION/i18n/i18n.properties 404 (Not Found)

All the requests regarding my-react-app return status 200

Thank you

[andy_bai]

the above two requests seem to have nothing to do with your react app.

are there any other requests having 404 error?

[christine_01]

Hi,

These two along with this one show up when I click on the Extension Tile

Container.controller.js?eval:1
GET https://centrix-sapcy:4443/extn/ui-static/22028/my-react-app// 404 (Not Found)

Let me know if you want me to provide any info from the Network panel from the browser.

Thank you

[andy_bai]

Could you go to the browser development console, and find out which request has the 404 error?

[christine_01]

jquery-dbg.js:9269

GET https://centrix-sapcy:4443/webx/apps/boEXTENSION/i18n/i18n_en.properties 404 (Not Found)

jquery-dbg.js:9269

GET https://centrix-sapcy:4443/webx/~1684179293907~/apps/boEXTENSION/i18n/i18n.properties 404 (Not Found)

Thank you for your answer!