msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: more effect debug helpers (#17259)

Browse Source 
* chore: more effect helpers

This adds two new helpers that helped me tremendously with getting to the bottom of #17197:
- `log_reactions`: Logs the graph of reactions starting from the given signal, and also checks if the effect leafs are reachable and if they are able to schedule a root
- `log_inconsistent_branches`: Logs if there are paths in the graph where a branch is clean above a non-clean branch, which means that the part of the graph cannot schedule batches anymore

* shut up eslint
pull/17266/head
Simon H 5 months ago committed by GitHub
parent b4b580a13a
commit a72167bb38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 366 additions and 3 deletions
Show Stats Download Patch File Download Diff File

364
packages/svelte/src/internal/client/dev/debug.js
Unescape View File

@ -5,12 +5,18 @@ import {
BOUNDARY_EFFECT,
BRANCH_EFFECT,
CLEAN,
CONNECTED,
DERIVED,
DIRTY,
EFFECT,
ASYNC,
DESTROYED,
INERT,
MAYBE_DIRTY,
RENDER_EFFECT,
ROOT_EFFECT
ROOT_EFFECT,
WAS_MARKED,
MANAGED_EFFECT
} from '#client/constants';
import { snapshot } from '../../shared/clone.js';
import { untrack } from '../runtime.js';
@ -30,11 +36,13 @@ export function root(effect) {
/**
*
* @param {Effect} effect
* @param {boolean} append_effect
* @returns {string}
*/
export function log_effect_tree(effect, depth = 0) {
function effect_label(effect, append_effect = false) {
const flags = effect.f;
let label = '(unknown)';
let label = `(unknown ${append_effect ? 'effect' : ''})`;
if ((flags & ROOT_EFFECT) !== 0) {
label = 'root';
@ -42,6 +50,8 @@ export function log_effect_tree(effect, depth = 0) {
label = 'boundary';
} else if ((flags & BLOCK_EFFECT) !== 0) {
label = 'block';
} else if ((flags & MANAGED_EFFECT) !== 0) {
label = 'managed';
} else if ((flags & ASYNC) !== 0) {
label = 'async';
} else if ((flags & BRANCH_EFFECT) !== 0) {
@ -52,6 +62,20 @@ export function log_effect_tree(effect, depth = 0) {
label = 'effect';
}
if (append_effect && !label.endsWith('effect')) {
label += ' effect';
}
return label;
}
/**
*
* @param {Effect} effect
*/
export function log_effect_tree(effect, depth = 0) {
const flags = effect.f;
const label = effect_label(effect);
let status =
(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
@ -140,3 +164,337 @@ function log_dep(dep) {
);
}
}
/**
* Logs all reactions of a source or derived transitively
* @param {Derived | Value} signal
*/
export function log_reactions(signal) {
/** @type {Set<Derived | Value>} */
const visited = new Set();
/**
* Returns an array of flag names that are set on the given flags bitmask
* @param {number} flags
* @returns {string[]}
*/
function get_derived_flag_names(flags) {
/** @type {string[]} */
const names = [];
if ((flags & CLEAN) !== 0) names.push('CLEAN');
if ((flags & DIRTY) !== 0) names.push('DIRTY');
if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY');
if ((flags & CONNECTED) !== 0) names.push('CONNECTED');
if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED');
if ((flags & INERT) !== 0) names.push('INERT');
if ((flags & DESTROYED) !== 0) names.push('DESTROYED');
return names;
}
/**
* @param {Derived | Value} d
* @param {number} depth
*/
function log_derived(d, depth) {
const flags = d.f;
const flag_names = get_derived_flag_names(flags);
const flags_str = flag_names.length > 0 ? `(${flag_names.join(', ')})` : '(no flags)';
// eslint-disable-next-line no-console
console.group(
`%c${flags & DERIVED ? '$derived' : '$state'} %c${d.label ?? '<unknown>'} %c${flags_str}`,
'font-weight: bold; color: CornflowerBlue',
'font-weight: normal; color: inherit',
'font-weight: normal; color: gray'
);
// eslint-disable-next-line no-console
console.log(untrack(() => snapshot(d.v)));
if ('fn' in d) {
// eslint-disable-next-line no-console
console.log('%cfn:', 'font-weight: bold', d.fn);
}
if (d.reactions !== null && d.reactions.length > 0) {
// eslint-disable-next-line no-console
console.group('%creactions', 'font-weight: bold');
for (const reaction of d.reactions) {
if ((reaction.f & DERIVED) !== 0) {
const derived_reaction = /** @type {Derived} */ (reaction);
if (visited.has(derived_reaction)) {
// eslint-disable-next-line no-console
console.log(
`%c$derived %c${derived_reaction.label ?? '<unknown>'} %c(already seen)`,
'font-weight: bold; color: CornflowerBlue',
'font-weight: normal; color: inherit',
'font-weight: bold; color: orange'
);
} else {
visited.add(derived_reaction);
log_derived(derived_reaction, depth + 1);
}
} else {
// It's an effect
const label = effect_label(/** @type {Effect} */ (reaction), true);
const status = (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
// Collect parent statuses
/** @type {string[]} */
const parent_statuses = [];
let show = false;
let current = /** @type {Effect} */ (reaction).parent;
while (current !== null) {
const parent_flags = current.f;
if ((parent_flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
const parent_status = (parent_flags & CLEAN) !== 0 ? 'clean' : 'not clean';
if (parent_status === 'clean' && parent_statuses.includes('not clean')) show = true;
parent_statuses.push(parent_status);
}
if (!current.parent) break;
current = current.parent;
}
// Check if reaction is reachable from root
const seen_effects = new Set();
let reachable = false;
/**
* @param {Effect | null} effect
*/
function check_reachable(effect) {
if (effect === null || reachable) return;
if (effect === reaction) {
reachable = true;
return;
}
if (effect.f & DESTROYED) return;
if (seen_effects.has(effect)) {
throw new Error('');
}
seen_effects.add(effect);
let child = effect.first;
while (child !== null) {
check_reachable(child);
child = child.next;
}
}
try {
if (current) check_reachable(current);
} catch (e) {
// eslint-disable-next-line no-console
console.log(
`%c⚠️ Circular reference detected in effect tree`,
'font-weight: bold; color: red',
seen_effects
);
}
if (!reachable) {
// eslint-disable-next-line no-console
console.log(
`%c⚠️ Effect is NOT reachable from its parent chain`,
'font-weight: bold; color: red'
);
}
const parent_status_str = show ? ` (${parent_statuses.join(', ')})` : '';
// eslint-disable-next-line no-console
console.log(
`%c${label} (${status})${parent_status_str}`,
`font-weight: bold; color: ${parent_status_str ? 'red' : 'green'}`,
reaction
);
}
}
// eslint-disable-next-line no-console
console.groupEnd();
} else {
// eslint-disable-next-line no-console
console.log('%cno reactions', 'font-style: italic; color: gray');
}
// eslint-disable-next-line no-console
console.groupEnd();
}
// eslint-disable-next-line no-console
console.group(`%cDerived Reactions Graph`, 'font-weight: bold; color: purple');
visited.add(signal);
log_derived(signal, 0);
// eslint-disable-next-line no-console
console.groupEnd();
}
/**
* Traverses an effect tree and logs branches where a non-clean branch exists below a clean branch
* @param {Effect} effect
*/
export function log_inconsistent_branches(effect) {
const root_effect = root(effect);
/**
* @typedef {{
* effect: Effect,
* status: 'clean' | 'maybe dirty' | 'dirty',
* parent_clean: boolean,
* children: BranchInfo[]
* }} BranchInfo
*/
/**
* Collects branch effects from the tree
* @param {Effect} eff
* @param {boolean} parent_clean - whether any ancestor branch is clean
* @returns {BranchInfo[]}
*/
function collect_branches(eff, parent_clean) {
/** @type {BranchInfo[]} */
const branches = [];
const flags = eff.f;
const is_branch = (flags & BRANCH_EFFECT) !== 0;
if (is_branch) {
const status =
(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
/** @type {BranchInfo[]} */
const child_branches = [];
let child = eff.first;
while (child !== null) {
child_branches.push(...collect_branches(child, status === 'clean'));
child = child.next;
}
branches.push({
effect: eff,
status,
parent_clean,
children: child_branches
});
} else {
// Not a branch, continue traversing
let child = eff.first;
while (child !== null) {
branches.push(...collect_branches(child, parent_clean));
child = child.next;
}
}
return branches;
}
/**
* Checks if a branch tree contains any inconsistencies (non-clean below clean)
* @param {BranchInfo} branch
* @param {boolean} ancestor_clean
* @returns {boolean}
*/
function has_inconsistency(branch, ancestor_clean) {
const is_inconsistent = ancestor_clean && branch.status !== 'clean';
if (is_inconsistent) return true;
const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
for (const child of branch.children) {
if (has_inconsistency(child, new_ancestor_clean)) return true;
}
return false;
}
/**
* Logs a branch and its children, but only if there are inconsistencies
* @param {BranchInfo} branch
* @param {boolean} ancestor_clean
* @param {number} depth
*/
function log_branch(branch, ancestor_clean, depth) {
const is_inconsistent = ancestor_clean && branch.status !== 'clean';
const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
// Only log if this branch or any descendant has an inconsistency
if (!has_inconsistency(branch, ancestor_clean) && !is_inconsistent) {
return;
}
const style = is_inconsistent
? 'font-weight: bold; color: red'
: branch.status === 'clean'
? 'font-weight: normal; color: green'
: 'font-weight: bold; color: orange';
const warning = is_inconsistent ? ' ⚠️ INCONSISTENT' : '';
// eslint-disable-next-line no-console
console.group(`%cbranch (${branch.status})${warning}`, style);
// eslint-disable-next-line no-console
console.log('%ceffect:', 'font-weight: bold', branch.effect);
if (branch.effect.fn) {
// eslint-disable-next-line no-console
console.log('%cfn:', 'font-weight: bold', branch.effect.fn);
}
if (branch.effect.deps !== null) {
// eslint-disable-next-line no-console
console.groupCollapsed('%cdeps', 'font-weight: normal');
for (const dep of branch.effect.deps) {
log_dep(dep);
}
// eslint-disable-next-line no-console
console.groupEnd();
}
if (is_inconsistent) {
log_effect_tree(branch.effect);
} else if (branch.children.length > 0) {
// eslint-disable-next-line no-console
console.group('%cchild branches', 'font-weight: bold');
for (const child of branch.children) {
log_branch(child, new_ancestor_clean, depth + 1);
}
// eslint-disable-next-line no-console
console.groupEnd();
}
// eslint-disable-next-line no-console
console.groupEnd();
}
const branches = collect_branches(root_effect, false);
// Check if there are any inconsistencies at all
let has_any_inconsistency = false;
for (const branch of branches) {
if (has_inconsistency(branch, false)) {
has_any_inconsistency = true;
break;
}
}
if (!has_any_inconsistency) {
// eslint-disable-next-line no-console
console.log('%cNo inconsistent branches found', 'font-weight: bold; color: green');
return;
}
// eslint-disable-next-line no-console
console.group(`%cInconsistent Branches (non-clean below clean)`, 'font-weight: bold; color: red');
for (const branch of branches) {
log_branch(branch, false, 0);
}
// eslint-disable-next-line no-console
console.groupEnd();
return true;
}

3
packages/svelte/src/internal/client/reactivity/batch.js
Unescape View File

@ -175,6 +175,9 @@ export class Batch {
this.#traverse_effect_tree(root, target);
// Note: #traverse_effect_tree runs block effects eagerly, which can schedule effects,
// which means queued_root_effects now may be filled again.
// Helpful for debugging reactivity loss that has to do with branches being skipped:
// log_inconsistent_branches(root);
}
if (!this.is_fork) {

2
packages/svelte/src/internal/client/reactivity/sources.js
Unescape View File

@ -228,6 +228,8 @@ export function internal_set(source, value) {
source.wv = increment_write_version();
// For debugging, in case you want to know which reactions are being scheduled:
// log_reactions(source);
mark_reactions(source, DIRTY);
// It's possible that the current reaction might not have up-to-date dependencies

Write Preview
Loading…
Cancel
Save