Add debug logging for species/color picker bug

We're occasionally getting errors on the homepage, of the new message I added: `Error loading valid poses for species=, color=108: byteOffset cannot be negative`.

So ok, now we know it's a species undefined bug, coming from `onChangeSpecies`! That suggests we're not finding by ID correctly?

So I'm adding some new logging to help me understand the sequence of actions leading up to this point, and the species data state when the error itself happens!
This commit is contained in:
Emi Matchu 2021-01-26 14:08:09 -08:00
parent f74fc05112
commit 10e09e266c

View file

@ -82,6 +82,12 @@ function SpeciesColorPicker({
// outfit if so! // outfit if so!
const onChangeColor = (e) => { const onChangeColor = (e) => {
const newColorId = e.target.value; const newColorId = e.target.value;
console.debug(`SpeciesColorPicker.onChangeColor`, {
// for IMPRESS-2020-1H
speciesId,
colorId,
newColorId,
});
const species = allSpecies.find((s) => s.id === speciesId); const species = allSpecies.find((s) => s.id === speciesId);
const newColor = allColors.find((c) => c.id === newColorId); const newColor = allColors.find((c) => c.id === newColorId);
@ -89,10 +95,14 @@ function SpeciesColorPicker({
const isValid = validPoses.size > 0; const isValid = validPoses.size > 0;
if (stateMustAlwaysBeValid && !isValid) { if (stateMustAlwaysBeValid && !isValid) {
// NOTE: This shouldn't happen, because we should hide invalid colors. // NOTE: This shouldn't happen, because we should hide invalid colors.
console.error( logAndCapture(
new Error(
`Assertion error in SpeciesColorPicker: Entered an invalid state, ` + `Assertion error in SpeciesColorPicker: Entered an invalid state, ` +
`with prop stateMustAlwaysBeValid.` `with prop stateMustAlwaysBeValid: speciesId=${speciesId}, ` +
`colorId=${newColorId}.`
)
); );
return;
} }
const closestPose = getClosestPose(validPoses, idealPose); const closestPose = getClosestPose(validPoses, idealPose);
onChange(species, newColor, isValid, closestPose); onChange(species, newColor, isValid, closestPose);
@ -102,8 +112,28 @@ function SpeciesColorPicker({
// outfit if so! // outfit if so!
const onChangeSpecies = (e) => { const onChangeSpecies = (e) => {
const newSpeciesId = e.target.value; const newSpeciesId = e.target.value;
console.debug(`SpeciesColorPicker.onChangeSpecies`, {
// for IMPRESS-2020-1H
speciesId,
newSpeciesId,
colorId,
});
const newSpecies = allSpecies.find((s) => s.id === newSpeciesId); const newSpecies = allSpecies.find((s) => s.id === newSpeciesId);
if (!newSpecies) {
// Trying to isolate Sentry issue IMPRESS-2020-1H, where an empty species
// ends up coming out of `onChange`!
console.debug({ allSpecies, loadingMeta, errorMeta, meta });
logAndCapture(
new Error(
`Assertion error in SpeciesColorPicker: species not found. ` +
`speciesId=${speciesId}, newSpeciesId=${newSpeciesId}, ` +
`colorId=${colorId}.`
)
);
return;
}
let color = allColors.find((c) => c.id === colorId); let color = allColors.find((c) => c.id === colorId);
let validPoses = getValidPoses(valids, newSpeciesId, colorId); let validPoses = getValidPoses(valids, newSpeciesId, colorId);
let isValid = validPoses.size > 0; let isValid = validPoses.size > 0;