fix: add try-catch protection for Trianglify canvas generation to prevent runtime errors in Docker

This commit is contained in:
Muhammad Ibrahim
2025-10-28 18:25:13 +00:00
parent eb0218bdcb
commit ac420901a6
2 changed files with 46 additions and 36 deletions

View File

@@ -240,28 +240,33 @@ const Layout = ({ children }) => {
// Generate Trianglify background for dark mode // Generate Trianglify background for dark mode
useEffect(() => { useEffect(() => {
const generateBackground = () => { const generateBackground = () => {
if ( try {
bgCanvasRef.current && if (
themeConfig?.login && bgCanvasRef.current &&
document.documentElement.classList.contains("dark") themeConfig?.login &&
) { document.documentElement.classList.contains("dark")
// Get current date as seed for daily variation ) {
const today = new Date(); // Get current date as seed for daily variation
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`; const today = new Date();
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
// Generate pattern with selected theme configuration // Generate pattern with selected theme configuration
const pattern = trianglify({ const pattern = trianglify({
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
cellSize: themeConfig.login.cellSize, cellSize: themeConfig.login.cellSize,
variance: themeConfig.login.variance, variance: themeConfig.login.variance,
seed: dateSeed, seed: dateSeed,
xColors: themeConfig.login.xColors, xColors: themeConfig.login.xColors,
yColors: themeConfig.login.yColors, yColors: themeConfig.login.yColors,
}); });
// Render to canvas // Render to canvas
pattern.toCanvas(bgCanvasRef.current); pattern.toCanvas(bgCanvasRef.current);
}
} catch (error) {
// Canvas/trianglify not available, skip background generation
console.warn("Could not generate Trianglify background:", error);
} }
}; };

View File

@@ -60,24 +60,29 @@ const Login = () => {
// Generate Trianglify background based on selected theme // Generate Trianglify background based on selected theme
useEffect(() => { useEffect(() => {
const generateBackground = () => { const generateBackground = () => {
if (canvasRef.current && themeConfig?.login) { try {
// Get current date as seed for daily variation if (canvasRef.current && themeConfig?.login) {
const today = new Date(); // Get current date as seed for daily variation
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`; const today = new Date();
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
// Generate pattern with selected theme configuration // Generate pattern with selected theme configuration
const pattern = trianglify({ const pattern = trianglify({
width: canvasRef.current.offsetWidth, width: canvasRef.current.offsetWidth,
height: canvasRef.current.offsetHeight, height: canvasRef.current.offsetHeight,
cellSize: themeConfig.login.cellSize, cellSize: themeConfig.login.cellSize,
variance: themeConfig.login.variance, variance: themeConfig.login.variance,
seed: dateSeed, seed: dateSeed,
xColors: themeConfig.login.xColors, xColors: themeConfig.login.xColors,
yColors: themeConfig.login.yColors, yColors: themeConfig.login.yColors,
}); });
// Render to canvas // Render to canvas
pattern.toCanvas(canvasRef.current); pattern.toCanvas(canvasRef.current);
}
} catch (error) {
// Canvas/trianglify not available, skip background generation
console.warn("Could not generate Trianglify background:", error);
} }
}; };