Application Error when adding react-qr-reader package to React app in Azure App Service

Question

Application Error when adding react-qr-reader package to React app in Azure App Service

Neha Moradia 5

I encountered an Application Error when adding the "react-qr-reader" package to a React app in an Azure App Service. Initially, I deployed the app successfully with the "SCM_DO_BUILD_DURING_DEPLOYMENT" variable set in the Azure app settings. However, after adding the "react-qr-reader" package, the pipeline failed with the error message "Failed to deploy web package to App Service."

To fix the pipeline error, I removed the "SCM_DO_BUILD_DURING_DEPLOYMENT" variable and set "WEBSITE_RUN_FROM_PACKAGE" in the Azure app service app settings. This resolved the pipeline issue, but I still cannot access the web app, and it's giving an Application Error, which I have included a screenshot of.

This only happens when the barcode-related packages are added. I checked the logs in Azure log stream and enabled Application Insights, but I'm still unable to find the root cause of the issue. Please check attached Log.txt

Can someone help me fix this issue or provide guidance on how to debug it? I have attached a screenshot of the error message, logs, and information on what I have already tried.

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-03T11:57:53.14+00:00

Based on my understanding your issue, if you haven't done this already, please try this and let me know:

For React deployments is recommended to modify the default template with the following recommendations ( docs below):

React Deployment on App Service Linux
React deployment on App Service Windows

By default, if your container does not respond after 230 seconds, it will time out. (This time out can be increased by with the WEBSITES_CONTAINER_START_TIME_LIMIT app setting.) (up to a maximum of 1800)

Kindly let us know how it goes, I'll also follow-up with you privately to get more details about your Webapp.
Prateek Shrivastava 0 Reputation points

2024-04-04T10:22:56.14+00:00

Issue is not solved after increasing the timeout as well.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-04T13:44:33.2966667+00:00

Prateek, based on my understanding from your above comment, Neha Moradia (question author) and you maybe working on this same Webapp resource or kindly let me know if this is not related. I had also reached to Neha Moradia privately to receive more info about the WebApp resource.

I understand the issue only occurs when the barcode-related packages are added, is this confined to 0.1.3 and 3.0.0-beta-1?

Based on the error message " ERROR - Container my_webapp_0_ea200b69 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging" in the log file shared.

Adding a startup script into the equation - one that reinstalls packages, rebuilds, compiles, or others - at runtime, which gets executed on each container start - adds even more time. Regardless though, even for small applications, this can cause increased startup times.

To isolate the issue/if possible, the solution would be to move the logic contained in this, to more appropriate parts of development. Such as into the build itself, or into a post or pre deployment script.

As an example: Long start times using npm (or yarn) install, build, etc. in startup scripts
Ref: Troubleshooting ‘Container didnt respond to HTTP pings on port, failing site start’
Neha Moradia 5 Reputation points

2024-04-05T08:21:54.3333333+00:00

@ajkuma thanks for your response.

Unfortunately, the solutions you mentioned didn't work. Later on, we observed whenever we use "react-qr-reader" with react app it works as we expected. But when I create simple next-app and add "react-qr-reader" it doesn't work and always shows next:not found in App service log stream.
Instead using "react-qr-reader" I have tried with next-qrcode . However, it is stucked at the same error "next:not found". Based on this observation I can conclude that we are having issue in finding next while adding qr code package.

Could you Please help with the issue?
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-05T12:10:00.42+00:00

Thanks for sharing additional info. Based on the error message you are seeing, it seems like there might be an issue with the routing configuration of your Next.js app.

When you add a new package to your Next.js app, it's possible that the package might be using a different version of React or other dependencies that are not compatible with your app. This may cause issues with the routing configuration and result in the "next:not found" error.

If you haven't done, please check the routing configuration of your Next.js app. Ensure that all the routes are correctly defined and that there are no conflicts with the routes used by the "react-qr-reader" package.

If it's fine, could you please share your webapp name here or privately? ( for a deeper investigation).
Prateek Shrivastava 0 Reputation points

2024-04-08T11:37:00.7266667+00:00

Thanks for the help. But still we are struggling to fix this. Please let us know how to share webapp name privately?
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-08T18:50:42.69+00:00

Prateek, I had initiated a private conversation (Q&A doc) with @Neha Moradia who had created this thread.

Your answer

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-03T11:57:53.14+00:00

Based on my understanding your issue, if you haven't done this already, please try this and let me know:

For React deployments is recommended to modify the default template with the following recommendations ( docs below):

React Deployment on App Service Linux
React deployment on App Service Windows

By default, if your container does not respond after 230 seconds, it will time out. (This time out can be increased by with the WEBSITES_CONTAINER_START_TIME_LIMIT app setting.) (up to a maximum of 1800)

Kindly let us know how it goes, I'll also follow-up with you privately to get more details about your Webapp.
Prateek Shrivastava 0 Reputation points

2024-04-04T10:22:56.14+00:00

Issue is not solved after increasing the timeout as well.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-04T13:44:33.2966667+00:00

Prateek, based on my understanding from your above comment, Neha Moradia (question author) and you maybe working on this same Webapp resource or kindly let me know if this is not related. I had also reached to Neha Moradia privately to receive more info about the WebApp resource.

I understand the issue only occurs when the barcode-related packages are added, is this confined to 0.1.3 and 3.0.0-beta-1?

Based on the error message " ERROR - Container my_webapp_0_ea200b69 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging" in the log file shared.

Adding a startup script into the equation - one that reinstalls packages, rebuilds, compiles, or others - at runtime, which gets executed on each container start - adds even more time. Regardless though, even for small applications, this can cause increased startup times.

To isolate the issue/if possible, the solution would be to move the logic contained in this, to more appropriate parts of development. Such as into the build itself, or into a post or pre deployment script.

As an example: Long start times using npm (or yarn) install, build, etc. in startup scripts
Ref: Troubleshooting ‘Container didnt respond to HTTP pings on port, failing site start’
Neha Moradia 5 Reputation points

2024-04-05T08:21:54.3333333+00:00

@ajkuma thanks for your response.

Unfortunately, the solutions you mentioned didn't work. Later on, we observed whenever we use "react-qr-reader" with react app it works as we expected. But when I create simple next-app and add "react-qr-reader" it doesn't work and always shows next:not found in App service log stream.
Instead using "react-qr-reader" I have tried with next-qrcode . However, it is stucked at the same error "next:not found". Based on this observation I can conclude that we are having issue in finding next while adding qr code package.

Could you Please help with the issue?
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-05T12:10:00.42+00:00

Thanks for sharing additional info. Based on the error message you are seeing, it seems like there might be an issue with the routing configuration of your Next.js app.

When you add a new package to your Next.js app, it's possible that the package might be using a different version of React or other dependencies that are not compatible with your app. This may cause issues with the routing configuration and result in the "next:not found" error.

If you haven't done, please check the routing configuration of your Next.js app. Ensure that all the routes are correctly defined and that there are no conflicts with the routes used by the "react-qr-reader" package.

If it's fine, could you please share your webapp name here or privately? ( for a deeper investigation).
Prateek Shrivastava 0 Reputation points

2024-04-08T11:37:00.7266667+00:00

Thanks for the help. But still we are struggling to fix this. Please let us know how to share webapp name privately?
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-08T18:50:42.69+00:00

Prateek, I had initiated a private conversation (Q&A doc) with @Neha Moradia who had created this thread.

Share via

Application Error when adding react-qr-reader package to React app in Azure App Service

Your answer