PowerApps Portal Generic Error Feedback from Portal User

As we all know that whenever there is a server error on the PowerApps Portals we only see a generic error message. Which looks like

There is a method of logging errors from the portal using Azure blob Storage, but this is something that I won’t be discussing today. I will be going ahead and asking for more information for the error on the portal from the Portal User actually experiencing it. Let’s see how we can achieve this thing.

We can create Portal Generic Error in Content snippet to add custom text or information for the error message, but it is hard to get entity forms added using Content Snippet or any other HTML to be created using any bootstrap or custom css on this page. The only CSS that you get on this page is from the index page which highlights the h1 tag with bold and red color and everything that you add goes into the div with class dialog.

I have made use of JavaScript to change HTML content and have added an entity form asking Portal User to submit an error report as per the screenshot below. Some random 500 error message is added to this error page using image added in the webfile.

When a server error appears now the page will render the following:

When you click on  I would like to send more information with this error 

It will open the iframe embedding using JavaScript wich is actually an entity form of the custom entity.

The Entity form looks like this

Now in CRM we have a new Portal Troubleshoot record created (Entity name is Portal Troubleshoot)

And Using the entity form metadata just save the name field to current logged in the users email address

Content Snippet Code

<style>

    h1 {

        color: red;

        font-weight: bold

    }

</style>

<a href="~/"><img alt=""

        src="PORTALURL/giphy2.gif" style="width: 425px; height: 284px;"></a>

<script>

    var styles = "@import url('PORTALURL/bootstrap.min.css');";

    var importCSS = document.createElement('link');

    importCSS.rel = 'stylesheet';

    importCSS.href = 'data:text/css,' + escape(styles);

    document.getElementsByTagName("head")[0].appendChild(importCSS);

    var portalErrorReportDiv = document.createElement("div");

    document.getElementsByClassName("dialog")[0].style.width = "100%";

   

    portalErrorReportDiv.setAttribute('id', 'customError');

    portalErrorReportDiv.setAttribute('class', 'alert alert-info');

    //Create your logic for showing and displaying html content using JavaScript 

    //Add Iframe of entity form for Error Report from Portal

    var ifrm = document.createElement('iframe');

    ifrm.setAttribute('id', 'ifrm');

    ifrm.style.marginLeft = "40%";

    ifrm.style.display = "none";

    document.body.appendChild(ifrm);

    ifrm.style.height = "500px";

    ifrm.style.width = "500px";

    ifrm.setAttribute('src',

        '/_portal/modal-form-template-path/6d6b3012-e709-4c45-a00d-df4b3befc518?entityformid=1ba19e3d-2fd1-e511-80df-c4346bac0574&languagecode=1033'

    );

    document.body.appendChild(ifrm);

/script>