'Lighthouse Error: LHR failed to render in Angular SSR
I am trying to run a lighthouse performance audit on an Angular SSR yet it returns an empty page. No error messages or anything. However, if I run it on https://pagespeed.web.dev/ it says Core Web Vitals Assessment: Failed and Error: LHR failed to render. But it does show me the data from the previews 28 days.
If I run the lighthouse CLI I am able to get the JSON report but it will also not render an HTML version and does not seem to show any errors.
"lighthouse https://daomaker.com --output=json --output-path=./report.json --save-assets --only-categories=performance"
It returns 3 files, report-0.devtoolslog.json report-0.trace.json report.json
If I open the empty HTML tab and look at the HTML I get this console error:
compiled-reportrenderer.js:92 Uncaught TypeError: Cannot read properties of null (reading 'toString')
at Function.render (compiled-reportrenderer.js:92:2125)
at z.renderNode (compiled-reportrenderer.js:108:6424)
at z._renderTableValue (compiled-reportrenderer.js:108:2467)
at z._renderTableRow (compiled-reportrenderer.js:108:4484)
at z._renderTableRowsFromItem (compiled-reportrenderer.js:108:4755)
at z._renderTable (compiled-reportrenderer.js:108:5510)
at z.render (compiled-reportrenderer.js:108:266)
at F.populateAuditValues (compiled-reportrenderer.js:66:1478)
at F.renderAudit (compiled-reportrenderer.js:66:357)
at compiled-reportrenderer.js:129:4656
Which seems to relate to this line of code:
function A(e,t,n){return e<t?t:e>n?n:e}class C{static getScreenshotPositions(e,t,n){const r={x:(i=e).left+i.width/2,y:i.top+i.height/2};var i;const o=A(r.x-t.width/2,0,n.width-t.width),a=A(r.y-t.height/2,0,n.height-t.height);return{screenshot:{left:o,top:a},clip:{left:e.left-o,top:e.top-a}}}static renderClipPathInScreenshot(e,t,n,r,i){const o=e.find("clipPath",t),a=`clip-${l.getUniqueSuffix()}`;o.id=a,t.style.clipPath=`url(#${a})`;const s=n.top/i.height,c=s+r.height/i.height,d=n.left/i.width,h=d+r.width/i.width,p=[`0,0 1,0 1,${s} 0,${s}`,`0,${c} 1,${c} 1,1 0,1`,`0,${s} ${d},${s} ${d},${c} 0,${c}`,`${h},${s} 1,${s} 1,${c} ${h},${c}`];for(const t of p){const n=e.createElementNS("http://www.w3.org/2000/svg","polygon");n.setAttribute("points",t),o.append(n)}}static installFullPageScreenshot(e,t){e.style.setProperty("--element-screenshot-url",`url(${t.data})`)}static installOverlayFeature(e){const{dom:t,reportEl:n,overlayContainerEl:r,fullPageScreenshot:i}=e,o="lh-screenshot-overlay--enabled";n.classList.contains(o)||(n.classList.add(o),n.addEventListener("click",(e=>{const n=e.target;if(!n)return;const o=n.closest(".lh-node > .lh-element-screenshot");if(!o)return;const a=t.createElement("div","lh-element-screenshot__overlay");r.append(a);const l={width:.95*a.clientWidth,height:.8*a.clientHeight},s={width:Number(o.dataset.rectWidth),height:Number(o.dataset.rectHeight),left:Number(o.dataset.rectLeft),right:Number(o.dataset.rectLeft)+Number(o.dataset.rectWidth),top:Number(o.dataset.rectTop),bottom:Number(o.dataset.rectTop)+Number(o.dataset.rectHeight)},c=C.render(t,i.screenshot,s,l);c?(a.appendChild(c),a.addEventListener("click",(()=>a.remove()))):a.remove()})))}static _computeZoomFactor(e,t){const n={x:t.width/e.width,y:t.height/e.height},r=.75*Math.min(n.x,n.y);return Math.min(1,r)}static render(e,t,n,r){if(!function(e,t){return t.left<=e.width&&0<=t.right&&t.top<=e.height&&0<=t.bottom}(t,n))return null;const i=e.createComponent("elementScreenshot"),o=e.find("div.lh-element-screenshot",i);o.dataset.rectWidth=n.width.toString(),o.dataset.rectHeight=n.height.toString(),o.dataset.rectLeft=n.left.toString(),o.dataset.rectTop=n.top.toString();const a=this._computeZoomFactor(n,r),l={width:r.width/a,height:r.height/a};l.width=Math.min(t.width,l.width);const s=l.width*a,c=l.height*a,d=C.getScreenshotPositions(n,l,{width:t.width,height:t.height});e.find("div.lh-element-screenshot__content",o).style.top=`-${c}px`;const h=e.find("div.lh-element-screenshot__image",o);h.style.width=s+"px",h.style.height=c+"px",h.style.backgroundPositionY=-d.screenshot.top*a+"px",h.style.backgroundPositionX=-d.screenshot.left*a+"px",h.style.backgroundSize=`${t.width*a}px ${t.height*a}px`;const p=e.find("div.lh-element-screenshot__element-marker",o);p.style.width=n.width*a+"px",p.style.height=n.height*a+"px",p.style.left=d.clip.left*a+"px",p.style.top=d.clip.top*a+"px";const u=e.find("div.lh-element-screenshot__mask",o);return u.style.width=s+"px",u.style.height=c+"px",C.renderClipPathInScreenshot(e,u,d.clip,n,l),o}}
Meaning is probably related to the screenshots.
The bug persist even if I add --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent
How do I find the bug stopping the lighthouse from returning an HTML report?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|