search

HamishMW / portfolio

My personal portfolio website built using React and three js
https://hamishw.com
MIT License
2.41k stars 519 forks source link

An error occurs when viewing your site from the Brave browser. #57

Closed NyNaNr closed 1 year ago

NyNaNr commented 1 year ago

Hello, your portfolio is very cool and I'm learning a lot from it. However, I'm having trouble viewing your site (https://hamishw.com/) on the Brave browser, as it seems to result in an error that prevents the site from displaying. This issue also arises while I'm studying your site. When I checked the console, it seems like the error is being caused by THREE.WebGLRenderer.

I would appreciate your help. Thank you.

Groliver7 commented 1 year ago

You probably need to enable hardware acceleration from your web browser for it to display.

NyNaNr commented 1 year ago

"Thank you for your reply. Upon checking the settings of the Brave browser, hardware acceleration was enabled. This is quite perplexing.

By the way, not only does (https://hamishw.com/) occasionally encounter an error stating "Application error: a client-side exception has occurred (see the browser console for more information)," but other sites do as well, preventing me from browsing them.

I appreciate your help."

excalith commented 1 year ago

I have been looking into this for a while and it seems like the majority of the problem is either the GPU blacklist of chromium or the latest browser update, causing errors even if you enable hardware acceleration. For reference, those three.js and chromium issues have more details.

Digging deeper, I used an online VM to test it on different environments via checking out the WebGL support through https://get.webgl.org website, it says browser supports WebGL. Some of the components that use threejs works as intended, but Carousel for instance, causes client side errors. Haven't checked the shaders yet and the threejs code, but maybe new threejs versions already have a workaround for such cases? I have updated Three and Three STDLib to the latest, but problem persists on VMs. Since this is more of a device-centric issue, @NyNaNr can you please check out my version on your end https://cancellek.com/projects/spider-bot

I am using nvidia and neither firefox, chrome or brave throws errors. This raised the question for some components may have some issues for draw calls towards the GPU API using chromium. In this case, either we wait for browser to fix API stuff on their end, or refactor the problematic components but I don't think it is viable since they may fix it soon. However, error handling for threejs components could be useful until then, at least visitors will be able to view the page without three.js content working. Here is an example on Browserling where one of my models on SketchFab won't display but we have a nice warning:

Here is the VM test of Smart Sparrow project on a virtual machine using chrome: https://www.browserling.com/browse/win/10/chrome/115/https%3A%2F%2Fhamishw.com%2Fprojects%2Fsmart-sparrow%2F

For convenience, here is the full output:

Render Application error: a client-side exception has occurred (see the browser console for more information).

Console Log

fb7d5399.9395eac7f8e7d509.js:1 THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0x1414, DEVICE = 0x008c, GL_VENDOR = Google Inc. (Google), GL_RENDERER = ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver-5.0.0), GL_VERSION = 10.0.19041.2788, Sandboxed = yes, Optimus = no, AMD switchable = no, Reset notification strategy = 0x8252, ErrorMessage = BindToCurrentSequence failed: .

fb7d5399.9395eac7f8e7d509.js:1 THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Failed to create a WebGL2 context.

2fb7d5399.9395eac7f8e7d509.js:1 THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0x1414, DEVICE = 0x008c, GL_VENDOR = Google Inc. (Google), GL_RENDERER = ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver-5.0.0), GL_VERSION = 10.0.19041.2788, Sandboxed = yes, Optimus = no, AMD switchable = no, Reset notification strategy = 0x8252, ErrorMessage = BindToCurrentSequence failed: .

fb7d5399.9395eac7f8e7d509.js:1 THREE.WebGLRenderer: Error creating WebGL context with your selected attributes.

framework-4556c45dd113b893.js:1 Error: Error creating WebGL context with your selected attributes.
    at new Ia (fb7d5399.9395eac7f8e7d509.js:1:384824)
    at 93.e02243c67f7e341f.js:1:2861
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
    at ls (framework-4556c45dd113b893.js:1:105216)
    at S (framework-4556c45dd113b893.js:1:138450)
du @ framework-4556c45dd113b893.js:1
main-1a5ef2ee6643c975.js:1 Error: Error creating WebGL context with your selected attributes.
    at new Ia (fb7d5399.9395eac7f8e7d509.js:1:384824)
    at 93.e02243c67f7e341f.js:1:2861
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
    at ls (framework-4556c45dd113b893.js:1:105216)
    at S (framework-4556c45dd113b893.js:1:138450)
ee @ main-1a5ef2ee6643c975.js:1
main-1a5ef2ee6643c975.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
ee @ main-1a5ef2ee6643c975.js:1
_app-06d93892feb03865.js:1
NyNaNr commented 1 year ago

First and foremost, I deeply appreciate you detailing the thought process behind the error.

Windows 11 Home (22H2)

Brave version: 1.56.20 Chromium: 115.0.5790.171 (Official Build) (64 bit)

nvidia geforce rtx 3050 laptop GPU

I accessed https://cancellek.com/projects/spider-bot under the above environment, but I encountered an error just as before.

I have almost finished my portfolio. However, I can't exclude the three.js content as it leaves a good impression on the viewers and is one of my favorites.

I plan to patiently wait for the correction.

In the meantime, I can only hope that visitors to the site aren't using the Brave browser.

I truly appreciate your thorough explanation.

Lastly, the 3D object in @excalith 's portfolio was really cool.

excalith commented 1 year ago

Hey @NyNaNr thanks for the kind words! I have found a SketchFab documentation for resolving such issues as clients: https://help.sketchfab.com/hc/en-us/articles/203059088-Compatibility

I think the fastest and best way for now is to make an error handling for client issues that checks if it is threejs related and inform users with such steps.

@HamishMW do you think it is viable? React ErrorBoundaries could further improve user experience who fails to see the content with possible solutions.

NyNaNr commented 1 year ago

Thank you for your reply!

I sincerely apologize, but due to my limited understanding, I wasn't able to fully grasp your explanation.

As of now, my understanding of the issue at hand is:

Is my understanding correct?

Also, the solution proposed by @excalith suggests that by making code additions or similar adjustments on the server-side, users on the client-side can view the site smoothly without encountering errors, correct?

I'm sorry for my shortcomings. I'd appreciate any further guidance you can provide.

excalith commented 1 year ago

Hey @NyNaNr no problem at all mate! My research about the issue shows me that it is caused by SwiftShader, which is used by chromium. This issue prevents the components to render on the client side, resulting in blocking the whole page render due to some extensive and beautiful webgl usage of most components.

Normally, this issue should be fixed by the owners of that project (swiftshader, chromium etc) since it is more low-level stuff. Trying to find a workaround generally causes more issues than fixing it in most cases.

Since it is a low-level issue and haven't checked their code, I can only assume that chromium with swiftshader tries to send GPU a command (a draw call) but fails to render it.

Such issues can be caused by the GPU, engine (firefox / chromium etc), framework (threejs etc), and/or shader you wrote (ie. the gallery with displacement).

However, at least we could prevent whole site to crash using React ErrorBoundary to catch the error and display another page. With this, we can show the navigation bar and such components with a friendly warning that says "Hey, your browser seems to be having issues rendering this awesome page. You can try these steps to catch up with the new technologies" instead of locking visitor out of the website. They still won't be able to view content of your project, but at least they will know that your website is working and it is an issue caused by the browser.

I personally do not like using that, kind of running the whole site within try / catch so I had to ask project owner first for his insight on this.

Cheers!

NyNaNr commented 1 year ago

Thank you for your response.

I've come to understand that we can prevent the entire site from crashing by utilizing React's ErrorBoundary to catch errors and display an alternative page.

It seems like I might be able to handle it using React's ErrorBoundary.

This was my first time posting a question on a GitHub issue. I'm truly grateful to have a professional like you provide a thorough answer.

excalith commented 1 year ago

Hey @NyNaNr, thanks for your kind reply! I believe open sourcing is pretty much about collaborating and sharing experiences. At least that is how I learned it, and through that I improved my skillset on different fields. Carry the flag mate, cheers!

excalith commented 1 year ago

Hey @NyNaNr, Was about to give Error Boundary a try, but realized something. Can you please search your project for failIfMajorPerformanceCaveat and set those to false?

Carousel and Model components both have that. If you are trying to work it out with this repository without changes, there might be other pages that use it as well. I think if a performance issue occurs, it fails and causes the crash. I believe we can prevent crashes by setting that to false, and try to find balance changing powerPreference and fiddling with precision which is not on the components.

A quick test shows promising results on Browserling virtual machines. It does render the pages and components seems to be working, but since Browserling only stream video from their VMs, I am not sure about the performance. 

    renderer.current = new WebGLRenderer({
      canvas: canvas.current,
      antialias: false,
      alpha: true,
      powerPreference: 'high-performance',
      precision: 'mediump',
      failIfMajorPerformanceCaveat: false,
    });

Sorry to ask you to try it out since I cannot reproduce it on my end, but can you please try out those changes on your end? If it works smoothly, I think this is the fix we have been looking for, not a workaround. Still, it causes errors due to performance related issues on SwiftShader, but both precision and power preference might help finding balance between quality and performance. Please refer to those settings for more information if it works https://threejs.org/docs/#api/en/renderers/WebGLRenderer and let me know!

NyNaNr commented 1 year ago

Thank you for introducing me to the wonderful culture of open source.

I set 'failIfMajorPerformanceCaveat' to false, but in my environment, the same error continues to appear.

I recently accessed your portfolio site (https://cancellek.com/projects/spider-bot/), and the same error keeps occurring there as well.

The following message was displayed in the console:

(index):6 Allow attribute will take precedence over 'allowfullscreen'.
3fb7d5399-fc8908a9d2e9a995.js:1 THREE.WebGLRenderer: mediump not supported, using lowp instead.
ua @ fb7d5399-fc8908a9d2e9a995.js:1
Ut @ fb7d5399-fc8908a9d2e9a995.js:1
Ol @ fb7d5399-fc8908a9d2e9a995.js:1
(anonymous) @ 945-7ad7159423d7f215.js:1
ri @ framework-4556c45dd113b893.js:1
Ss @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
_app-050a2b307def7717.js:1 © 2015-2023 Can Cellek

framework-4556c45dd113b893.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
du @ framework-4556c45dd113b893.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
framework-4556c45dd113b893.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
du @ framework-4556c45dd113b893.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
framework-4556c45dd113b893.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
du @ framework-4556c45dd113b893.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 TypeError: Cannot read properties of null (reading 'indexOf')
    at new Tl (fb7d5399-fc8908a9d2e9a995.js:1:374846)
    at Ut (fb7d5399-fc8908a9d2e9a995.js:1:435287)
    at new Ol (fb7d5399-fc8908a9d2e9a995.js:1:435804)
    at 945-7ad7159423d7f215.js:1:2141
    at ri (framework-4556c45dd113b893.js:1:93730)
    at Ss (framework-4556c45dd113b893.js:1:113957)
    at is (framework-4556c45dd113b893.js:1:106214)
    at jl (framework-4556c45dd113b893.js:1:46913)
    at framework-4556c45dd113b893.js:1:112753
    at ws (framework-4556c45dd113b893.js:1:112758)
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
J @ main-57e472242d707e04.js:1
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
_app-050a2b307def7717.js:1     GET https://cancellek.com/_vercel/insights/script.js net::ERR_BLOCKED_BY_CLIENT
nr @ _app-050a2b307def7717.js:1
(anonymous) @ _app-050a2b307def7717.js:1
ri @ framework-4556c45dd113b893.js:1
Ss @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1     POST https://vitals.vercel-insights.com/v1/vitals net::ERR_BLOCKED_BY_CLIENT
u @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
i @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
2main-57e472242d707e04.js:1 Error rendering page:  Error: Cancel rendering route
    at q (main-57e472242d707e04.js:1:19069)
    at main-57e472242d707e04.js:1:19009
    at new Promise (<anonymous>)
    at ie (main-57e472242d707e04.js:1:18979)
    at main-57e472242d707e04.js:1:17471
(anonymous) @ main-57e472242d707e04.js:1
Promise.catch (async)
fn @ main-57e472242d707e04.js:1
value @ main-57e472242d707e04.js:1
a.componentDidCatch.t.callback @ framework-4556c45dd113b893.js:1
Ua @ framework-4556c45dd113b893.js:1
ki @ framework-4556c45dd113b893.js:1
bi @ framework-4556c45dd113b893.js:1
yi @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
_app-050a2b307def7717.js:1 © 2015-2023 Can Cellek

main-57e472242d707e04.js:1     POST https://vitals.vercel-insights.com/v1/vitals net::ERR_BLOCKED_BY_CLIENT
u @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
setTimeout (async)
e @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
load (async)
e @ main-57e472242d707e04.js:1
z @ main-57e472242d707e04.js:1
t.default @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
ri @ framework-4556c45dd113b893.js:1
Ss @ framework-4556c45dd113b893.js:1
is @ framework-4556c45dd113b893.js:1
jl @ framework-4556c45dd113b893.js:1
(anonymous) @ framework-4556c45dd113b893.js:1
ws @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
main-57e472242d707e04.js:1     POST https://vitals.vercel-insights.com/v1/vitals net::ERR_BLOCKED_BY_CLIENT
u @ main-57e472242d707e04.js:1
a @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
n @ main-57e472242d707e04.js:1
main-57e472242d707e04.js:1     POST https://vitals.vercel-insights.com/v1/vitals net::ERR_BLOCKED_BY_CLIENT
u @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
c @ main-57e472242d707e04.js:1
n @ main-57e472242d707e04.js:1
main-57e472242d707e04.js:1     POST https://vitals.vercel-insights.com/v1/vitals net::ERR_BLOCKED_BY_CLIENT
u @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
(anonymous) @ main-57e472242d707e04.js:1
n @ main-57e472242d707e04.js:1

The message displayed when I accessed my site (after modifying failIfMajorPerformanceCaveat) is as follows:

04_contact.tsx:86 false Object
/_vercel/insights/script.js:1     Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
three.module.js:14755 THREE.WebGLRenderer: highp not supported, using lowp instead.
overrideMethod @ console.js:213
id @ three.module.js:14755
ew @ three.module.js:27028
rc @ three.module.js:27070
(anonymous) @ DisplacementSphere.js:56
ag @ react-dom.production.min.js:200
aR @ react-dom.production.min.js:227
e @ react-dom.production.min.js:232
aU @ react-dom.production.min.js:232
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:231
aI @ react-dom.production.min.js:229
aU @ react-dom.production.min.js:230
oV @ react-dom.production.min.js:259
(anonymous) @ react-dom.production.min.js:256
E @ scheduler.production.min.js:14
C @ scheduler.production.min.js:15
app-index.js:32 TypeError: Cannot read properties of null (reading 'indexOf')
    at new re (three.module.js:21441:1)
    at ew (three.module.js:27034:1)
    at new rc (three.module.js:27070:1)
    at DisplacementSphere.js:56:24
    at ag (react-dom.production.min.js:200:342)
    at aR (react-dom.production.min.js:227:225)
    at e (react-dom.production.min.js:232:162)
    at aU (react-dom.production.min.js:232:466)
    at aI (react-dom.production.min.js:229:69)
    at aU (react-dom.production.min.js:231:62)
window.console.error @ app-index.js:32
overrideMethod @ console.js:213
ln @ react-dom.production.min.js:139
n.callback @ react-dom.production.min.js:140
nf @ react-dom.production.min.js:83
nd @ react-dom.production.min.js:83
av @ react-dom.production.min.js:201
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:203
aD @ react-dom.production.min.js:224
ak @ react-dom.production.min.js:202
(anonymous) @ react-dom.production.min.js:257
oU @ react-dom.production.min.js:258
nJ @ react-dom.production.min.js:104
oV @ react-dom.production.min.js:259
(anonymous) @ react-dom.production.min.js:256
E @ scheduler.production.min.js:14
C @ scheduler.production.min.js:15
yur-portfolio.vercel.app/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

It's challenging.

excalith commented 1 year ago

Hmmm, it seems like your browser / specs not even supports mediump, asks for lowp instead. It is indeed challenging! On your fork, the home page threw that error from DisplacementSphere component.

On DisplacementSphere.js file, can you change the WebGLRenderer as follows?

    renderer.current = new WebGLRenderer({
      canvas: canvasRef.current,
      antialias: false,
      alpha: true,
      powerPreference: 'high-performance',
      precision: 'lowp',
      failIfMajorPerformanceCaveat: false,
    });

I set the precision to lowp there but different power preference settings might help such as low-power to force CPU to step in instead, I don`t know it is wise but might be a solution nonetheless since shader is making math computations which should be quite simple even on CPU - more info about that is here https://registry.khronos.org/webgl/specs/latest/1.0/#5.2

NyNaNr commented 1 year ago

I must apologize to you.

The problem has been resolved. When I tried to change it to [precision: 'lowp'] based on your advice, I thought there might be a chance and reset the settings of the Brave browser and deleted the cookies. Then, I was able to access both [https://cancellek.com/projects/spider-bot/] and my portfolio site [https://yur-portfolio.vercel.app/] without any issues.

Even when I reverted the setting to [failIfMajorPerformanceCaveat: true], I was still able to access my sites without any problems.

I have no idea what the problem was.

I deeply appreciate the considerable amount of time you devoted to trying to solve the issue.

excalith commented 1 year ago

No problem at all mate, I'm just glad that we have found a solution together! Cheers!