feat: notifications #299
feat: notifications #299
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -23,7 +23,7 @@ | |||
| "enabled": true | |||
| }, | |||
| "linter": { | |||
| "enabled": true, | |||
|
|
||
|
|
||
|
|
||
| export const not_globally_unique_generateId = () => { |
| listeners.forEach((listener) => listener(event)); | ||
|
|
||
| const events = [...get().state.events, event]; | ||
| const applyOverlapCheckToLongRenderEvent = ( |
There was a problem hiding this comment.
this handles a "frame drop" event overlapping with an interaction event, which will always be the case when there's an interaction that caused the frame drop
this is a suboptimal implementation because it may cause a flicker, forcing us to read a lagged version of this downstream
the correct solution is to check if an interaction is ongoing during a frame drop event, and kill it if so
|
|
||
| let framesDrawnInTheLastSecond: Array<number> = []; | ||
|
|
||
| export function startLongPipelineTracking() { |
There was a problem hiding this comment.
if you imagine a pipeline to drawing frames
| start-pipeline, js , dom stuff, paint , draw |
this tracks
| timing-start , start-pipeline, js, dom stuff, paint , draw | timing-end , timing-start , start-pipeline ...
so this correctly tracks "dropped frames" as opposed to tracking requestAnimationFrame times (wrong) and long tasks (not full picture)
|
|
||
| type Subscriber<T> = (data: T) => void; | ||
|
|
||
| export class Store<T> { |
There was a problem hiding this comment.
should use our zustand store clone over this
| return this.currentValue; | ||
| } | ||
| } | ||
| export const MAX_INTERACTION_BATCH = 150; |
There was a problem hiding this comment.
bounded array makes sure we never cause a memory leak
| }); | ||
|
|
||
| let currFrame: ReturnType<typeof requestAnimationFrame> | null = null; | ||
| export const drawHighlights = () => { |
There was a problem hiding this comment.
a state machine to handle transitions between drawing states
https://million-js.slack.com/archives/C06FBU2AY7Q/p1739766745053689
| // a set of entities communicate to each other through channels | ||
| // the state in the channel is persisted until the receiving end consumes it | ||
| // multiple subscribes to the same channel will likely lead to unintended behavior if the subscribers are separate entities | ||
| class PerformanceEntryChannels<T> implements PerformanceEntryChannelsType<T> { |
There was a problem hiding this comment.
this is needed if we want to map our custom interaction tracking to performance entry tracking- makes bidirectional communication and persisted state trivial. Inspired from go channels
| } | ||
| >; | ||
|
|
||
| export const createChildrenAdjacencyList = (root: Fiber, limit: number) => { |
There was a problem hiding this comment.
sometimes a user will click a button that has some content inside of it. If there's an SVG inside of it, the name of the SVG's composite fiber ancestor is normally pretty descriptive, so we can use this in the future
| const isProduction: boolean = process.env.NODE_ENV === "production"; | ||
| const prefix: string = "Invariant failed"; | ||
|
|
||
| // FIX ME THIS IS PRODUCTION INVARIANT LOL |
| skipBoundaries: true, | ||
| }; | ||
|
|
||
| const FILTER_PATTERNS = { |
There was a problem hiding this comment.
todo: dedupe with monitoring
| >; | ||
|
|
||
| /** | ||
| * we need to fix: |
There was a problem hiding this comment.
todo: delete this comment its just my internal reasoning
| }; | ||
|
|
||
| type ShouldContinue = boolean; | ||
| const trackDetailedTiming = ({ |
There was a problem hiding this comment.
nice util for chaining callbacks into something we can track times for
| } | ||
| if ( | ||
| info.target instanceof HTMLInputElement || | ||
| info.target instanceof HTMLSelectElement |
There was a problem hiding this comment.
click:change runs after click, but only will fire for HTMLInputElement and HTMLSelectElement, so we need to make sure we track this, unless we may miss javascript time from these handlers
| ) { | ||
| return; | ||
| } | ||
| if (Date.now() - lastInteractionRef.current.stageStart > 2000) { |
There was a problem hiding this comment.
idk if this is needed anymore, fool proof validation
| once: true, | ||
| }); | ||
|
|
||
| // this is an edge case where a click event is not fired after a pointerdown |
There was a problem hiding this comment.
todo: remove comment, old internal reasoning
| framePresentTime: number | null; | ||
| formattedReactData: string; | ||
| }) => { | ||
| return `I will provide you with a set of high level, and low level performance data about an interaction in a React App: |
There was a problem hiding this comment.
i wanted to cry writing these prompts
packages/scan/tsup.config.ts
Outdated
| options.preserveSymlinks = true; | ||
| }, | ||
| }, | ||
| // { |
There was a problem hiding this comment.
remindme: add back
RobPruzan
force-pushed
the
notifications
branch
2 times, most recently
from
51cd4a7 to
52d9291
Compare
commit: |
RobPruzan
force-pushed
the
notifications
branch
4 times, most recently
from
aba7bbd to
964e491
Compare
| @@ -0,0 +1,115 @@ | |||
| import { Fiber } from 'bippy'; | |||
| export const getChildrenFromFiberLL = (fiber: Fiber) => { | |||
| const queue: Array<[node: Fiber, parent: Fiber | null]> = []; | ||
| const visited = new Set<Fiber>(); | ||
|
|
||
| queue.push([root, root.return]); |
There was a problem hiding this comment.
an actual linked list would probably be less memory, but whatever, this is fine. I'll just add a note to myself.
| startTimingTracking(); | ||
| createNotificationsOutlineCanvas(); |
There was a problem hiding this comment.
if toolbar is recreated (browser extension on/off mode) these should not be re-executed maybe ... at least createNotificationsOutlineCanvas
| @@ -521,6 +556,21 @@ const initToolbar = (showToolbar: boolean) => { | |||
| createToolbar(shadowRoot); | |||
| }; | |||
|
|
|||
| const createNotificationsOutlineCanvas = () => { | |||
| try { | |||
| const highlightRoot = document.documentElement; | |||
There was a problem hiding this comment.
maybe is a good idea to keep everything inside the react-scan web component to be able to create/destroy evertything?
There was a problem hiding this comment.
yes will add todo
| width: 480, | ||
| height: 36, | ||
| initialHeight: 36 * 10, | ||
| width: 550, | ||
| height: 350, | ||
| initialHeight: 400, | ||
| } as const; | ||
|
|
||
| export const MIN_CONTAINER_WIDTH = 240; | ||
|
|
||
| export const LOCALSTORAGE_KEY = 'react-scan-widget-settings'; | ||
| export const LOCALSTORAGE_KEY = 'react-scan-widget-settings-v2'; |
There was a problem hiding this comment.
we should fix this ... migrate the old settings ... or at least remove/override them
TODO: @pivanov - fix it with the UI changes
|
Going to merge, leaving any todos in code any patches we can send directly to main, this is long overdue |
No description provided.