In my Power Pages portal project I would need to be notified on user client-side errors. I will later make an extensive thread on how I implement this, but this post is how to format a typical error object that comes from the JavaScript catch handler.
Typical flow
1) Error is caught in JavaScript code
2) Error object is prepared with all client-side details
3) Power Automate flow is triggered where email with the error details is sent to the admin
Error object
Let's now make a dummy Error object:
console.dir( new Error( 'Smth went wrong' , { cause: { desc: "some descrtion here", comments: "some comments here", someObj: { newProp: "new value" }, someArr: [ {name: "name1", value: "value1"}, {name: "name2", value: "value2"} ] } } ) ) We would get the following error that we would need to send by email:
We will send this object to Power Automate in the request body as follows:
fetch( url , { method: "POST", body: JSON.stringify( { wb_data: JSON.stringify( { desc: "some description here", comments: "some comments here", someObj: { newProp: "new value" }, someArr: [ {name: "name1", value: "value1"}, {name: "name2", value: "value2"} ] } ) } ) } ) Result in the email body will be rendered in one line and look like this:
{"desc":"some description here","comments":"some comments here","someObj":{"newProp":"new value"},"someArr":[{"name":"name1","value":"value1"},{"name":"name2","value":"value2"}]} That is not what I want.
How to fix
We need to use the space parameter when doing JSON.stringify
Let's redo the logic:
fetch( url , { method: "POST", body: JSON.stringify( { wb_data: JSON.stringify( { desc: "some description here", comments: "some comments here", someObj: { newProp: "new value" }, someArr: [ {name: "name1", value: "value1"}, {name: "name2", value: "value2"} ] } , null , ' ' // this is a space separator that is rendered in Outlook HTML tags as a visual space ).replaceAll('\n', '<br>') // when applying the space param, '\n' is added automatically which we need to convert to new line for HTML } ) } ) Space characters that work in Outlook:
- Em Space
 - widest of all, but when pasted from outlook into vscode will be replaced with a square symbol invalidating json -
No-Break Space
 - narrow but when pasting into vs code will be replaced with a normal space making valid json -> I will finally use this for production with some modification:- I would like to use 4 spaces instead of 1 (my typical setting in the code editor), but since the
fetch space paramhas a limit of 10 characters, I cannot use     - instead, I will replace it after
- so the above line
.replaceAll('\n', '<br>')will be replaced with.replaceAll('\n', '<br>').replaceAll(' ', '    ') - as a result I will have 4 spaces rendered and when pasting the json from the email body into vs code (in case I need it), I don't even need to format
- I would like to use 4 spaces instead of 1 (my typical setting in the code editor), but since the
Space characters that do not work in Outlook:
- Zero Width Space
​ - Space (SP)
  - Tab
	
Result
Actual string that will be sent to the email body will look like this:
'{"wb_data":"{<br> \\"desc\\": \\"some description here\\",<br> \\"comments\\": \\"some comments here\\",<br> \\"someObj\\": {<br>  \\"newProp\\": \\"new value\\"<br> },<br> \\"someArr\\": [<br>  {<br>   \\"name\\": \\"name1\\",<br>   \\"value\\": \\"value1\\"<br>  },<br>  {<br>   \\"name\\": \\"name2\\",<br>   \\"value\\": \\"value2\\"<br>  }<br> ]<br>}"}' Actual email body in Outlook will look like this:
{ "desc": "some description here", "comments": "some comments here", "someObj": { "newProp": "new value" }, "someArr": [ { "name": "name1", "value": "value1" }, { "name": "name2", "value": "value2" } ] } 
Top comments (1)
Thanks for sharing