Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fast Refresh] Redesigned Runtime Error Experience #12222

Merged
merged 101 commits into from
Apr 30, 2020
Merged

[Fast Refresh] Redesigned Runtime Error Experience #12222

merged 101 commits into from
Apr 30, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Apr 26, 2020 •
edited
Loading

This pull request introduces a redesigned runtime error experience for users who are opted-into the Fast Refresh experiment.

Notable changes:

  • Uses eval-source-map instead of cheap-module-source-map
    • Faster recompiles in development
    • Column mappings
    • Original variable names in browser debugger
  • Does not reload entire page after a runtime error (to retain application state)
    • Runtime errors are automatically cleared after a Fast Refresh successfully completes
  • New overlay is clearly minimizable (modal design)
    • Old overlay looked like a compile error, was not obvious your app was still underneath

@Timer Timer mentioned this pull request Apr 28, 2020
Closed
Timer added 28 commits April 30, 2020 06:51
@Timer
wip: React Refresh RedBox
d70fdfa
@Timer
Resolving middleware, StackFrame & parser, bus
d71b52d
@Timer
Move code
12a0645
@Timer
Create everything into shadow root
d2173e7
@Timer
yeet
925db0b
@Timer
Fix package version
c3a263a
@Timer
Start on overlay design
f06b169
@Timer
Add more styling
aa133b3
@Timer
Move file
6de97f0
@Timer
Add resolve phase to error overlay
40323ea
@Timer
add TODO
1182cd5
@Timer
Add collapsed field
c940056
@Timer
Add basic frame rendering
322eee6
@Timer
Update error message
69952d8
@Timer
Update title
f6ce5f9
@Timer
Add TODO to fix behavior
de51a0b
@Timer
Prettier frame display
6f7f4a2
@Timer
Fix source fetching
7ffd0aa
@Timer
Fix content type
9cbda23
@Timer
Fix rendered error
046c38a
@Timer
Simplify URL Source
62ae14c
@Timer
Render Frame Groups
48997db
@Timer
Implement Proper Overflow
e992720
@Timer
Add Titles to Frames
84e0fb8
@Timer
Remove Leading Spaces
c6ce2eb
@Timer
Fix line stripping
575b4af
@Timer
Swap function string order
140c2a3
@Timer
Reduce maximum width
b906da4
@vercel vercel deleted a comment from ijjk Apr 30, 2020
@vercel vercel deleted a comment from ijjk Apr 30, 2020
@vercel vercel deleted a comment from ijjk Apr 30, 2020
@vercel vercel deleted a comment from ijjk Apr 30, 2020
@Timer Timer marked this pull request as ready for review April 30, 2020 12:22
@ijjk

This comment has been minimized.

Sign in to view
timneutkens
timneutkens approved these changes Apr 30, 2020
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great 💯

@Timer Timer merged commit fbea795 into vercel:canary Apr 30, 2020
@Timer Timer deleted the refresh/redbox branch April 30, 2020 14:50
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@Timer @rokinsky
[Fast Refresh] Redesigned Runtime Error Experience (vercel#12222)
2df983c
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Timer @ijjk @timneutkens @jescalan