mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-22 11:39:30 -07:00
Improve error handling and API efficiency
- Switch to safe*() methods for centralized error handling - Add error handling and validation - Optimize radar API usage by only fetching yesterday's data when needed - Use centralized URL rewriting for caching proxy support - Add debug logging throughout radar processing pipeline - Improve canvas context validation and error recovery - Handle worker errors gracefully by setting totalScreens = 0 to skip in animation - Remove unused OVERRIDES parameter passing to workers
This commit is contained in:
@@ -33,7 +33,20 @@ const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const removeDopplerRadarImageNoise = (RadarContext) => {
|
const removeDopplerRadarImageNoise = (RadarContext) => {
|
||||||
const RadarImageData = RadarContext.getImageData(0, 0, RadarContext.canvas.width, RadarContext.canvas.height);
|
// Validate canvas context and dimensions before calling getImageData
|
||||||
|
if (!RadarContext || !RadarContext.canvas) {
|
||||||
|
console.error('Invalid radar context provided to removeDopplerRadarImageNoise');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { canvas } = RadarContext;
|
||||||
|
if (canvas.width <= 0 || canvas.height <= 0) {
|
||||||
|
console.error(`Invalid canvas dimensions in removeDopplerRadarImageNoise: ${canvas.width}x${canvas.height}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const RadarImageData = RadarContext.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
// examine every pixel,
|
// examine every pixel,
|
||||||
// change any old rgb to the new-rgb
|
// change any old rgb to the new-rgb
|
||||||
@@ -118,6 +131,10 @@ const removeDopplerRadarImageNoise = (RadarContext) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
RadarContext.putImageData(RadarImageData, 0, 0);
|
RadarContext.putImageData(RadarImageData, 0, 0);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error in removeDopplerRadarImageNoise: ${error.message}. Canvas size: ${canvas.width}x${canvas.height}`);
|
||||||
|
// Don't re-throw the error, just log it and continue processing
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|||||||
@@ -2,13 +2,17 @@ import { removeDopplerRadarImageNoise } from './radar-utils.mjs';
|
|||||||
import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
|
import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
|
||||||
|
|
||||||
onmessage = async (e) => {
|
onmessage = async (e) => {
|
||||||
|
try {
|
||||||
const {
|
const {
|
||||||
url, RADAR_HOST, OVERRIDES, radarSourceXY,
|
url, radarSourceXY, debug,
|
||||||
} = e.data;
|
} = e.data;
|
||||||
|
|
||||||
// get the image
|
if (debug) {
|
||||||
const modifiedRadarUrl = OVERRIDES.RADAR_HOST ? url.replace(RADAR_HOST, OVERRIDES.RADAR_HOST) : url;
|
console.log('[RADAR-WORKER] Message received at:', new Date().toISOString(), 'File:', url.split('/').pop());
|
||||||
const radarResponsePromise = fetch(modifiedRadarUrl);
|
}
|
||||||
|
|
||||||
|
// get the image (URL is already rewritten for caching by radar.mjs)
|
||||||
|
const radarResponsePromise = fetch(url);
|
||||||
|
|
||||||
// calculate offsets and sizes
|
// calculate offsets and sizes
|
||||||
const radarSource = {
|
const radarSource = {
|
||||||
@@ -21,11 +25,15 @@ onmessage = async (e) => {
|
|||||||
// create radar context for manipulation
|
// create radar context for manipulation
|
||||||
const radarCanvas = new OffscreenCanvas(RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
|
const radarCanvas = new OffscreenCanvas(RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
|
||||||
const radarContext = radarCanvas.getContext('2d');
|
const radarContext = radarCanvas.getContext('2d');
|
||||||
|
if (!radarContext) {
|
||||||
|
throw new Error('Failed to get radar canvas context');
|
||||||
|
}
|
||||||
|
|
||||||
radarContext.imageSmoothingEnabled = false;
|
radarContext.imageSmoothingEnabled = false;
|
||||||
|
|
||||||
// test response
|
// test response
|
||||||
const radarResponse = await radarResponsePromise;
|
const radarResponse = await radarResponsePromise;
|
||||||
if (!radarResponse.ok) throw new Error(`Unable to fetch radar error ${radarResponse.status} ${radarResponse.statusText} from ${radarResponse.url}`);
|
if (!radarResponse.ok) throw new Error(`Unable to fetch radar image: got ${radarResponse.status} ${radarResponse.statusText} from ${radarResponse.url}`);
|
||||||
|
|
||||||
// get the blob
|
// get the blob
|
||||||
const radarImgBlob = await radarResponse.blob();
|
const radarImgBlob = await radarResponse.blob();
|
||||||
@@ -39,6 +47,10 @@ onmessage = async (e) => {
|
|||||||
// crop the radar image without scaling
|
// crop the radar image without scaling
|
||||||
const croppedRadarCanvas = new OffscreenCanvas(radarSource.width, radarSource.height);
|
const croppedRadarCanvas = new OffscreenCanvas(radarSource.width, radarSource.height);
|
||||||
const croppedRadarContext = croppedRadarCanvas.getContext('2d');
|
const croppedRadarContext = croppedRadarCanvas.getContext('2d');
|
||||||
|
if (!croppedRadarContext) {
|
||||||
|
throw new Error('Failed to get cropped radar canvas context');
|
||||||
|
}
|
||||||
|
|
||||||
croppedRadarContext.imageSmoothingEnabled = false;
|
croppedRadarContext.imageSmoothingEnabled = false;
|
||||||
croppedRadarContext.drawImage(radarCanvas, radarSource.x, radarSource.y, croppedRadarCanvas.width, croppedRadarCanvas.height, 0, 0, croppedRadarCanvas.width, croppedRadarCanvas.height);
|
croppedRadarContext.drawImage(radarCanvas, radarSource.x, radarSource.y, croppedRadarCanvas.width, croppedRadarCanvas.height, 0, 0, croppedRadarCanvas.width, croppedRadarCanvas.height);
|
||||||
|
|
||||||
@@ -48,10 +60,24 @@ onmessage = async (e) => {
|
|||||||
// stretch the radar image
|
// stretch the radar image
|
||||||
const stretchCanvas = new OffscreenCanvas(RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
|
const stretchCanvas = new OffscreenCanvas(RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
|
||||||
const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
|
const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
|
||||||
|
if (!stretchContext) {
|
||||||
|
throw new Error('Failed to get stretch canvas context');
|
||||||
|
}
|
||||||
|
|
||||||
stretchContext.imageSmoothingEnabled = false;
|
stretchContext.imageSmoothingEnabled = false;
|
||||||
stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
|
stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
|
||||||
|
|
||||||
const stretchedRadar = stretchCanvas.transferToImageBitmap();
|
const stretchedRadar = stretchCanvas.transferToImageBitmap();
|
||||||
|
|
||||||
|
if (debug) {
|
||||||
|
console.log('[RADAR-WORKER] Sending processed radar at:', new Date().toISOString(), 'Canvas size:', stretchCanvas.width, 'x', stretchCanvas.height, 'File:', url.split('/').pop());
|
||||||
|
}
|
||||||
|
|
||||||
postMessage(stretchedRadar, [stretchedRadar]);
|
postMessage(stretchedRadar, [stretchedRadar]);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('[RADAR-WORKER] Error at:', new Date().toISOString(), 'Error:', error.message);
|
||||||
|
// Handle radar fetch errors by indicating failure to the main thread
|
||||||
|
// This allows the radar display to set totalScreens = 0 and skip in animation
|
||||||
|
postMessage({ error: true, message: error.message });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
// current weather conditions display
|
// current weather conditions display
|
||||||
import STATUS from './status.mjs';
|
import STATUS from './status.mjs';
|
||||||
import { DateTime } from '../vendor/auto/luxon.mjs';
|
import { DateTime } from '../vendor/auto/luxon.mjs';
|
||||||
import { text } from './utils/fetch.mjs';
|
import { safeText } from './utils/fetch.mjs';
|
||||||
import WeatherDisplay from './weatherdisplay.mjs';
|
import WeatherDisplay from './weatherdisplay.mjs';
|
||||||
import { registerDisplay, timeZone } from './navigation.mjs';
|
import { registerDisplay, timeZone } from './navigation.mjs';
|
||||||
import * as utils from './radar-utils.mjs';
|
import * as utils from './radar-utils.mjs';
|
||||||
|
import { rewriteUrl } from './utils/url-rewrite.mjs';
|
||||||
|
import { debugFlag } from './utils/debug.mjs';
|
||||||
import { version } from './progress.mjs';
|
import { version } from './progress.mjs';
|
||||||
import setTiles from './radar-tiles.mjs';
|
import setTiles from './radar-tiles.mjs';
|
||||||
|
|
||||||
@@ -25,7 +27,8 @@ const isIos = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
|
|||||||
// context.
|
// context.
|
||||||
const isBot = /twitterbot|Facebot/i.test(window.navigator.userAgent);
|
const isBot = /twitterbot|Facebot/i.test(window.navigator.userAgent);
|
||||||
|
|
||||||
const RADAR_HOST = 'mesonet.agron.iastate.edu';
|
// Use OVERRIDE_RADAR_HOST if provided, otherwise default to mesonet
|
||||||
|
const RADAR_HOST = (typeof OVERRIDES !== 'undefined' ? OVERRIDES?.RADAR_HOST : undefined) || 'mesonet.agron.iastate.edu';
|
||||||
class Radar extends WeatherDisplay {
|
class Radar extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Local Radar', !isIos && !isBot);
|
super(navId, elemId, 'Local Radar', !isIos && !isBot);
|
||||||
@@ -76,35 +79,60 @@ class Radar extends WeatherDisplay {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const baseUrl = `https://${RADAR_HOST}/archive/data/`;
|
const baseUrl = `https://${RADAR_HOST}/archive/data/`;
|
||||||
const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
|
const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png'; // This URL returns an index of .png files for the given date
|
||||||
const baseUrls = [];
|
|
||||||
let date = DateTime.utc().minus({ days: 1 }).startOf('day');
|
|
||||||
|
|
||||||
// make urls for yesterday and today
|
// Always get today's data
|
||||||
while (date <= DateTime.utc().startOf('day')) {
|
const today = DateTime.utc().startOf('day');
|
||||||
baseUrls.push(`${baseUrl}${date.toFormat('yyyy/LL/dd')}${baseUrlEnd}`);
|
const todayStr = today.toFormat('yyyy/LL/dd');
|
||||||
date = date.plus({ days: 1 });
|
const yesterday = today.minus({ days: 1 });
|
||||||
|
const yesterdayStr = yesterday.toFormat('yyyy/LL/dd');
|
||||||
|
const todayUrl = `${baseUrl}${todayStr}${baseUrlEnd}`;
|
||||||
|
|
||||||
|
// Get today's data, then we'll see if we need yesterday's
|
||||||
|
const todayList = await safeText(todayUrl);
|
||||||
|
|
||||||
|
// Count available images from today
|
||||||
|
let todayImageCount = 0;
|
||||||
|
if (todayList) {
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const xmlDoc = parser.parseFromString(todayList, 'text/html');
|
||||||
|
const anchors = xmlDoc.querySelectorAll('a');
|
||||||
|
todayImageCount = Array.from(anchors).filter((elem) => elem.innerHTML?.match(/n0r_\d{12}\.png/)).length;
|
||||||
}
|
}
|
||||||
|
|
||||||
const lists = (await Promise.all(baseUrls.map(async (url) => {
|
// Only fetch yesterday's data if we don't have enough images from today
|
||||||
try {
|
// or if it's very early in the day when recent images might still be from yesterday
|
||||||
// get a list of available radars
|
const currentTimeUTC = DateTime.utc();
|
||||||
return text(url);
|
const minutesSinceMidnight = currentTimeUTC.hour * 60 + currentTimeUTC.minute;
|
||||||
} catch (error) {
|
const requiredTimeWindow = this.dopplerRadarImageMax * 5; // 5 minutes per image
|
||||||
console.log('Unable to get list of radars');
|
const needYesterday = todayImageCount < this.dopplerRadarImageMax || minutesSinceMidnight < requiredTimeWindow;
|
||||||
console.error(error);
|
|
||||||
this.setStatus(STATUS.failed);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}))).filter((d) => d);
|
|
||||||
|
|
||||||
// convert to an array of gif urls
|
// Build the final lists array
|
||||||
|
const lists = [];
|
||||||
|
if (needYesterday) {
|
||||||
|
const yesterdayUrl = `${baseUrl}${yesterdayStr}${baseUrlEnd}`;
|
||||||
|
const yesterdayList = await safeText(yesterdayUrl);
|
||||||
|
if (yesterdayList) {
|
||||||
|
lists.push(yesterdayList); // Add yesterday's data first
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (todayList) {
|
||||||
|
lists.push(todayList); // Add today's data
|
||||||
|
}
|
||||||
|
|
||||||
|
// convert to an array of png urls
|
||||||
const pngs = lists.flatMap((html, htmlIdx) => {
|
const pngs = lists.flatMap((html, htmlIdx) => {
|
||||||
const parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const xmlDoc = parser.parseFromString(html, 'text/html');
|
const xmlDoc = parser.parseFromString(html, 'text/html');
|
||||||
// add the base url
|
// add the base url - reconstruct the URL for each list
|
||||||
const base = xmlDoc.createElement('base');
|
const base = xmlDoc.createElement('base');
|
||||||
base.href = baseUrls[htmlIdx];
|
if (htmlIdx === 0 && needYesterday) {
|
||||||
|
// First item is yesterday's data when we fetched it
|
||||||
|
base.href = `${baseUrl}${yesterdayStr}${baseUrlEnd}`;
|
||||||
|
} else {
|
||||||
|
// This is today's data (or the only data if yesterday wasn't fetched)
|
||||||
|
base.href = `${baseUrl}${todayStr}${baseUrlEnd}`;
|
||||||
|
}
|
||||||
xmlDoc.head.append(base);
|
xmlDoc.head.append(base);
|
||||||
const anchors = xmlDoc.querySelectorAll('a');
|
const anchors = xmlDoc.querySelectorAll('a');
|
||||||
const urls = [];
|
const urls = [];
|
||||||
@@ -134,12 +162,12 @@ class Radar extends WeatherDisplay {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Load the most recent doppler radar images.
|
// Load the most recent doppler radar images.
|
||||||
|
try {
|
||||||
const radarInfo = await Promise.all(urls.map(async (url, index) => {
|
const radarInfo = await Promise.all(urls.map(async (url, index) => {
|
||||||
const processedRadar = await this.workers[index].processRadar({
|
const processedRadar = await this.workers[index].processRadar({
|
||||||
url,
|
url: rewriteUrl(url).toString(), // Apply URL rewriting for caching; convert to string for worker
|
||||||
RADAR_HOST,
|
|
||||||
OVERRIDES,
|
|
||||||
radarSourceXY,
|
radarSourceXY,
|
||||||
|
debug: debugFlag('radar'),
|
||||||
});
|
});
|
||||||
|
|
||||||
// store the time
|
// store the time
|
||||||
@@ -181,6 +209,11 @@ class Radar extends WeatherDisplay {
|
|||||||
|
|
||||||
this.times = radarInfo.map((radar) => radar.time);
|
this.times = radarInfo.map((radar) => radar.time);
|
||||||
this.setStatus(STATUS.loaded);
|
this.setStatus(STATUS.loaded);
|
||||||
|
} catch (_error) {
|
||||||
|
// Radar fetch failed - skip this display in animation by setting totalScreens = 0
|
||||||
|
this.timing.totalScreens = 0;
|
||||||
|
if (this.isEnabled) this.setStatus(STATUS.failed);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async drawCanvas() {
|
async drawCanvas() {
|
||||||
@@ -206,17 +239,34 @@ const radarWorker = () => {
|
|||||||
const worker = new Worker(`/resources/radar-worker.mjs?_=${version()}`, { type: 'module' });
|
const worker = new Worker(`/resources/radar-worker.mjs?_=${version()}`, { type: 'module' });
|
||||||
|
|
||||||
const processRadar = (data) => new Promise((resolve, reject) => {
|
const processRadar = (data) => new Promise((resolve, reject) => {
|
||||||
|
if (debugFlag('radar')) {
|
||||||
|
console.log('[RADAR-MAIN] Posting to worker at:', new Date().toISOString(), 'File:', data.url.split('/').pop());
|
||||||
|
}
|
||||||
// prepare for done message
|
// prepare for done message
|
||||||
worker.onmessage = (e) => {
|
worker.onmessage = (e) => {
|
||||||
if (e?.data instanceof Error) {
|
if (debugFlag('radar')) {
|
||||||
|
console.log('[RADAR-MAIN] Received from worker at:', new Date().toISOString(), 'Data type:', e?.data?.constructor?.name);
|
||||||
|
}
|
||||||
|
if (e?.data?.error) {
|
||||||
|
console.warn('[RADAR-MAIN] Worker error:', e.data.message);
|
||||||
|
// Worker encountered an error
|
||||||
|
reject(new Error(e.data.message));
|
||||||
|
} else if (e?.data instanceof Error) {
|
||||||
|
console.warn('[RADAR-MAIN] Worker exception:', e.data);
|
||||||
reject(e.data);
|
reject(e.data);
|
||||||
} else if (e?.data instanceof ImageBitmap) {
|
} else if (e?.data instanceof ImageBitmap) {
|
||||||
|
if (debugFlag('radar')) {
|
||||||
|
console.log('[RADAR-MAIN] Successfully received ImageBitmap, size:', e.data.width, 'x', e.data.height);
|
||||||
|
}
|
||||||
resolve(e.data);
|
resolve(e.data);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// start up the worker
|
// start up the worker
|
||||||
worker.postMessage(data);
|
worker.postMessage({
|
||||||
|
...data,
|
||||||
|
debug: debugFlag('radar'),
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// return the object
|
// return the object
|
||||||
|
|||||||
Reference in New Issue
Block a user