kmalakoff / kmalakoff/esbuild-plugin-dev-server

broken error overlay

Open
#97 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
14
Forks
3
PR merge metrics
No merged PRs in 30d

Description

In some projects where I use this plugin the error overlay does not work. Here I get an error displayed in the browser when I produce an error in the code, instead of the error overlay:
![image](https://user-images.githubusercontent.com/163128/201950379-443f89ab-6b53-4165-9c23-676b291c9799.png)

I then looked at the code and was able to fix the error. The initialization logic is called twice. Here is the fix: https://github.com/hoschi/esbuild-plugin-dev-server/pull/1/commits/3d248888c3e13a0803f03ddc79234cf0c95c423f

Now I get another error:
![image](https://user-images.githubusercontent.com/163128/201950713-70f882d5-fab2-476d-878b-c566d6c6094b.png)

I then looked at React's code where the error is thrown: https://github.com/facebook/create-react-app/blob/f99167c014a728ec856bda14f87181d90b050813/packages/react-error-overlay/src/index.js#L158

I was not able to fix this error. So I replaced the React overlay with a simpler version. This also has the advantage that the error appears faster, at least felt.

Maybe you can find the second error?
If you want you can also integrate my simple overlay, this is the PR in my repo: https://github.com/hoschi/esbuild-plugin-dev-server/pull/1/commits

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the broken error overlay and inspecting the plugin's initialization logic, comparing it with the linked fix commit. Then trace the React error overlay failure at packages/react-error-overlay/src/index.js line 158 and compare the simpler overlay in the linked pull request; done means code errors consistently appear in the overlay instead of the browser error page.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.