dioxus-logger：为Dioxus框架提供高效的日志记录和调试功能

介绍

dioxus-logger是一个专为Dioxus框架设计的日志记录库，它提供了简单易用的日志记录功能，帮助开发者在Dioxus应用中实现高效的调试和日志管理。这个库基于log和tracing生态系统构建，可以轻松集成到Dioxus项目中。

主要特性

• 专为Dioxus框架优化
• 支持多种日志级别（error、warn、info、debug、trace）
• 可配置的日志输出格式
• 与标准log crate兼容
• 轻量级且高性能

使用方法

基本安装

首先，在Cargo.toml中添加依赖：

[dependencies]
dioxus-logger = "0.1"
log = "0.4"

初始化日志记录器

在你的Dioxus应用启动代码中初始化日志记录器：

use dioxus::prelude::*;
use dioxus_logger::init_logger;

fn main() {
    // 初始化日志记录器
    init_logger(log::LevelFilter::Info).expect("Failed to initialize logger");
    
    // 启动Dioxus应用
    LaunchBuilder::new(App).launch();
}

#[component]
fn App() -> Element {
    // 记录一些日志
    log::info!("Application started!");
    
    rsx! {
        div { "Hello Dioxus!" }
    }
}

日志级别示例

#[component]
fn LoggingExample() -> Element {
    log::error!("This is an error message");
    log::warn!("This is a warning message");
    log::info!("This is an info message");
    log::debug!("This is a debug message");
    log::trace!("This is a trace message");
    
    rsx! { div { "Check your console for logs!" } }
}

高级配置

你可以自定义日志格式和过滤器：

use dioxus_logger::LoggerConfig;

fn main() {
    let config = LoggerConfig::default()
        .with_level(log::LevelFilter::Debug)
        .with_format("{t} [{l}] {s}");
    
    dioxus_logger::init(config).expect("Failed to initialize logger");
    
    LaunchBuilder::new(App).launch();
}

在Web环境中使用

在WebAssembly环境中，日志会输出到浏览器控制台：

fn main() {
    #[cfg(target_arch = "wasm32")]
    console_error_panic_hook::set_once();
    
    init_logger(log::LevelFilter::Debug).unwrap();
    
    LaunchBuilder::new(App).launch();
}

日志格式说明

默认日志格式为：[{level}] {file}:{line} - {message}

你可以使用以下占位符自定义格式：

• {t} - 时间戳
• {l} - 日志级别
• {s} - 日志消息
• {f} - 文件名
• {L} - 行号
• {m} - 模块路径

性能提示

对于生产环境，建议将日志级别设置为Info或更高，以减少不必要的日志开销：

init_logger(log::LevelFilter::Info).expect("Failed to initialize logger");

完整示例代码

下面是一个完整的Dioxus应用示例，展示了如何使用dioxus-logger进行日志记录：

use dioxus::prelude::*;
use dioxus_logger::{init_logger, LoggerConfig};

fn main() {
    // 初始化日志记录器，使用Debug级别便于开发调试
    #[cfg(not(target_arch = "wasm32"))]
    init_logger(log::LevelFilter::Debug).expect("Failed to initialize logger");

    // 在Web环境中额外设置panic hook
    #[cfg(target_arch = "wasm32")]
    {
        console_error_panic_hook::set_once();
        init_logger(log::LevelFilter::Debug).unwrap();
    }

    // 启动Dioxus应用
    LaunchBuilder::new(App).launch();
}

#[component]
fn App() -> Element {
    // 记录不同级别的日志
    log::info!("主应用组件已加载");
    
    rsx! {
        div {
            h1 { "Dioxus日志记录示例" }
            
            // 记录一些交互日志
            button {
                onclick: move |_| log::debug!("按钮被点击"),
                "点击我"
            }
            
            // 展示不同日志级别的组件
            LoggingLevelsDemo {}
        }
    }
}

#[component]
fn LoggingLevelsDemo() -> Element {
    // 模拟一些状态变化
    let mut count = use_signal(|| 0);
    
    // 根据count值记录不同级别的日志
    if count() > 5 {
        log::warn!("计数已达到较高值: {}", count());
    }
    
    rsx! {
        div {
            p { "当前计数: {count}" }
            button {
                onclick: move |_| {
                    count += 1;
                    log::trace!("计数增加至: {}", count);
                },
                "增加计数"
            }
            
            button {
                onclick: move |_| {
                    log::error!("模拟错误发生");
                },
                class: "bg-red-500",
                "触发错误"
            }
        }
    }
}

这个完整示例展示了：

1. 如何在不同平台(原生/WASM)初始化日志记录器
2. 在组件中使用各种日志级别
3. 根据应用状态记录不同的日志
4. 在事件处理程序中记录日志